Customize Audio/Video - Prebuilt

We now have the option to customize the audio, video and screen sharing. This feature is used to pass resolution, optimization mode for associated audio, video, and screen sharing configuration.

Three different configurations will be covered in this guide.

1. Custom Video Config
2. Custom Audio Config
3. Custom Screen Share Config

Custom Video Config

This feature can be used to add custom video resolution, optimization mode (whether you want to focus on motion, text or detail of the video).

Custom Video Attributes

• videoConfig.cameraId - Device id of the camera to use when acquiring the local video track. If not provided, the SDK picks the system default camera.

• videoConfig.resolution- You can set resolution value to h360p_w640p, h540p_w960p, h720p_w1280p, or h1080p_w1920p, by default the resolution is set to h360p_w640p. If you want to know more values of resolution then checkout this Prebuilt SDK Referenece.

• videoConfig.optimizationMode - You can focus on optimization by providing specific mode of the video (i.e. text, motion, etc.) to the optimizationMode, by default is set to motion.

• videoConfig.multiStream - If it is true, multiple resolution layers are send in single video stream. If it is false, then only single resolution layer is send in video stream, by default is set to true.

• videoConfig.bitrateMode - Camera stream bitrate strategy. Accepted values are balanced, high_quality, or bandwidth_optimized. Default is balanced.

• videoConfig.maxLayer - Maximum number of simulcast layers to publish for the camera stream. Allowed values are 2 or 3. Default is 3.

• videoConfig.codec - Video codec used for the camera stream. Accepted values are VP8, VP9, AV1, or H264. Default is VP8.

info

• For meetings with fewer than or equal to four participants, setting multiStream:false is regarded as best practice.
• The multiStream parameter is only available from v0.3.29.
• cameraId, bitrateMode, maxLayer, and codec are available from v0.3.46.

index.html

const config = {
  // ...
  videoConfig: {
    cameraId: "<your-camera-device-id>", // optional
    resolution: "h720p_w1280p", //h360p_w640p, h540p_w960p, h1080p_w1920p
    optimizationMode: "motion", // text , detail
    multiStream: true,
    bitrateMode: "balanced", // high_quality, bandwidth_optimized
    maxLayer: 3, // 2
    codec: "VP8", // VP9, AV1, H264
  },
  // ...
};

How it works ?

• The network icon of the user video tile, as seen below, will display the video resolution configuration that you have specified.

Custom Audio Config

This feature can be used to set the quality of audio and send it to other participants.

Custom Audio Attributes

• audioConfig.quality- You can set quality value to speech_low_quality , speech_standard or high_quality , by default quality is set to speech_standard. If you want to know more values of quality then checkout this Prebuilt SDK Referenece.

• audioConfig.noiseConfig - Fine-grained microphone processing flags applied when acquiring the local audio track.

  • audioConfig.noiseConfig.echoCancellation - Enable browser echo cancellation. Default is true.
  • audioConfig.noiseConfig.autoGainControl - Enable browser automatic gain control. Default is true.
  • audioConfig.noiseConfig.noiseSuppression - Enable browser noise suppression. Default is true.

info

• noiseConfig is available from v0.3.46.

index.html

const config = {
  // ...
  audioConfig: {
    quality: "speech_standard", //speech_low_quality , high_quality
    noiseConfig: {
      echoCancellation: true,
      autoGainControl: true,
      noiseSuppression: true,
    },
  },
  // ...
};

Custom Screen Share Config

This feature can be used to add custom screen sharing resolution, optimization mode (whether you want to focus on motion, text or detail of the video) and send it to other participants.

Custom Screen Share Attributes

• screenShareConfig.resolution- You can set resolution value to h360p_30fps , h720p_5fps or h1080p_15fps of screen shared video , by default resolution is set to h720p_15fps. If you want to know more values of resolution then checkout this Prebuilt SDK Referenece.

• screenShareConfig.optimizationMode - You can focus on optimization by providing specific mode of the video (i.e. text, motion, etc.) to the optimizationMode, by default is set to motion.

• screenShareConfig.withAudio - Capture system / tab audio along with the screen share. Accepted values are enable or disable. Default is disable.

• screenShareConfig.multiStream - If true, publishes a multi-layer screen share stream so remote participants can adapt to their network. Default is false.

info

• withAudio and multiStream are available from v0.3.46.

index.html

const config = {
  // ...
  screenShareConfig: {
    resolution: "h720p_15fps", // h360p_30fps , h720p_5fps, h1080p_15fps
    optimizationMode: "text", // motion , detail
    withAudio: "disable", // enable
    multiStream: false, // true
  },
  // ...
};