Optimize Video Tracks - Flutter

While optimizing for the best viewing experience, it is necessary to fine-tune the video tracks that are being used during the calls.

For the best fine-tuning experience, we have introduced the ability to pass a custom video track for the participant's media before and during the meeting.

Custom Video Track

This feature can be used to add custom video encoder configurations and background removal & video filter from external libraries and send it to other participants.

How to Create 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 by specifying parameters like video resolution, camera facing mode, and the quality controls (bitrateMode and maxLayer).

• The video resolutions listed below are common encoder configuration options supported across All Platforms.

Encoder Config	Resolution	Frame Rate	Optimized (kbps)	Balanced (kbps)	High Quality (kbps)
h144p_w192p	192x144	15 fps	60	100	150
h240p_w320p	320x240	15 fps	120	200	350
h480p_w640p	640x480	25 fps	300	500	750
h720p_w960p	960x720	30 fps	800	1200	1600
h1080p_w1440p	1440x1080	30 fps	1600	2200	2700
h360p_w640p	640x360	20 fps	200	400	600
h720p_w1280p	1280x720	30 fps	1000	1500	2000
h1080p_w1440p	1280x720	30 fps	1600	2300	2700

• The video resolutions listed below are additional encoder configuration options available specifically for Web applications.

Encoder Config	Resolution	Frame Rate	Optimized (kbps)	Balanced (kbps)	High Quality (kbps)
h120p_w160p	160x120	15 fps	60	100	150
h180p_w240p	240x180	15 fps	100	150	250
h360p_w480p	480x360	20 fps	200	400	600
h540p_w720p	720×540	30 fps	350	650	800
h1440p_w1920p	1920×1440	30 fps	3500	4000	4500
h180p_w320p	320x180	15 fps	100	150	250
h216p_w384p	384x216	15 fps	120	200	350
h540p_w960p	960x540	25 fps	400	600	800
h1440p_w2560p	2560x1440	30 fps	5000	5500	6000
h2160p_w3840p	3840x2160	30 fps	8000	8500	9000

important

The below encoder configurations can also be used in mobile applications (Android and iOS). However, the actual video resolution may differ from the requested value due to device and hardware limitations. To obtain the exact resolution being used, refer to the supported video tracks available on the mobile application.

note

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

Example

import 'package:videosdk/videosdk.dart';

CustomTrack? customTrack = await VideoSDK.createCameraVideoTrack({
  // It will be the id of the camera from which the video should be captured.
  cameraId:"camera-id", // OPTIONAL

  // This will accept the resolution (height x width) of video you want to capture.
  encoderConfig: "h720p_w960p", // "h480p_w640p" | "h360p_w640p" ... // Default : "h720p_w1280p"

  // For Mobile browser It will specify whether to use front or back camera for the video track.
  facingMode: "FacingMode.environment", // "FacingMode.front"

  // We will discuss this parameter in next step.
  multiStream:true // false,  Default : true

  // Optional: This controls the video quality and bandwidth usage.
  bitrateMode: BitrateMode.HIGH_QUALITY, // "HIGH_QUALITY" | "BALANCED" , Default : BALANCED

  // Optional: This specifies the maximum number of simulcast layers (maxLayer) to publish.
  maxLayer: 2 // 3 , Default: 3

});

caution

The capabilities of the device have a significant impact on how custom track configurations behave. Assuming a case where you set encoder configuration to 1080p but the webcam only supports 720p, then encoder configuration will automatically switch to the highest resolution that the device can handle, which is 720p.

What is multiStream?

• It will specify if the stream should send multiple resolution layers or single resolution layer.

multiStream : true By default, VideoSDK sends multiple resolution video streams to the server (whether you are using custom video track or not), For instance, user device capability is 720p, so VideoSDK sends 720p along with 360p and 90p streams. This allows VideoSDK to deliver the appropriate stream to each participant based on their network bandwidth.

multiStream : false If you want to restrict the VideoSDK to send only one stream to maintain quality, you can set multiStream to false.

important

MultiStream functionality is not supported in the Firefox browser. VideoSDK will only send one stream for Firefox browsers.

danger

setQuality would not have any effect if multiStream is set to false.

What is BitrateMode?

BitrateMode is the key setting for video quality. It lets you decide whether to prioritize sharp details, save internet data, or find a good balance between the two.

You can choose from three distinct modes:

• bandwidth_optimized: Prioritizes lower bandwidth usage over video quality. Ideal for users with poor or unstable network conditions.
• balanced: The default setting. It provides a smart compromise between clear video and efficient bandwidth consumption, suitable for most use cases.
• high_quality: Prioritizes video quality over bandwidth usage. Use this when high-fidelity video is essential and viewers are expected to have strong network connections.

What is maxLayer?

maxLayer is an advanced parameter that gives you direct control over simulcast, which is the process of sending multiple versions (or "layers") of the same video stream at different resolutions and qualities simultaneously.

• maxLayer : 3 (Default): Publishes all available layers (e.g., high, medium, and low quality). This provides the maximum adaptability for viewers on diverse and unpredictable networks.

• maxLayer : 2: Intelligently publishes only the highest and lowest quality layers, skipping any in the middle. This is useful for providing a high-quality option and a low-bandwidth fallback without the overhead of a third stream.

  • If a device is capable of producing a h720p_w960p stream, setting maxLayer : 2 will result in two streams being sent: the highest quality (h720p_w960p) and the lowest quality (e.g. h240p_w320p), ensuring a fallback for poor connections.

info

To use the maxLayer parameter, multiStream must be set to true. The multiStream flag enables simulcasting (sending multiple quality streams), while maxLayer specifies how many streams to send.

How to Setup a Custom Video Track ?

The custom track can be set up both before and after the initialization of the meeting.

1. Setting up a Custom Track during the initialization of a meeting
2. Setting up a Custom Track with methods

1. Setting up a Custom Track during the initialization of a meeting

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

caution

Custom Track will not apply on webcamEnabled: false configuration.

Example

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class MeetingScreen extends StatefulWidget {
  final String meetingId;
  final String token;

  const MeetingScreen(
      {super.key, required this.meetingId, required this.token});

  @override
  State<MeetingScreen> createState() => _MeetingScreenState();
}

class _MeetingScreenState extends State<MeetingScreen> {
  late Room _room;

  @override
  void initState() {
    initRoom();
    super.initState();
  }

  void initRoom() {
    //Creating Custom Video Track
    CustomTrack? videoTrack = await VideoSDK.createCameraVideoTrack(
      encoderConfig: CustomVideoTrackConfig.h720p_w960p,
      multiStream: true,
      bitrateMode: BitrateMode.HIGH_QUALITY,
      maxLayer: 2
    );

    //Creating a new Room with custom audio track
    // create room
    _room = VideoSDK.createRoom(
      roomId: widget.meetingId,
      token: widget.token,
      displayName: "John Doe",
      micEnabled: true,
      camEnabled: true,
      defaultCameraIndex:
          1, // Index of MediaDevices will be used to set default camera
      customCameraVideoTrack: videoTrack, // custom video track :: optional
    );
  }

  @override
  Widget build(BuildContext context) {
    return YourMeetingWidget();
  }
}

2. Setting up a Custom Track with methods

In order to switch tracks during the meeting, you have to pass the CustomTrack in the enableCam() method of Room.

tip

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

Example

import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class MeetingScreen extends StatefulWidget {
  final String meetingId;
  final String token;

  const MeetingScreen(
      {super.key, required this.meetingId, required this.token});

  @override
  State<MeetingScreen> createState() => _MeetingScreenState();
}

class _MeetingScreenState extends State<MeetingScreen> {
  late Room _room;

  @override
  void initState() {
    initRoom();
    super.initState();
  }

  void initRoom() {
    ...
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      childern: [
        ElevatedButton(
          onPressed: ()async{
            //Creating Custom Video Track
            CustomTrack? videoTrack = await VideoSDK.createCameraVideoTrack(
                encoderConfig: CustomVideoTrackConfig.h720p_w960p,
                multiStream: true,
                bitrateMode: BitrateMode.HIGH_QUALITY,
                maxLayer: 2
            );

            _room.enableCam(videoTrack);
            //higlight-end
          },
          child: const Text("Enable Cam with Custom Track"),
        ),
      ]
    )
  }
}

Which Configuration is suitable for Device ?

In this section, we will understand participant size wise encoder(Resolution) and multiStream configuration.

API Reference

The API references for all the methods and events utilised in this guide are provided below.

• Custom Video Track