ZEGOCLOUD easy example

Click the search button below to search documentation or error code

ZEGOCLOUD's easy example is a simple wrapper around our RTC product. You can refer to the sample code for quick integration.

Getting started

The following will describe how to start this project.

Prerequisites

Create a project in ZEGOCLOUD Admin Console. For details, see ZEGO Admin Console - Project management.

Install

Clone the easy example Github repository.
Open Terminal, navigate to the easy_example_web folder.
Run the npm install command to install all dependencies that are needed.

Modify the project configurations

You need to modify appID to your own account, which can be obtained in the ZEGO Admin Console.
Generate a Token on your app server (recommended), provide an interface for the client to call and replace the generateToken method above.

We use Vecel for test backen service, you can deploy the token generation service with one simple click.

Once deployed completed, you will get an url for your instance, try accessing https://your_vercel_project_name.vercel.app/api/get_access_token?uid=123 to check if it works.

Check easy_server_nextjs for more details.

Run the sample code

Start the project locally with the following command.

# Start a local service
npm run dev

Integrate the SDK into your own project

The following will describe how to build your own project based on this project.

Copy the source code

Copy the ZegoExpressManager.ts and ZegoExpressManager.entity.ts files to your typescript project.

If your project is implemented in JavaScript, you need to execute the package command first and then copy the ZegoExpressManager.js file to the project.

# Packaging ZegoExpressManager
npm run build:dev

# Package ZegoExpressManager and compress the code
npm run build

Method call

The calling sequence of the SDK interface is as follows: createEngine --> onRoomUserUpdate、onRoomUserDeviceUpdate、onRoomTokenWillExpire --> checkWebRTC --> checkCamera --> checkMicrophone --> joinRoom --> getLocalVideoView/getRemoteVideoView --> leaveRoom

Create engine

Before using the SDK function, you need to create the SDK first. We recommend creating it when the application starts. The sample code is as follows:

ZegoExpressManager.shared.createEngine(config.appID, config.serverURL);

Register related callbacks

You can get information in the relevant callbacks and do your own thing.

ZegoExpressManager.shared.onRoomUserUpdate((roomID, updateType, userList) => {
    // Do something...
});
ZegoExpressManager.shared.onRoomUserDeviceUpdate((updateType, userID, roomID) => {
    // Do something...
});
ZegoExpressManager.shared.onRoomTokenWillExpire((roomID) => {
    // Do something...
});

Check webRTC

Check browser compatibility with WebRTC.

ZegoExpressManager.shared.checkWebRTC();

Check camera

Check whether the camera has permission to call.

ZegoExpressManager.shared.checkCamera();

Check microphone

Check whether the microphone has permission to call.

ZegoExpressManager.shared.checkMicrophone();

Join room

When you want to communicate with audio and video, you need to call the join room interface first. According to your business scenario, you can set different audio and video controls through options, such as:

ZegoMediaOptions enumeration can be found in src/ZegoExpressManager.entity.ts.

call scene: [ZegoMediaOptions.AutoPlayVideo, ZegoMediaOptions.AutoPlayAudio, ZegoMediaOptions.PublishLocalAudio, ZegoMediaOptions.PublishLocalVideo], the default is this scenario
Live scene - host: [ZegoMediaOptions.AutoPlayVideo, ZegoMediaOptions.AutoPlayAudio, ZegoMediaOptions.PublishLocalAudio, ZegoMediaOptions.PublishLocalVideo]
Live scene - audience:[ZegoMediaOptions.AutoPlayVideo, ZegoMediaOptions.AutoPlayAudio]
Chat room - host: [ZegoMediaOptions.AutoPlayAudio, ZegoMediaOptions.PublishLocalAudio]
Chat room - audience: [ZegoMediaOptions.AutoPlayAudio]

The following sample code is an example of a call scenario, options can not be passed by default:

ZegoExpressManager.shared.joinRoom(config.roomID, token, { userID: config.userID, userName: config.userName });

Get video view

If your project needs to use the video communication function, you need to get the View for displaying the video, call getLocalVideoView for the local video, and call getRemoteVideoView for the remote video.

getLocalVideoView:

<div id="video-con1"></div>

const renderView1 = document.querySelector('#video-con1');
const videoDom = ZegoExpressManager.shared.getLocalVideoView();
renderView1.appendChild(videoDom);

getRemoteVideoView:

<div id="video-con2"></div>

const renderView2 = document.querySelector('#video-con2');
ZegoExpressManager.shared.onRoomUserUpdate((roomID, updateType, userList) => {
    userList.forEach(userID => {
        if (updateType === 'ADD') {
            const videoDom = ZegoExpressManager.shared.getRemoteVideoView(userID);
            renderView2.appendChild(videoDom);
        }
    });
});

Leave room

When you want to leave the room, you can call the leaveroom interface.

ZegoExpressManager.shared.leaveRoom();

Change Log

2022-05-09

Code Optimization

Replace the original getLocalVideoView and setRemoteVideoView with getLocalVideoView and getRemoteVideoView. Automatically create video tag in ZegoExpressManager.
Destroy the local stream when leaving the room.
Replace server with serverURL to align the console.

Bug Fixes

Empty the local video view container when exiting the room.
Clear the remote video view container when other members exit the room.
Adapt the options parameter of the flutter platform to the joinRoom interface.
Increase the judgment of whether it is empty for renderView.

Match-Yang/easy_example_web