Configure video encoding

Customer satisfaction with your Video Calling integrated app depends on the quality of video and audio it provides. The sharpness, smoothness, and overall quality of the video is directly linked to the frame rate, bitrate, and other video encoder settings. Choosing improper settings can result in poor video quality. Conversely, if the settings are too demanding, the available bandwidth quickly gets choked, leading to a suboptimal experience for your users.

Try out the online demo to Adjust video profile.

This page guides you on configuring the video encoder settings to ensure optimal video quality in your Interactive Live Streaming app.

In Video SDK you can set the video dimensions, framerate, bitrate, orientation mode, and mirror mode by specifying a video profile. You can also set the degradation preference to specify how video quality is degraded under suboptimal network conditions.

The recommended video settings vary by use-case. For example, in a one-to-one online class, the video windows of the teacher and student are both large, which calls for higher resolution, frame rate, and bitrate. However, in a one-to-many online class, the video windows are smaller. You can set lower resolution, frame rate, and bitrate to accommodate bandwidth limitations.

Use the following as a guide when configuring video settings for these use-cases:

• One-to-one video call:

  • Resolution: 320 x 240; Frame rate: 15 fps; Bitrate: 200 Kbps.
  • Resolution: 640 x 360; Frame rate: 15 fps; Bitrate: 400 Kbps.

• One-to-many video call:

  • Resolution: 160 x 120; Frame rate: 15 fps; Bitrate: 65 Kbps.
  • Resolution: 320 x 180; Frame rate: 15 fps; Bitrate: 140 Kbps.
  • Resolution: 320 x 240; Frame rate: 15 fps; Bitrate: 200 Kbps.

Ensure that you have implemented the SDK quickstart in your project.

Video SDK provides two methods to set video properties:

1. Setting video properties when creating the video track:

   • When you call AgoraRTC.createCameraVideoTrack to create a camera video track, modify the encoderConfig parameter to use SDK preset values or custom a configuration.
   • When you call AgoraRTC.createScreenVideoTrack to create a screen sharing video track, modify the encoderConfig parameter to use SDK preset values or a custom configuration.
   • When you call AgoraRTC.createCustomVideoTrack to create a custom video track, set the bitrate by modifying the bitrateMin and bitrateMax parameters. Since v4.17.1, resolution and frame rate can also be set using the width, height, and frameRate parameters.

2. Dynamically adjust video track properties after creation:

   This feature is supported both before and after publishing.

   • For camera video tracks, dynamically adjust video properties using CameraVideoTrack.setEncoderConfiguration.
   • Since v4.17.1, you can also dynamically adjust video properties of screen sharing video tracks and custom video tracks using LocalVideoTrack.setEncoderConfiguration.

To implement video encoder settings in your app, take the following steps:

1. Create a track using preset video encoding properties

   AgoraRTC.createCameraVideoTrack({
   

   encoderConfig: "720p_1",
   

   }).then(localVideoTrack => { /** ... **/ });
   

2. Customize video encoding properties when creating a track

   AgoraRTC.createCameraVideoTrack({
   

   encoderConfig: {
   

   width: 640,
   

   // Supports specifying a range and reference value, refer to the relevant API documentation for specific configurations.
   

   height: { ideal: 480, min: 400, max: 500 },
   

   frameRate: 15,
   

   bitrateMin: 600, bitrateMax: 1000,
   

   },
   

   }).then(localVideoTrack => {/** ... **/ });
   

3. Dynamically adjust video encoding properties after creation

   CameraVideoTrack.setEncoderConfiguration("480p_1").then(() => { /** ... **/ })
   

4. Dynamically adjust the custom video track encoding properties after creation

   CameraVideoTrack.setEncoderConfiguration({ width: 1280, height: 720 }).then(() => { /** ... **/ })
   

This section contains content that completes the information on this page, or points you to documentation that explains other aspects to this product.

The following table lists the Web SDK preset video profiles and the corresponding parameters. Choose a preset profile or refer to the table to customize your settings.

Video Profile	Resolution (Width × Height)	Frame rate (fps)	Bitrate (Kbps)
120p	160 × 120	15	65
120p_1	160 × 120	15	65
120p_3	120 × 120	15	50
180p	320 × 180	15	140
180p_1	320 × 180	15	140
180p_3	180 × 180	15	100
180p_4	240 × 180	15	120
240p	320 × 240	15	200
240p_1	320 × 240	15	200
240p_3	240 × 240	15	140
240p_4	424 × 240	15	220
360p	640 × 360	15	400
360p_1	640 × 360	15	400
360p_3	360 × 360	15	260
360p_4	640 × 360	30	600
360p_6	360 × 360	30	400
360p_7	480 × 360	15	320
360p_8	480 × 360	30	490
360p_9	640 × 360	15	800
360p_10	640 × 360	24	800
360p_11	640 × 360	24	1000
480p	640 × 480	15	500
480p_1	640 × 480	15	500
480p_2	640 × 480	30	1000
480p_3	480 × 480	15	400
480p_4	640 × 480	30	750
480p_6	480 × 480	30	600
480p_8	848 × 480	15	610
480p_9	848 × 480	30	930
480p_10	640 × 480	10	400
720p	1280 × 720	15	1130
720p_1	1280 × 720	15	1130
720p_2	1280 × 720	30	2000
720p_3	1280 × 720	30	1710
720p_auto*	1280 × 720	30	3000
720p_5	960 × 720	15	910
720p_6	960 × 720	30	1380
1080p	1920 × 1080	15	2080
1080p_1	1920 × 1080	15	2080
1080p_2	1920 × 1080	30	3000
1080p_3	1920 × 1080	30	3150
1080p_5	1920 × 1080	60	4780

^* The 720p_auto preset profile is only recommended for Safari to ensure that the encoding resolution is dynamically adjusted. See release notes for details.

For further details, see VideoEncoderConfigurationPreset.

For a working example, see Adjust video profile.