Configure video encoding

Updated

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.

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

Understand the tech

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.

Prerequisites

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

Implementation

Video SDK provides two methods to set video properties:

  1. Setting video properties when creating the video track: Use encoderConfig parameter in AgoraRTC.createCameraVideoTrack, AgoraRTC.createScreenVideoTrack, or AgoraRTC.createCustomVideoTrack.

  2. Dynamically adjust video track properties after creation: Use CameraVideoTrack.setEncoderConfiguration or LocalVideoTrack.setEncoderConfiguration (supported before and after publishing).

The recommended video settings vary by use-case. For example, in a one-to-one video call, larger video windows call for higher resolution. In group calls with multiple participants, smaller video windows allow you to use lower resolution to conserve bandwidth. Low-bandwidth scenarios may need reduced resolution and frame rate.

The following table shows sample settings for common use-cases:

Use caseResolutionFrame ratePresetNotes
Video calls (one-to-one)640×36015 fps480p_1Larger video windows
Video calls (group)320×24015 fps240p_1Multiple smaller windows
Live streaming1280×72030 fps720p_2Broadcast quality
Low-bandwidth use cases320×18015 fps180p_4Conserve bandwidth

For screen sharing video configuration, refer to the Screen sharing guide.

To set video encoder configuration, refer to the following sample configurations.

Standard video calls

Use the following as a starting configuration for one-to-one and group video calls:

// Configure video track for standard video calls
// Use 640×360 for one-to-one calls with larger video windows
// Use 320×240 for group calls with multiple smaller video windows
AgoraRTC.createCameraVideoTrack({
  encoderConfig: {
    width: 640,
    height: 360,
    frameRate: 15, // 15 fps balances smoothness and bandwidth
    bitrateMin: 200, // Minimum bitrate in Kbps
    bitrateMax: 1000, // Maximum bitrate in Kbps
  },
}).then(localVideoTrack => {
  // Publish the track
});

Using preset:

AgoraRTC.createCameraVideoTrack({
  encoderConfig: "480p_1", // Preset for 640×480 at 15fps
}).then(localVideoTrack => {
  // Publish the track
});

Live streaming or broadcasting

Use the following as a starting configuration for Interactive live streaming or Broadcasting streaming use-cases:

// Configure video track for live streaming
AgoraRTC.createCameraVideoTrack({
  encoderConfig: {
    width: 1280,
    height: 720, // HD resolution for broadcast quality
    frameRate: 30, // Higher framerate for smooth motion
    bitrateMin: 600, // Minimum bitrate in Kbps
    bitrateMax: 3000, // Maximum bitrate in Kbps
  },
}).then(localVideoTrack => {
  // Publish the track
});

Using preset:

AgoraRTC.createCameraVideoTrack({
  encoderConfig: "720p_2", // Preset for 1280×720 at 30fps
}).then(localVideoTrack => {
  // Publish the track
});

Low-bandwidth use-cases

Use the following as a starting configuration for limited bandwidth or mobile networks:

// Configure video track for low-bandwidth scenarios
AgoraRTC.createCameraVideoTrack({
  encoderConfig: {
    width: 320,
    height: 180, // Minimal resolution to save bandwidth
    frameRate: 10, // Lower framerate reduces bandwidth usage
    bitrateMin: 65, // Minimum bitrate in Kbps
    bitrateMax: 500, // Maximum bitrate in Kbps
  },
}).then(localVideoTrack => {
  // Publish the track
});

Using preset:

AgoraRTC.createCameraVideoTrack({
  encoderConfig: "180p_4", // Preset for 320×180 at 15fps
}).then(localVideoTrack => {
  // Publish the track
});

Dynamically adjust video properties

You can adjust video properties after creating the track:

// Change to a different preset
localVideoTrack.setEncoderConfiguration("720p_1").then(() => {
  // Configuration updated
});

// Or use custom configuration
localVideoTrack.setEncoderConfiguration({
  width: 1280,
  height: 720,
  frameRate: 30,
  bitrateMin: 600,
  bitrateMax: 3000,
}).then(() => {
  // Configuration updated
});

Try out the adjust video profile online demo.

Troubleshooting

The following are some common issues and their solutions:

IssuePossible solution
Blurry videoIncrease resolution or bitrate
Choppy/laggy playbackReduce resolution, increase minimum bitrate, or use maintain framerate degradation
High bandwidth usageLower resolution or frame rate
Video orientation incorrectUse fixed portrait or fixed landscape orientation mode

Reference

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

Video profiles table

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.

PresetResolution (Width × Height)Frame rate (fps)Bitrate (Kbps)
120p160 × 1201565
120p_1160 × 1201565
120p_3120 × 1201550
180p320 × 18015140
180p_1320 × 18015140
180p_3180 × 18015100
180p_4240 × 18015120
240p320 × 24015200
240p_1320 × 24015200
240p_3240 × 24015140
240p_4424 × 24015220
360p640 × 36015400
360p_1640 × 36015400
360p_3360 × 36015260
360p_4640 × 36030600
360p_6360 × 36030400
360p_7480 × 36015320
360p_8480 × 36030490
360p_9640 × 36015800
360p_10640 × 36024800
360p_11640 × 360241000
480p640 × 48015500
480p_1640 × 48015500
480p_2640 × 480301000
480p_3480 × 48015400
480p_4640 × 48030750
480p_6480 × 48030600
480p_8848 × 48015610
480p_9848 × 48030930
480p_10640 × 48010400
720p1280 × 720151130
720p_11280 × 720151130
720p_21280 × 720302000
720p_31280 × 720301710
720p_auto*1280 × 720303000
720p_5960 × 72015910
720p_6960 × 720301380
1080p1920 × 1080152080
1080p_11920 × 1080152080
1080p_21920 × 1080303000
1080p_31920 × 1080303150
1080p_51920 × 1080604780
  • The 720p_auto preset profile is only recommended for Safari to ensure that the encoding resolution is dynamically adjusted. See release notes for details.

Sample project

For a working example, see Adjust video profile.

API reference