Custom Video Track - Javascript

We have introduced the ability to pass a custom video track for the video of the participants. This feature can be used to add custom video encoder config, optimization mode (whether you want to focus on motion, text or detail of the video) and background removal & video filter from external SDK(e.g., Banuba) and send it to other participants.

Creating a Custom Video Track

• You can create a Video Track using createCameraVideoTrack() method of VideoSDK class.
• 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.
  info

  • For meetings with fewer than or equal to four participants, setting multiStream:false is regarded as best practice.
  • This parameter is only available from v0.0.53.

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

Returns

• MediaStream

Example

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

Using Custom Video Track

Custom Track while initializing the meeting

If you are passing webcamEnabled: true in the initMeeting and want to use custom tracks from start of the meeting, you can pass custom track in the initMeeting params as shown below.

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

meeting = VideoSDK.initMeeting({
  meetingId: meetingId, // required
  name: name, // required
  micEnabled: micOn, // optional, default: true
  webcamEnabled: webcamOn, // optional, default: true

  // Pass the custom track here which will be used to when webcam is auto started
  customCameraVideoTrack: customTrack,
});

Custom Track with enableWebcam()

In order to switch tracks during the meeting, you have to pass the MediaStream in the meeting.enableWebcam() method.

note

Make sure to call disableWebcam() before you create a new track as it may lead to unexpected behavior.

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

meeting.enableWebcam(customTrack);