Video Call
  • iOS
  • Android
  • Web : JavaScript
  • Flutter
  • React Native
  • Electron
  • Unity3D
  • Cocos Creator
  • Windows
  • macOS
  • Linux
  • Overview
  • Develop your app
    • Integrate the SDK
    • Implement a basic video call
    • Enhance basic feature
      • Use Tokens for authentication
      • Check the room connection status
      • Set up common video config
      • Set up common audio config
  • Best practices
    • Implement a video call for multiple users
  • Upgrade using advanced features
    • Advanced features
      • Configure the video
        • Improve your appearance in the video
        • Configure video codec
      • Improve video quality
        • Visualize the sound level
        • Monitor streaming quality
      • Message signaling
        • Broadcast real-time messages to a room
        • Quotas and limits
      • Share the screen
      • Mix the video streams
      • Publish multiple video streams
      • Replace the audio/video track
    • Distincitve features
      • Join multiple rooms
      • Customize the video and audio
      • Set the voice hearing range
      • Render the audio and video
      • Autoplay policy
      • Restrictions on playing multiple videos simultaneously in Safari
      • Play streams via URL
      • Browser compatibility
      • Audio mixing
      • Vitrual Background and Blur
    • Implement a video call using frameworks
      • Implement a video call using Vue
      • Implement a video call using Angular
      • Implement a video call using React
  • Resources & Reference
    • SDK
    • Sample codes
    • API reference
      • Client APIs
      • Server APIs
    • Debugging
      • Error codes
      • Logging/Version number
    • FAQs
    • Key concepts
  • Documentation
  • Video Call
  • Upgrade using advanced features
  • Advanced features
  • Configure the video
  • Configure video codec

Configure video codec

Last updated:2023-11-28 15:20

Introduction

ZEGOCLOUD’s SDK supports choosing the different video codec types accordingly to realize the coding alignment across multiple ends. You can select H.264 or VP8 based on the actual situation. For better browser compatibility, use VP8. For better interoperability, use H.264.

Prerequisites

Before you implement the video codec feature, make sure you complete the following steps:

  • ZEGO Express SDK has been integrated into the project to implement basic real-time audio and video functions. For details, please refer to Quick start .
  • A project has been created in ZEGOCLOUD Console and applied for a valid AppID and AppSign. For details, please refer to Console - Project Information .

Create video streams

To create the video streams, call the createZegoStream method and set the camera property for creating the media (camera and microphone) source stream.

// After calling the createZegoStream method, you need to wait for the ZEGO server to return the local stream object before any further operation.
const localStream = await this.zg.createZegoStream();

// Play preview of the stream
localStream.playVideo(document.querySelector("#local-video"));

Publishing a stream with the appropriate video codec

To start publishing streams and set the video codec, do the following:

  1. Call the startPublishingStream method to publish the local streams to the remote side (ZEGO server).
  2. Set the videoCodec property with VP8 or H264 (default value) to configure the video codec type.
// [publishStreamId] must be global unique.
// videoCodec:  The video codec for stream publishing, pass the [VP8] (string) or 'H264' (string). Default valus is [H264].
const result = zg.startPublishingStream(publishStreamId, localStream, {videoCodec: 'VP8'});
Page Directory