Multiplayer Video Call

Feature Overview

This document demonstrates how to use ZEGO Express SDK to build a multiplayer video call scenario, which implements multi-to-many real-time audio and video interactions. Users can conduct real-time video calls with other users in the Room, and publish and play streams with each other. This scenario can be used for multiplayer real-time video chat, video conferences, etc.

Prerequisites

Before applying the multiplayer video call scenario, ensure that:

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

Example Source Code Download

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

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

Usage Steps

This section will introduce how to use ZEGO Express SDK to implement multiplayer video calls.

• The process flow is as follows:

• The API call sequence diagram is as follows:

1 Create Engine

Create a ZegoExpressEngine engine instance, pass the applied AppID to the parameter "appID", and pass the access server address to the parameter "server".

const zg = new ZegoExpressEngine(appID, server);

const zg = new ZegoExpressEngine(appID, server);

2 Enable Room User Change Notification

When each user calls the loginRoom interface to log in to the room, developers need to set "userUpdate" in ZegoRoomConfig to "true" to receive callback notifications when other users enter or leave the room (i.e., roomUserUpdate).

const isLogin = await zg.loginRoom(
    roomID,
    token,
    { userID },
    { userUpdate: true }
  );

const isLogin = await zg.loginRoom(
    roomID,
    token,
    { userID },
    { userUpdate: true }
  );

3 Listen to Callback Events

To implement the multiplayer video call function, you need to listen to the addition and deletion of users and streams in the room and handle them accordingly. Developers can implement certain methods in ZegoEvent (including ZegoRTCEvent and ZegoRTMEvent) according to actual needs. After creating the engine, you can set callbacks by calling the on interface.

Listen to User Changes in the Room

To listen to user changes in the room, you need to register the roomUserUpdate callback. The addition and deletion of users who have logged in to the room will trigger this callback. Developers can implement their own business logic in the callback according to actual needs.

The "updateType" parameter in the callback indicates the type of user change in the room. The values of this parameter are as follows:

When a user logs in to the room for the first time, if there are other users in the room, the newly logged-in user will receive the list of added users through this callback, that is, the callback with "updateType" as "ADD". The user list is the users who already exist in the room.

zg.on('roomUserUpdate', (roomID, updateType, userList) => {
    console.log('roomUserUpdate roomID ', roomID, streamList);
    if (updateType === 'ADD') {
        // update view
    } else if(updateType == 'DELETE') {
        // update view
    }
});

zg.on('roomUserUpdate', (roomID, updateType, userList) => {
    console.log('roomUserUpdate roomID ', roomID, streamList);
    if (updateType === 'ADD') {
        // update view
    } else if(updateType == 'DELETE') {
        // update view
    }
});

Listen to Stream Changes in the Room

To listen to stream changes in the room, you need to register the roomStreamUpdate callback. The addition and deletion of streams in the room that have been logged in will trigger this callback. Developers can implement their own business logic in the callback according to actual needs.

The "updateType" parameter in the callback indicates the type of stream change in the room. The values of this parameter are as follows:

When a user logs in to the room for the first time, if there are other users publishing streams in the room, a list of added streams will be received, that is, the callback with "updateType" as "ADD".

zg.on('roomStreamUpdate', (roomID, updateType, streamList) => {
    console.log('roomStreamUpdate roomID ', roomID, streamList);
    if(updateType === 'ADD') {
    	// update view
    } else if(updateType == 'DELETE') {
    	// update view
    }
});

zg.on('roomStreamUpdate', (roomID, updateType, streamList) => {
    console.log('roomStreamUpdate roomID ', roomID, streamList);
    if(updateType === 'ADD') {
    	// update view
    } else if(updateType == 'DELETE') {
    	// update view
    }
});

4 Other Operations

Please refer to Quick Start - Implementation to complete the operations of logging in to the room, publishing streams, and playing streams in sequence.