Set Video Encoding Attributes

Feature Overview

ZEGO Express Web SDK supports two video encoding formats: H.264 and VP8. VP8 has better browser compatibility than H.264, but H.264 is superior to VP8 in interoperability. During video calls, developers can choose the appropriate video encoding format based on business scenario requirements to achieve encoding alignment between different ends and realize multi-end interoperability.

Example Source Code Download

Please refer to Download Example Source Code to get the source code.

For related source code, please check files in the "/Examples/AdvancedVideoProcessing/EncodingAndDecoding" directory.

Prerequisites

Before setting video encoding attributes, please ensure:

A project has been created in ZEGOCLOUD Console, and valid AppID and Server address have been obtained. For details, please refer to Console - Project Information.
ZEGO Express SDK has been integrated into the project, and basic audio/video streaming functionality has been implemented. For details, please refer to Quick Start - Integration and Quick Start - Implementation.

Usage Steps

Publish Camera Feed

Call the createZegoStream interface and set the "camera" attribute to create a camera and microphone Capture source data.

// Creating a stream is an asynchronous process. Wait for Promise to complete and return the zego stream object.
const localStream = await zg.createZegoStream({camera: {video: true, audio: true}});
// Preview the stream before or during publishing, and mount the playback component to the page. "local-video" is the ID of the component container DOM element.
localStream.playVideo(document.querySelector("#local-video"));

// Creating a stream is an asynchronous process. Wait for Promise to complete and return the zego stream object.
const localStream = await zg.createZegoStream({camera: {video: true, audio: true}});
// Preview the stream before or during publishing, and mount the playback component to the page. "local-video" is the ID of the component container DOM element.
localStream.playVideo(document.querySelector("#local-video"));

Start Publishing Stream and Select Appropriate Video Encoding Format

Call the startPublishingStream interface to push the local stream to the remote end (ZEGO server). Set the publishing video attributes through the "videoCodec" parameter. Only "VP8" or "H264" can be passed in. The default value is "H264".

Warning

If you need to use "VP8" in the browser, please confirm whether the currently used browser supports this encoding format.
In the following scenarios, the publishing video attribute cannot be set to "VP8":
- Need to interoperate with mini programs.
- Need to forward to CDN (including CDN recording, which will cause abnormal recording files).

// publishStreamId is customized, needs to be unique
// videoCodec: Publishing video encoding, can only pass 'VP8' (string) or 'H264' (string), default value is 'H264'.
const result = zg.startPublishingStream(publishStreamId, localStream, {videoCodec: 'VP8'});

// publishStreamId is customized, needs to be unique
// videoCodec: Publishing video encoding, can only pass 'VP8' (string) or 'H264' (string), default value is 'H264'.
const result = zg.startPublishingStream(publishStreamId, localStream, {videoCodec: 'VP8'});