Listening to First Frame Events of Video Streams

Function Overview

This article demonstrates how to listen to the first frame event of video streams during video playback.

Prerequisites

Before obtaining the first frame of video streams, ensure that:

• You have created a project in the ZEGOCLOUD Console and applied for a valid AppID and Server address.
• You have integrated the ZEGO Express SDK into your project and implemented basic stream publishing and playing functionality. For details, please refer to Quick Start - Integration and Quick Start - Implementation.

Download Sample Source Code

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

For related source code, please check the files in the "src/Examples/Scenes/VideoForMultipleUsers" directory of the ZEGO Express SDK.

Listening to RTC Video Stream First Frame Events

Using ZegoStreamView to Play Video Streams

1. Create a ZegoExpressEngine instance

Create a ZegoExpressEngine instance, passing the obtained AppID to the "appID" parameter and the access server address to the "server" parameter.

const zg = new ZegoExpressEngine(appID, server);

const zg = new ZegoExpressEngine(appID, server);

2. Listen to local stream first frame events

Create a local video stream through the createZegoStream interface, and register the canPlayVideo event of the local video stream to listen for the completion of the first frame loading of the video stream.

// Local stream listen to first frame
const localZegoStream = await zg.createZegoStream();
localZegoStream.on('canPlayVideo', ()=> {
    // First frame TODO ...
});

// Local stream listen to first frame
const localZegoStream = await zg.createZegoStream();
localZegoStream.on('canPlayVideo', ()=> {
    // First frame TODO ...
});

3. Listen to remote stream first frame events

Get the remote video stream through the startPlayingStream interface and get the media stream playback component instance through the createRemoteStreamView interface, then register the canPlayVideo event of the media stream playback component to listen for the completion of the first frame loading of the video stream.

// Remote stream listen to first frame, streamID refers to the remote stream ID
const remoteStream = await zg.startPlayingStream(streamID);
const remoteView = zg.createRemoteStreamView(remoteStream);
remoteView.on('canPlayVideo', ()=> {
    // First frame TODO ...
});

// Remote stream listen to first frame, streamID refers to the remote stream ID
const remoteStream = await zg.startPlayingStream(streamID);
const remoteView = zg.createRemoteStreamView(remoteStream);
remoteView.on('canPlayVideo', ()=> {
    // First frame TODO ...
});

Using Browser Native Video Tag to Play Video Streams

Through the canplay event of the video element, you can listen for the completion of the first frame loading of the video stream.

const video = document.querySelector("video");

video.addEventListener("canplay", ()=> {
    // First frame TODO ...
});

const video = document.querySelector("video");

video.addEventListener("canplay", ()=> {
    // First frame TODO ...
});

Listening to CDN Video Stream First Frame Events

Using ZegoExpressPlayer to Play Video Streams

Through the onCanPlay event of ZegoExpressPlayer, you can listen for the completion of the first frame loading of the video stream.

// zg is a ZegoExpressEngine instance
const player = new ZegoExpressPlayer(zg, {
    container: document.getElementById("player-container"), // Player container ID
    mode: "live"
});
player.onCanPlay = ()=> {
    // First frame TODO...
}

// zg is a ZegoExpressEngine instance
const player = new ZegoExpressPlayer(zg, {
    container: document.getElementById("player-container"), // Player container ID
    mode: "live"
});
player.onCanPlay = ()=> {
    // First frame TODO...
}

Using Third-party CDN Players to Play Video Streams

When using third-party CDN players to play video streams, you need to find the relevant video stream first frame events from the corresponding official website.