Custom Video Track - React Native

• 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, camera facing mode, bitrateMode, maxLayer and codec.
• The camera opens when you call this method, so you can preview the track before you join. This method never asks the user for camera access, on Android or iOS, so get it with requestPermission() from useMediaDevice() first.

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
  • You can choose from the below mentioned list of values for the encoder config. They are also available as Constants.CustomCameraTrackConfig.

Encoder Config	Resolution	Optimized (kbps)	Balanced (kbps)	High Quality (kbps)
h90p_w160p	160x90	40	90	120
h180p_w320p	320x180	60	120	180
h360p_w640p	640x360	300	450	600
h540p_w960p	960x540	600	900	1200
h720p_w1280p	1280x720	1000	1500	2000
h1080p_w1920p	1920x1080	1500	2200	2700
h120p_w160p	160x120	40	90	120
h180p_w240p	240x180	90	120	180
h240p_w320p	320x240	100	150	200
h360p_w480p	480x360	270	360	540
h480p_w640p	640x480	350	600	900
h720p_w960p	960x720	900	1200	1600
h1080p_w1440p	1440x1080	1500	2000	2700

note

Above mentioned encoder configurations are valid for both, landscape as well as portrait mode. The bitrates are the maximum for each bitrateMode.

• facingMode:

  • type: String
  • required: false
  • Allowed values : front | back
  • default: front
  • 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. Multiple layers need the VP8 codec.

• bitrateMode:

  • type: String
  • required: false
  • Allowed values : BANDWIDTH_OPTIMIZED | BALANCED | HIGH_QUALITY, the values of Constants.BitrateMode
  • default: BALANCED
  • Controls the video quality and bandwidth use. Choose HIGH_QUALITY for the best picture, BANDWIDTH_OPTIMIZED to save data, or BALANCED for a mix of both.

• maxLayer:

  • type: Number
  • required: false
  • Allowed values : 2 | 3
  • default: 3
  • Specifies the maximum number of simulcast layers to publish. This parameter only has an effect if multiStream is set to true.

• codec:

  • type: String
  • required: false
  • Allowed values : VP8 | VP9 | H264 | AV1
  • default: VP8
  • The video codec used to encode the track. With any codec other than VP8, the track is sent as a single layer, even when multiStream is true.

info

• To learn more about optimizations and best practices for using custom video tracks, follow this guide.

Returns

• Promise<CustomStreamTrack> that resolves once the camera is open.
  • Preview it with <RTCView streamURL={customTrack.toURL()} />.
  • Publish it by passing it to RoomProvider as customCameraTrack, or to enableCam() or changeCam() of useRoom().
  • Call stop() to close the camera if you do not publish the track. It does nothing once a room has published the track.

Example

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

let customTrack = await createCameraVideoTrack({
  encoderConfig: "h720p_w960p",
  facingMode: "back",
  multiStream: true,
  bitrateMode: "HIGH_QUALITY",
  maxLayer: 2,
});

Custom Audio Track - React Native

• You can create a Audio Track using createMicrophoneAudioTrack() method of @videosdk.live/react-native-sdk.
• This method can be used to create audio track using different encoding parameters and noise cancellation configration.
• The microphone opens when you call this method. This method never asks the user for microphone access, on Android or iOS, so get it with requestPermission() from useMediaDevice() first.

Parameters

• microphoneId:

  • type: String
  • required: false
  • It will be the id of the microphone from which the audio should be captured. Use a deviceId from getMics().

• encoderConfig:

  • type: String
  • required: false
  • default: speech_standard
  • You can choose from the below mentioned list of values for the encoder config. They are also available as Constants.CustomMicrophoneTrackConfig.

Encoder Config	Channels	Auto Gain	Echo Cancellation	Noise Suppression
speech_low_quality	Mono	TRUE	TRUE	TRUE
speech_standard	Mono	TRUE	TRUE	TRUE
music_standard	Mono	FALSE	FALSE	FALSE
standard_stereo	Stereo	FALSE	FALSE	FALSE
high_quality	Mono	FALSE	FALSE	FALSE
high_quality_stereo	Stereo	FALSE	FALSE	FALSE

• noiseConfig

  • Overrides the audio processing that the encoderConfig turns on or off. A flag you leave out keeps its default.

  • echoCancellation

    • type: boolean
    • required: false
    • If true, echo cancellation is on: the far end's voice picked up by the microphone is removed.

  • autoGainControl

    • type: boolean
    • required: false
    • If true, auto gain is on: the voice is kept at a steady level.

  • noiseSuppression

    • type: boolean
    • required: false
    • If true, noise suppression is on: background noise is removed.

  • highPassFilter

    • type: boolean
    • required: false
    • If true, the high-pass filter is on.

Returns

• Promise<CustomStreamTrack> that resolves once the microphone is open.
  • Publish it by passing it to RoomProvider as customMicrophoneTrack, or to unmuteMic() or changeMic() of useRoom().
  • Call stop() to close the microphone if you do not publish the track.

Example

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

let customTrack = await createMicrophoneAudioTrack({
  encoderConfig: "speech_standard",
  noiseConfig: {
    noiseSuppression: true,
    echoCancellation: true,
    autoGainControl: true,
  },
});

Custom Screen Share Track - React Native

• You can create a Video Track using createScreenShareVideoTrack() method of @videosdk.live/react-native-sdk.
• This method can be used to create a screen share track using different encoding parameters. Pass the track to enableScreenShare() or toggleScreenShare() of useRoom() to start sharing.
• On Android, the screen capture consent dialog appears when you create the track. On iOS, enableScreenShare() opens the system broadcast picker, and sharing starts when the user taps Start Broadcast.

Parameters

• encoderConfig:

  • type: String
  • required: false
  • default: h720p_15fps
  • You can choose from the below mentioned list of values for the encoder config.

Encoder Config	Resolution	Frame Rate	Bitrate (kbps)
h360p_30fps	640x360	30 fps	400
h480p_15fps	854x480	15 fps	300
h480p_30fps	854x480	30 fps	500
h720p_5fps	1280x720	5 fps	400
h720p_15fps	1280x720	15 fps	1000
h720p_30fps	1280x720	30 fps	1500
h1080p_15fps	1920x1080	15 fps	1500
h1080p_30fps	1920x1080	30 fps	2000

note

Above mentioned encoder configurations are valid for both, landscape as well as portrait mode. On iOS, the system sets the capture size, so only the frame rate and bitrate apply.

• multiStream

  • type: boolean
  • required: false
  • default: false
  • If true, the screen share is sent as several quality layers instead of one: three for the 720p and 1080p configs, two for the 360p and 480p configs.

• withAudio

  • type: boolean
  • required: false
  • default: false
  • Android 10 and later only. If true, system audio is shared as well. It is mixed into your microphone track, so muting the microphone mutes both. On iOS, this option has no effect.

Returns

• Promise<CustomStreamTrack>. Pass it to enableScreenShare() or toggleScreenShare() of useRoom().

Example

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

const { enableScreenShare } = useRoom();

const startShare = async () => {
  const customTrack = await createScreenShareVideoTrack({
    encoderConfig: "h720p_15fps",
    withAudio: true, // Android only
  });
  await enableScreenShare(customTrack);
};

note

Pass only tracks created with createCameraVideoTrack(), createMicrophoneAudioTrack() and createScreenShareVideoTrack() to RoomProvider and to the useRoom() methods.

CustomStreamTrack

The three functions above resolve a CustomStreamTrack: a device your app opened. Preview it, publish it, or stop it.

Properties

• id: string | null, the track's id. null when no device was opened.
• trackId: string | null, the same value as id.
• kind: "audio" | "video" | "share"
• active: boolean, false once the track is stopped.
• isEnded: boolean, read-only. true once the device has gone: after stop(), when a room turns the track off or replaces it, when you leave the room, or when the device fails. Passing an ended track to a room reports 3031 or 3032 and the room uses its own camera or microphone instead.
• onEnded: (error) => void | null. Called once when the track ends. error is a VideoSDKError with code, name and message when the device failed or access was revoked, and null when the track was stopped, turned off, replaced or the room was left. If you set it after the track has ended, it is called at once.

Methods

• stop(): Promise<void>. Releases the device. It does nothing once a room has published the track.
• toURL(): the value <RTCView streamURL> takes, or null when no device was opened.
• getTracks(), getVideoTracks(), getAudioTracks(): describe the device. Each entry has id, trackId, kind, readyState ("live" or "ended") and stop(). The entries describe the device. They carry no media.

Example

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

const track = await createCameraVideoTrack({ facingMode: "front" });

track.onEnded = (error) => {
  console.log("Camera ended", error?.message);
};

<RTCView streamURL={track.toURL()} objectFit="cover" />;

// Later, if you never published it
await track.stop();