Custom Video Track - React

• You can create a Video Track using createCameraVideoTrack() method of @videosdk.live/react-sdk.
• This method can be used to create video track using different encoding parameters, camera facing mode, bitrateMode, maxLayer and optimization mode.

Parameters

• cameraId:

  • type: String
  • required: false
  • It will be the id of the camera from which the video should be captured.

• encoderConfig:

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

Encoder Config	Resolution	Frame Rate	Optimized (kbps)	Balanced (kbps)	High Quality (kbps)
h90p_w160p	160x90	15 fps	60	100	150
h180p_w320p	320x180	15 fps	100	150	250
h216p_w384p	384x216	15	120	200	350
h360p_w640p	640x360	20	200	400	600
h540p_w960p	960x540	25	350	550	800
h720p_w1280p	1280x720	30	1000	1500	2000
h1080p_w1920p	1920x1080	30	1600	2200	2700
h1440p_w2560p	2560x1440	30	5000	5500	6000
h2160p_w3840p	3840x2160	30	8000	8500	9000
h120p_w160p	160x120	15	60	100	150
h180p_w240p	240x180	15	100	150	250
h240p_w320p	320x240	15	120	200	350
h360p_w480p	480x360	20	200	400	600
h480p_w640p	640×480	25	300	500	700
h540p_w720p	720×540	30	350	550	800
h720p_w960p	960×720	30	900	1300	1600
h1080p_w1440p	1440×1080	30	1600	2200	2700
h1440p_w1920p	1920×1440	30	3500	4000	4500

note

Above mentioned encoder configurations are valid for both, landscape as well as portrait mode.

• facingMode:

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

• optimizationMode

  • type: String
  • required: false
  • Allowed values: motion | text | detail
  • It will specify the optimization mode for the video track being generated.

• multiStream

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

• bitrateMode:

  • type: String
  • required: false
  • Allowed values : bandwidth_optimized | balanced | high_quality
  • Controls the video quality and bandwidth consumption. You can choose between high_quality for the best picture, bandwidth_optimized to save data, or balanced for a mix of both. Defaults to balanced.

• 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.

info

• To learn more about optimizations and best practices for using custom video tracks, follow this guide.
• This parameter is only available from v0.1.53.

Returns

• MediaStream

Example

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

let customTrack = await createCameraVideoTrack({
  optimizationMode: "motion",
  encoderConfig: "h720p_w1280p",
  facingMode: "environment",
  multiStream: true,
  bitrateMode: Constants.BitrateMode.BANDWIDTH_OPTIMIZED,
  maxLayer: 2
});

Custom Audio Track - React

• You can create a Audio Track using createMicrophoneAudioTrack() method of @videosdk.live/react-sdk.
• This method can be used to create audio track using different encoding parameters and noise cancellation configration.

Parameters

• microphoneId:

  • type: String
  • required: false
  • It will be the id of the mic from which the audio should be captured.

• encoderConfig:

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

Encoder Config	Bitrate	Auto Gain	Echo Cancellation	Noise Suppression
speech_low_quality	16 kbps	TRUE	TRUE	TRUE
speech_standard	24 kbps	TRUE	TRUE	TRUE
music_standard	32 kbps	FALSE	FALSE	FALSE
standard_stereo	64 kbps	FALSE	FALSE	FALSE
high_quality	128 kbps	FALSE	FALSE	FALSE
high_quality_stereo	192 kbps	FALSE	FALSE	FALSE

• noiseConfig

  • echoCancellation

    • type: boolean
    • required: false
    • If true echo cancellation will turned on else it would be turned off.

  • autoGainControl

    • type: boolean
    • required: false
    • If true auto gain will turned on else it would be turned off.

  • noiseSuppression

    • type: boolean
    • required: false
    • If true noise suppression will turned on else it would be turned off.

Returns

• MediaStream

Example

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

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

Custom Screen Share Track - React

• You can create a Video Track using createScreenShareVideoTrack() method of @videosdk.live/react-sdk.
• This method can be used to create video track using different encoding parameters and optimization mode.

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 (High)
h360p_30fps	640x360	30 fps	400 kbps
h480p_15fps	854x480	15 fps	300 kbps
h480p_30fps	854x480	30 fps	500 kbps
h720p_5fps	1280x720	5 fps	400 kbps
h720p_15fps	1280x720	15 fps	1000 kbps (1 Mbps)
h720p_30fps	1280x720	30 fps	1500 kbps (1.5 Mbps)
h1080p_15fps	1920x1080	15 fps	1500 kbps (1.5 Mbps)
h1080p_30fps	1920x1080	30 fps	2000 kbps (2 Mbps)

note

• Above mentioned encoder configurations are valid for both, landscape as well as portrait mode.
• The following encoder configurations are newly added in SDK v0.3.4+:
  • h480p_15fps
  • h480p_30fps
  • h720p_30fps

• optimizationMode
  • type: String
  • required: false
  • Allowed values: motion | text | detail
  • It will specify the optimization mode for the video track being generated.

Returns

• MediaStream

Example

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

let customTrack = await createScreenShareVideoTrack({
  optimizationMode: "motion",
  encoderConfig: "h720p_15fps",
});