Video Processor iOS Setup - React Native

You can change each camera frame on iOS with your own Swift code before it is sent. You write a processor, register it under a name, and apply it from JavaScript by that name.

The processor classes ship with @videosdk.live/react-native-sdk, so you need no other package. Complete the SDK's iOS setup first.

Step 1: Create Your Own Processor

• Create a class that conforms to VideoSDKVideoProcessor from VideoSDKRTC.
• Implement onFrameReceived(pixelBuffer:). It receives each camera frame as a CVPixelBuffer and returns the buffer to send. Return nil to skip the frame.

YourOwnBackgroundProcessor.swift

import CoreVideo
import VideoSDKRTC

final class YourOwnBackgroundProcessor: VideoSDKVideoProcessor {
  func onFrameReceived(pixelBuffer: CVPixelBuffer) -> CVPixelBuffer? {
    // Apply your effect here and return the processed buffer.
    // Returning pixelBuffer sends the frame unchanged.
    return pixelBuffer
  }
}

• onFrameReceived(pixelBuffer:) runs for every frame. Keep the work shorter than one frame interval, or frames are dropped.

Step 2: Register Your Processor

• Create a native module in your app and register the processor with VideoProcessorRegistry.shared.register(name:processor:) from VideoSDKReactNative. Use the same name you will pass from JavaScript. Registering another processor under the same name replaces the first one.
• VideoProcessorRegistry.shared.unregister(name:) removes it.

VideoEffectModule.swift

import Foundation
import React
import VideoSDKReactNative

@objc(VideoEffectModule)
final class VideoEffectModule: NSObject {
  @objc static func requiresMainQueueSetup() -> Bool { false }

  @objc(registerProcessor:)
  func registerProcessor(_ processorName: String) {
    VideoProcessorRegistry.shared.register(
      name: processorName,
      processor: YourOwnBackgroundProcessor()
    )
  }
}

VideoEffectModule.m

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(VideoEffectModule, NSObject)

RCT_EXTERN_METHOD(registerProcessor:(NSString *)processorName)

@end

Step 3: Apply the Processor from JavaScript

• Call your module once to register the processor, for example when the app starts.
• After you join the room, apply it with setVideoProcessor() from the useRoom hook, and remove it with removeVideoProcessor(). Both reject before join().

import { NativeModules } from "react-native";
import { useRoom } from "@videosdk.live/react-native-sdk";

const { VideoEffectModule } = NativeModules;

// Once, when the app starts
VideoEffectModule.registerProcessor("ProcessorName");

function EffectButtons() {
  const { setVideoProcessor, removeVideoProcessor } = useRoom();

  const applyEffect = async () => {
    try {
      await setVideoProcessor("ProcessorName");
    } catch (error) {
      console.warn("Video processor:", error.code, error.message);
    }
  };

  const removeEffect = () => removeVideoProcessor();

  return null;
}

• setVideoProcessor() rejects with ERROR_INVALID_PARAMETER (3073) when no processor is registered under the name.

note

If your app has an iOS video processor from v1.x.x, remove the code that imports react_native_webrtc, implements VideoFrameProcessorDelegate or registers with ProcessorProvider. Your iOS build fails until that code is gone. To upgrade, see the Migration Guide.

API Reference

The API references for all the methods and events utilized in this guide are provided below.

• setVideoProcessor()
• removeVideoProcessor()
• VideoProcessorRegistry is a native class you call from your iOS app code.