How To Create A Video Chat Room With The ZEGOCLOUD API

A video chat room is a form of video chat configuration that allows about 50 users to simultaneously communicate with each other in real-time. If you’ve used Messenger’s Room before, then there’s a chance you have a pretty good idea of what a video chat room is.

Using the Video Call SDK from ZEGOCLOUD(ZEGO Express SDK), I will demonstrate how to create a free video chat room app in this article. Let’s begin!

Video Call SDK Introduction

One of the potent SDKs that ZEGOCLOUD offers is the Video Call SDK. It is an audiovisual component that is reliable and incredibly scalable that enables the interchange of real-time video and audio data between two connected places.

With this SDK, creating a free video chat room is quite simple. With only a few lines of code and minimal SDK configuration, you can create an app for video chat rooms that is fully functional. As we move through the sections, you’ll discover more about the Video Call SDK.

Why ZEGOCLOUD’s Video Call SDK

When it comes to video chat services, ZEGOCLOUD’s Video Call SDK is the best because of its various capabilities.

Below are some of the features.

1. makes real-time video communications possible.

The cloud video architecture of ZEGOCLOUD is established and incredibly scalable. Using this SDK, you can set up a complete real-time video and audio communication system in the form of a video chat.

2. Maintain contact wherever you are.

The video Call SDK from ZEGOCLOUD is essentially location-agnostic, in contrast to many other real-time video SDKs available today. It is in use in more than 200 nations. Consequently, you won’t need to circumvent anything to get in.

3. Improvement of the audio and video

This is where the programming creativity of the ZEGOCLOUD team shines. The Video Call SDK is made to deliver high-quality video and audio transmissions in a continuous, stable stream while managing system resources.

4. dependable network management.

ZEGOCLOUD manages the app’s total reliance on the network using efficient algorithms. Additionally, it offers advanced network exception management and reconnection.

5. Options for standard UI customisation

For UI automation, ZEGOCLOUD provides UIKit. Additionally, it has SDK-level customization, which gives you additional freedom to customize the user interface.

Preparation

A ZEGOCLOUD developer account – –Sign up
Code editor of choice.
computer with audio and video support.
Basic understanding of web development

Express Video SDK integration

Express Video SDK from ZEGOCLOUD is incredibly simple to integrate. The steps are as follows:

Create a new project.

Make a project that has the files index.html, index.css, and index.js, The filetree below serves as an example of how the folder structure should appear:

├── index.html
├── js
│   └── index.js
└── css
   └── index.css

Copy the codes to the index.html file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Zego RTC Video Call</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <h1>
        Zego RTC Video Call
    </h1>
    <h4>Local video</h4>
    <video id="local-video" autoplay muted playsinline controls></video>
    <h4>Remote video</h4>
    <video id="remote-video" autoplay muted playsinline controls></video>
    <script src="./js/index.js"></script>
</body>
</html>

Copy the codes to the index.css file:

*{
    font-family: sans-serif;
}
h1,h4{
    text-align: center;
}
video {
    width: 300px;
    height: auto;
}
#local-video{
    position: relative;
    margin: 0 auto;
    display: block;
}

#remote-video{
    display: flex;
    height: auto;
    margin: auto;
    position: relative !important;
}

Run and test out your project on the local Web server.

Import the SDK

We’re done creating the skeleton project for our app. The next step is importing Video Call SDK into our project. You can do so by following the steps below:

Execute the npm i zego-express-engine-webrtc command to install the dependencies.
Import the SDK into index.js file.

var ZegoExpressEngine = require('zego-express-engine-webrtc').ZegoExpressEngine

Implement a Basic Video Call

Our SDK has been imported into the project. We may now move forward with adding video chat capabilities.

The illustration below demonstrates how User A uses a stream made available by User B:

To implement a basic video calling functionality, follow these instructions:

Make a new ZegoExpressEngine instance.

Before clients A and B may play or publish a stream, we must initialize the ZegoExpressEngine SDK. Simply create a ZegoExpressEngine instance and supply your AppID as the appID parameter, along with the Server URL as the Server parameter, to accomplish this. You can obtain the credentials from the ZegoCloud Admin Console.

// Initialize the ZegoExpressEngine instance
const zg = new ZegoExpressEngine(appID, server);

Check your browser’s WebRTC support.

ZegoExpressEngine supports modern browsers. to be sure that your browser is supported, run the codes below:

const result = await zg.checkSystemRequirements();
// The [result] indicates whether it is compatible. It indicates WebRTC is supported when the [webRTC] is [true]. For more results, see the API documents.
console.log(result);
// {
//   webRTC: true,
//   customCapture: true,
//   camera: true,
//   microphone: true,
//   videoCodec: { H264: true, H265: false, VP8: true, VP9: true },
//   screenSharing: true,
//   errInfo: {}
// }

Log in to a room

You must log in before you can speak with other users in a room or even start your own room. Call the loginRoom with the appropriate parameters to accomplish this:

Use your unique room ID in the roomID parameter.
The token parameter is the place for the login token you got in the previous step..
The user ID and user name are the roomID and userName parameters.

// Log in to a room. It returns `true` if the login is successful.
// The roomUserUpdate callback is disabled by default. To receive this callback, you must set the `userUpdate` property to `true` when logging in to a room. 
const result = await zg.loginRoom(roomID, token, {userID, userName}, {userUpdate: true});

Note: Entering a non existing roomID will trigger the creation of a new room.

You must implement a few callbacks in order to view the status of the room. Apply the following code to implement callbacks to track room status:

roomStateUpdate: Use this callback If you want to know the status of the user’s connection to the room.

// Callback for updates on the current user's room connection status.
zg.on('roomStateUpdate', (roomID,state,errorCode,extendedData) => {
    if (state == 'DISCONNECTED') {
        // Disconnected from the room
    }

    if (state == 'CONNECTING') {
        // Connecting to the room
    }

    if (state == 'CONNECTED') {
        // Connected to the room
    }
})

roomUserUpdate: A callback process that receives information regarding the state of other users in the space.

 // Callback for updates on the status of the users in the room.
zg.on('roomUserUpdate', (roomID, updateType, userList) => {
    console.warn(
        `roomUserUpdate: room ${roomID}, user ${updateType === 'ADD' ? 'added' : 'left'} `,
        JSON.stringify(userList),
    );
});

roomStreamUpdate: A callback that receives status updates for the streams in the room.

// Callback for updates on the status of the streams in the room.
zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
    if (updateType == 'ADD') {
        // New stream added, start playing the stream. 
    } else if (updateType == 'DELETE') {
        // Stream deleted, stop playing the stream.
    }
});

Publishing Streams

To create a stream, call the createStream method. The engine prepares itself by default to record audio and video data from the microphone.

// After calling the CreateStream method, you need to wait for the ZEGOCLOUD server to return the local stream object before any further operation.
const localStream = await zg.createStream({camera :{audio:true,video:true}});
// Get the audio tag.
const localAudio = document.getElementById('local-video');
// The local stream is a MediaStream object. You can render audio by assigning the local stream to the srcObject property of video or audio.
localVideo.srcObject = localStream;

Call the startPublishingStream function with the following arguments to begin publishing a local audio and video stream to distant users:

a stream ID in the streamID parameter
The media stream object was obtained in the previous step as a localStream parameter.

// localStream is the MediaStream object created by calling creatStream in the previous step.
zg.startPublishingStream(streamID, localStream)

To check the status and information of a published stream, use the callbacks listed below:

publisherStateUpdate: A callback that receives updates on the status of stream publishing.

zg.on('publisherStateUpdate', result => {
    // Callback for updates on stream publishing status.
})

publishQualityUpdate: A callback for reporting the quality of stream publishing.

zg.on('publishQualityUpdate', (streamID, stats) => {
    // Callback for reporting stream publishing quality.
})

Playing Streams

By using the startPlayingStream method and passing the appropriate stream ID to the streamID parameter, we can play streams.

const remoteStream = await zg.startPlayingStream(streamID);

// The remoteVideo object is the <video> or <audio> element on your webpage.
remoteVideo.srcObject = remoteStream;

The following are some common event callbacks we can use in streaming:

playerStateUpdate: A callback that is updated with new information regarding the stream’s performance.

zg.on('playerStateUpdate', result => {
    // Callback for updates on stream playing status.
})

playQualityUpdate: A callback for reporting the quality of the stream’s playback.

zg.on('playQualityUpdate', (streamID,stats) => {
    // Callback for reporting stream playing quality.
})

Stop publishing streams

Call the stopPublishingStream method with the stream ID of the stream that needs to be stopped in the streamID parameter.

zg.stopPublishingStream(streamID)

Destroy Stream

To destroy a local media stream, call the destroyStream method.

// localStream is the MediaStream object created when calling the createStream method.
zg.destroyStream(localStream)

Stop playing stream

Call the stopPlayingStream method with the relevant stream ID provided to the streamID parameter in order to stop a remote video stream.

zg.stopPlayingStream(streamID)

Log out of a room

Call the logoutRoom method with the roomID parameter passed the relevant room ID of the room that needs to be logged out.

zg.logoutRoom(roomID)

Run a demo.

Conclusion

We’ve already talked about what video chat rooms are and how to create them for free with ZEGOCLOUD. We can fit more individuals in our space by using video chat rooms. By doing this, it will be simple to spread information to a large group of individuals!

You can download the sample demo source code in this article if you want to make audio and video applications.

Use our Core SDK if you have more complex requirements, such as streaming mix, noise reduction, censorship, etc.

You may always get in touch with our round-the-clock technical assistance if you have any questions.

Read More

Blog Post