Video Processor iOS Setup - React Native

VideoSDK allows you to add unique effects to your video stream before transmission during video calls with custom native video processing code. This guide offers step-by-step instructions for creating and implementing a custom video processor for frame manipulation on iOS.

Installation

• To create a custom video processor, you first need to install the react-native-webrtc package in your React Native app using either npm or yarn.

NPM

npm i "@videosdk.live/react-native-webrtc"

YARN

yarn add "@videosdk.live/react-native-webrtc"

• To enable native processor development on iOS, add the following line to your Podfile :

Podfile

pod 'react-native-webrtc', :path => '../node_modules/@videosdk.live/react-native-webrtc'

Step-by-Step Guide: Integrating Native Video Processor in React Native

Step 1: Create Your Own Processor Code

• First, create a class that implements the VideoFrameProcessorDelegate protocol. In this class, implement the method capturer(_:didCapture:), which allows you to modify the video frames. Within this method, you can define the logic for manipulating video frames based on your specific requirements. After applying the desired effect to the video frame, ensure that you return the processed frame.

YourOwnBackgroundProcessor.swift

import Foundation
import react_native_webrtc

@objc public class YourOwnBackgroundProcessor: NSObject, VideoFrameProcessorDelegate {
  
  public func capturer(_ capturer: RTCVideoCapturer!, didCapture frame: RTCVideoFrame!) -> RTCVideoFrame! {
    // Add your custom code here to apply the effect and return the processed VideoFrame
    return proceedFrame
  }

   @objc public init() {
    //
    super.init()
  }
}

Step 2: Register your Processor

• Next, create a class that extends RCTBridgeModule. This class acts as a bridge between the native iOS code and React Native, allowing you to interact with native modules from JavaScript.
• In this class, register your custom video processor using the addProcessor() method from the ProcessorProvider class. Provide a String representing the unique processor name along with an instance of your processor to complete the registration. This processor name will be used later to apply the effects offered by your processor.

VideoEffectModule.h

#import <React/RCTBridgeModule.h>

@interface VideoEffectModule : NSObject <RCTBridgeModule>
@end

VideoEffectModule.m

#import "VideoEffectModule.h"
#import "ProcessorProvider.h"
#import "YourApp-Bridging-Header.h"  // Replace with your project name
#import "YourApp-Swift.h" // Replace with your project name
#include <Foundation/Foundation.h>

@implementation VideoEffectModule

RCT_EXPORT_MODULE(VideoEffectModule);

RCT_EXPORT_METHOD(registerProcessor:(NSString *)name) {
  YourOwnBackgroundProcessor *processor = [[YourOwnBackgroundProcessor alloc] init];
  [ProcessorProvider addProcessor:processor forName:name];
}

• Now, in your React Native app, you can register the processor using the module.

app.js

const {VideoEffectModule} = NativeModules;

function register() {
  VideoEffectModule.registerProcessor("ProcessorName");
}

Step 3: Apply the Processor

• Once you have registered the processor, you can use it throughout the entire app lifecycle. To apply the effect, use the applyVideoProcessor() method from the VideoProcessor class. This method requires the name of the processor that was used during registration.

app.js

import {
  VideoProcessor
} from "@videosdk.live/react-native-webrtc";

function applyProcessor() {
  VideoProcessor.applyVideoProcessor("ProcessorName");
}

Step 4: Remove the Processor

• You can remove the processor when you no longer need the effect. To do this, use the removeVideoProcessor() method from the VideoProcessor class. This method will remove the effect of the currently active video processor.

app.js

import {
  VideoProcessor
} from "@videosdk.live/react-native-webrtc";

function removeProcessor() {
  VideoProcessor.removeVideoProcessor();
}