Custom Video Track - React Native

You can pass a custom video track for a participant's video. Use it to set the video encoder config and camera facing mode of the video you send to other participants.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• enableCam()
• changeCam()

Creating a Custom Video Track

• You can create a Video Track using createCameraVideoTrack() method of @videosdk.live/react-native-sdk.
• This method can be used to create video track using different encoding parameters and camera facing mode.
• The camera opens when you call this method, so you can preview the track before you publish it. This method does not ask the user for camera access. Call requestPermission() of useMediaDevice() first, or the Promise rejects with ERROR_CAMERA_ACCESS_DENIED_OR_DISMISSED (3017).

Parameters

• cameraId:

  • type: String
  • required: false
  • It will be the id of the camera from which the video should be captured. Use a deviceId from getCameras().

• encoderConfig:

  • type: String
  • required: false
  • default: h720p_w1280p
  • Allowed values : h90p_w160p | h180p_w320p | h360p_w640p | h540p_w960p | h720p_w1280p | h1080p_w1920p | h120p_w160p | h180p_w240p | h240p_w320p | h360p_w480p | h480p_w640p | h720p_w960p | h1080p_w1440p
  • The encoder config to use for the video track.

note

These encoder configurations work in both landscape and portrait mode.

• facingMode:

  • type: String
  • required: false
  • default: front
  • Allowed values : front | back
  • It will specify whether to use front or back camera for the video track.

• multiStream

  • type: boolean
  • required: false
  • default: true
  • It will specify if the stream should send multiple resolution layers or single resolution layer.
  info

  • For rooms with fewer than or equal to four participants, setting multiStream:false is regarded as best practice.

createCameraVideoTrack() also takes bitrateMode, maxLayer and codec. See Custom Tracks for every parameter.

Returns

• Promise<CustomStreamTrack>
  • Preview it with <RTCView streamURL={customTrack.toURL()} />.
  • If you do not publish it, call customTrack.stop() to close the camera.

Example

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

let customTrack = await createCameraVideoTrack({
  encoderConfig: "h720p_w1280p",
  facingMode: "back",
});

Using Custom Video Track

Custom Track while initializing the room

If you are passing camEnabled: true in the config of RoomProvider and want to use custom tracks from start of the room, you can pass custom track in the config as shown below.

import { useEffect, useState } from "react";
import {
  Constants,
  createCameraVideoTrack,
  RoomProvider,
  useMediaDevice,
} from "@videosdk.live/react-native-sdk";

function App() {
  const { requestPermission } = useMediaDevice();

  const getTrack = async () => {
    // Ask for access first: creating a track does not prompt the user
    await requestPermission(Constants.permission.AUDIO_AND_VIDEO);
    const track = await createCameraVideoTrack({
      encoderConfig: "h720p_w1280p",
      facingMode: "back",
    });
    setCustomTrack(track);
  };

  let [customTrack, setCustomTrack] = useState(null);

  useEffect(() => {
    getTrack();
  }, []);

  return (
    customTrack && (
      <RoomProvider
        config={{
          roomId,
          participantName: "Participant Name",
          micEnabled: true,
          camEnabled: true, //If true, it will use the passed custom track to turn webcam on

          //Pass the custom video track here
          customCameraTrack: customTrack,
        }}
        token={token}
        joinWithoutUserInteraction={true}
      >
        <RoomView />
      </RoomProvider>
    )
  );
}

Custom Track with enableCam()

In order to switch tracks during the room, you have to pass the CustomStreamTrack in the enableCam() method of useRoom.

note

Make sure to call disableCam() before you pass a new track to enableCam(). While the camera is on, enableCam() rejects with ERROR_ALREADY_IN_REQUESTED_STATE (3054). To replace the track while the camera is on, pass it to changeCam().

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

let customTrack = await createCameraVideoTrack({
  encoderConfig: "h720p_w1280p",
  facingMode: "back",
});

const { enableCam, changeCam } = useRoom();

try {
  await enableCam(customTrack);
} catch (err) {
  console.error("enableCam failed:", err);
}

//or, while the camera is on

try {
  await changeCam(customTrack);
} catch (err) {
  console.error("changeCam failed:", err);
}