Common Video Configuration

Feature overview

During video calls or live streaming, developers can specify publishing and playing stream video related configurations as needed, such as video capture resolution, video encoding output resolution, video frame rate, bitrate, view mode, and mirror mode.

• Resolution:
  • Video resolution: A parameter used to measure the amount of data in an image, usually expressed as ppi.
  • Capture resolution: The screen resolution provided by capture devices such as cameras.
  • Encoding resolution: The resolution of the screen after encoding processing.
• Bitrate: The number of bits transmitted per second, in bps (bit per second).
• Frame rate: A measure of the number of video frames displayed per unit time, measured in "frames per second" (Frame Per Second, fps).

Setting appropriate video resolution, frame rate, and bitrate can provide users with a better experience in audio and video scenarios. Choosing the appropriate mirror mode and view mode allows developers to provide personalized video display modes.

Prerequisites

Before setting video configurations, please ensure:

• You have created a project in the ZEGOCLOUD Console and applied for valid AppID and AppSign. For details, please refer to Console - Project Information.
• You have integrated ZEGO Express SDK in the project and implemented basic audio and video publishing and playing functions. For details, please refer to Quick Start - Integration and Quick Start - Implementation.

Usage steps

1 Modify video configuration

By calling the setVideoConfig interface to modify video configuration, users can customize parameters or use preset values for setting.

Custom parameter settings

Call the setVideoConfig interface to modify publishing stream video configuration. You can set video frame rate, bitrate, video capture resolution, and video encoding output resolution through this interface. If no special settings are made, the SDK will automatically set resolution, bitrate, and frame rate suitable for the selected scenario to obtain the best experience effect. For details, please refer to Scenario-based Audio and Video Configuration.

The following example shows setting video capture resolution to 360p, encoding resolution to 360p, bitrate to 600 kbps, and frame rate to 15 fps:

let videoconfig = {captureWidth: 640,
                   captureHeight: 360,
                   encodeWidth: 640,
                   encodeHeight: 360,
                   fps: 15,
                   bitrate: 600}
// Set video configuration
zgEngine.setVideoConfig(videoconfig)

let videoconfig = {captureWidth: 640,
                   captureHeight: 360,
                   encodeWidth: 640,
                   encodeHeight: 360,
                   fps: 15,
                   bitrate: 600}
// Set video configuration
zgEngine.setVideoConfig(videoconfig)

Use preset values for setting

You can also use the preset combination values provided by ZEGO Express Electron SDK. The preset combination values of ZegoVideoConfigPreset are as follows:

Example code for calling the setVideoConfig interface to use preset values:

// Use presets for video settings
zgEngine.setVideoConfig(zgDefines.ZegoVideoConfigPreset.Preset270P);

// Use presets for video settings
zgEngine.setVideoConfig(zgDefines.ZegoVideoConfigPreset.Preset270P);

2 Modify video view mode

By modifying the "viewMode" parameter of the view object ZegoView, you can modify the view mode of the video. Currently supports three video rendering fill modes:

The effects of the three video rendering fill modes are shown in the figure:

• The original video resolution shown in the figure above is 300 × 300 (width × height), and the view size is 300 × 500 (width × height).
• In the figure above, the height of the original video is equal to the width, and the height of the view is greater than the width. Therefore, in the "AspectFill" rendering mode, black borders appear on the top and bottom of the video; if the view width is greater than the height at this time, in the "AspectFit" rendering mode, black borders will appear on the left and right of the video.

Taking setting the preview view mode to "AspectFit" and starting preview as an example:

let view = {viewMode: zgDefines.ZegoViewMode.AspectFit, canvas: localCanvas};
// Start preview
zgEngine.startPreview(view);

let view = {viewMode: zgDefines.ZegoViewMode.AspectFit, canvas: localCanvas};
// Start preview
zgEngine.startPreview(view);

3 Set mirror mode

You can call setVideoMirrorMode to set whether the local preview video and the published video enable mirror mode. Currently supports the following four mirror modes:

The effects of the four mirror modes are as follows:

Taking setting the playing end mirror display and setting the local preview non-mirror display as an example:

// Set mirror mode to only the video seen by the playing end is mirrored
zgEngine.setVideoMirrorMode(zgDefines.ZegoVideoMirrorMode.OnlyPublishMirror);

// Set mirror mode to only the video seen by the playing end is mirrored
zgEngine.setVideoMirrorMode(zgDefines.ZegoVideoMirrorMode.OnlyPublishMirror);