How To Use ZEGOCLOUD video call API in React JS

ZEGOCLOUD offers a powerful video call API that can be easily integrated into React JS applications. By following a few simple steps, you can enable video calling functionality in your React JS project using ZEGOCLOUD.

Step 1: Sign Up for ZEGOCLOUD

In order to use ZEGOCLOUD’s video call API, you will need to sign up for an account on their website. Once you have created an account, you will be able to access your API key and secret, which are required for integrating the video call functionality into your React JS application.

Step 2: Install the ZEGOCLOUD SDK

Next, you will need to install the ZEGOCLOUD SDK in your React JS project. You can do this by running the following command in your terminal:

“`bash
npm install @zegocloud/webrtc
“`

Step 3: Initialize the ZEGOCLOUD Client

After installing the SDK, you will need to initialize the ZEGOCLOUD client in your React JS application. You can do this by adding the following code to your project:

“`javascript
import { ZegoClient } from ‘@zegocloud/webrtc’;

const client = new ZegoClient({
appID: ‘YOUR_APP_ID’,
server: ‘wss://wss.zego.im/’
});

client.loginRoom(‘YOUR_ROOM_ID’, ‘TOKEN’, { user: ‘USER_ID’ })
.then(() => {
console.log(‘Successfully logged in to the room’);
})
.catch((error) => {
console.log(‘Failed to login to the room:’, error);
});

“`

Step 4: Implement Video Call Functionality

Now that you have initialized the ZEGOCLOUD client, you can start implementing the video call functionality in your React JS application. You can use ZEGOCLOUD’s API methods to make calls, join calls, and manage video streams.

“`javascript
// Make a video call
client.createStreamPublish({
streamID: ‘YOUR_STREAM_ID’,
quality: ‘high’
});

// Join a video call
client.createStreamPlay({
streamID: ‘OTHER_STREAM_ID’,
});

// Manage video streams
client.on(‘stream-added’, (stream) => {
client.subscribeStream(stream);
});

client.on(‘stream-subscribed’, (stream) => {
// Display the video stream in your React component
});

“`

Step 5: Handle Video Call Events

Lastly, make sure to handle video call events in your React JS application. ZEGOCLOUD provides event listeners for different video call events, such as stream added, stream subscribed, and stream removed. You can use these events to update your UI and manage video streams effectively.

“`javascript
client.on(‘stream-added’, (stream) => {
client.subscribeStream(stream);
});

client.on(‘stream-subscribed’, (stream) => {
// Display the video stream in your React component
});

client.on(‘stream-removed’, (streamID) => {
// Remove the video stream from your React component
});

“`

By following these steps, you can easily integrate ZEGOCLOUD’s video call API into your React JS application and enable video calling functionality for your users. With ZEGOCLOUD, you can create seamless and high-quality video calls that will enhance the user experience of your application.