DEV Community: Roozer Grom

ZEGOCLOUD Whiteboard SDK: Empowering Interactive Collaboration

Roozer Grom — Mon, 26 May 2025 21:39:40 +0000

Introduction

In today's digital era, real-time collaboration is essential for effective communication, whether in online education, virtual meetings, or collaborative brainstorming. The ZEGOCLOUD Whiteboard SDK offers developers a powerful tool to integrate seamless, interactive whiteboard functionality into their applications. Built on ZEGOCLOUD's global real-time communication (RTC) infrastructure, this SDK enables low-latency, feature-rich whiteboard experiences across multiple platforms. In this article, we'll dive into the ZEGOCLOUD Whiteboard SDK, exploring its features, integration steps, use cases, and why it's a game-changer for real-time interaction.

What is the ZEGOCLOUD Whiteboard SDK?

The ZEGOCLOUD Whiteboard SDK is a robust solution that allows developers to embed interactive whiteboard capabilities into their apps. It supports collaborative features like real-time drawing, annotations, file sharing, and synchronized interactions across Android, iOS, Windows, macOS, and Web platforms. With low-latency performance and AI-powered enhancements, it’s perfect for creating engaging experiences in education, enterprise collaboration, and beyond.

Key Features

Here’s a look at the standout features of the ZEGOCLOUD Whiteboard SDK:

Real-Time Collaboration: Multiple users can draw, annotate, and interact on the same whiteboard simultaneously, with changes synced instantly.
Cross-Platform Support: Compatible with Android, iOS, macOS, Windows, and Web for a consistent experience across devices.
File Sharing and Synchronization: Upload and share files (e.g., PPT, PDF, Word), transcoded into formats like HTML5 or PNG, preserving animations and transitions.
Rich Drawing Tools: Includes freehand drawing, shapes, text, and annotations with customizable colors, sizes, and styles.
Low-Latency Performance: Powered by ZEGOCLOUD’s global RTC network for smooth interactions, even in weak network conditions.
AI-Powered Features: Enhances visuals with real-time video effects and dynamic annotations for engaging presentations.
Interactive Components: Supports zoom, pan, undo/redo, and page management for a fluid user experience.
Secure and Scalable: Built with robust security and scalable architecture to handle large user groups.
Customizable UI: Offers prebuilt UI components and customization options to align with your app’s branding.

Why Choose ZEGOCLOUD Whiteboard SDK?

The ZEGOCLOUD Whiteboard SDK stands out for its ease of use, performance, and versatility. Here’s why it’s a top choice:

Low-Code Integration: Prebuilt components and clear documentation make integration quick and simple.
Global Reach: ZEGOCLOUD’s global network ensures low-latency performance across regions.
Flexible Customization: Tailor the whiteboard’s appearance and functionality to fit your use case.
Robust Documentation: Comprehensive guides, tutorials, and sample code are available on the ZEGOCLOUD Developer Center.

Use Cases

The ZEGOCLOUD Whiteboard SDK is versatile and applicable in various scenarios:

Online Education: Enables interactive lessons with real-time annotations, file sharing, and collaborative problem-solving.
Virtual Meetings: Facilitates brainstorming, project planning, and presentations with shared whiteboards.
E-Learning Platforms: Integrates with educational apps for interactive courseware and group activities.
Creative Collaboration: Supports design teams in sketching ideas and annotating designs in real time.
Customer Support: Allows visual explanations to improve communication with clients.

Integration Steps

Integrating the ZEGOCLOUD Whiteboard SDK is straightforward. Below is a step-by-step guide for Web integration using JavaScript (similar steps apply for other platforms).

Prerequisites

Before starting, ensure you have:

A ZEGOCLOUD account with access to the Admin Console.
AppID and ServerSecret from the ZEGOCLOUD Admin Console.
A development environment with Node.js installed (for Web projects).
A compatible browser (e.g., latest Google Chrome) with SSL support (HTTPS, localhost, or 127.0.0.1).

Step-by-Step Integration

Set Up Your Project:
- Create a new project in your preferred framework (e.g., React, Vue, Angular, or plain JavaScript).
- Install the ZEGOCLOUD Whiteboard SDK via NPM:
```
 npm install @zegocloud/zego-uikit-prebuilt
```

Ensure your project runs on an HTTPS server or localhost.

Generate a Kit Token:

Use your AppID and ServerSecret to generate a token for authentication. Implement this on your server or use ZEGOCLOUD’s token generator.
Example (JavaScript):

 import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';

 function randomID(len) {
   let result = '';
   const chars = '12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP';
   for (let i = 0; i < len; i++) {
     result += chars.charAt(Math.floor(Math.random() * chars.length));
   }
   return result;
 }

 const appID = YOUR_APP_ID; // Replace with your AppID
 const serverSecret = 'YOUR_SERVER_SECRET'; // Replace with your ServerSecret
 const roomID = randomID(5);
 const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID, randomID(5), 'UserName');

Initialize the Whiteboard:

Create a whiteboard instance using the token and attach it to a DOM element.
Example (React):

 import * as React from 'react';
 import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';

 export default function App() {
   const roomID = randomID(5);
   let myMeeting = async (element) => {
     const appID = YOUR_APP_ID;
     const serverSecret = 'YOUR_SERVER_SECRET';
     const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID, randomID(5), 'UserName');
     const zp = ZegoUIKitPrebuilt.create(kitToken);
     zp.joinRoom({
       container: element,
       scenario: {
         mode: ZegoUIKitPrebuilt.GroupCall,
       },
       whiteboardConfig: {
         showAddImageButton: true,
         showCreateAndCloseButton: true,
       },
     });
   };

   return <div ref={myMeeting} style={{ width: '100vw', height: '100vh' }} />;
 }

Customize Whiteboard Features:

Configure settings like drawing tools and file uploads via the whiteboardConfig object.
Example:

 whiteboardConfig: {
   showAddImageButton: true,
   showCreateAndCloseButton: true,
   tools: ['pen', 'line', 'rectangle', 'text'],
 }

Test and Deploy:
- Test locally to ensure the whiteboard functions as expected.
- Deploy to an HTTPS server for production, as the SDK requires a secure connection.
- For production, generate tokens on your server instead of using generateKitTokenForTest.

Sample Code

Here’s a simplified React example for integrating the Whiteboard SDK:

import * as React from 'react';
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';

function randomID(len) {
  let result = '';
  const chars = '12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP';
  for (let i = 0; i < len; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}

export default function App() {
  const roomID = randomID(5);
  let myMeeting = async (element) => {
    const appID = YOUR_APP_ID; // Replace with your AppID
    const serverSecret = 'YOUR_SERVER_SECRET'; // Replace with your ServerSecret
    const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID, randomID(5), 'UserName');
    const zp = ZegoUIKitPrebuilt.create(kitToken);
    zp.joinRoom({
      container: element,
      scenario: {
        mode: ZegoUIKitPrebuilt.GroupCall,
      },
      whiteboardConfig: {
        showAddImageButton: true,
        showCreateAndCloseButton: true,
      },
    });
  };

  return <div ref={myMeeting} style={{ width: '100vw', height: '100vh' }} />;
}

Best Practices

Optimize for Weak Networks: Use ZEGOCLOUD’s network adaptation for smooth performance in low-bandwidth scenarios.
Test Across Devices: Ensure compatibility across Web, Android, iOS, and other platforms.
Secure Token Generation: Generate tokens on your server for production to enhance security.
Use the Admin Console: Monitor usage and manage AppID/ServerSecret via the ZEGOCLOUD Admin Console.
Leverage Documentation: Refer to the ZEGOCLOUD Developer Center for guides and API references.

Features

Basic editing tools

Pricing and Plans

ZEGOCLOUD offers a free tier with 10,000 minutes for testing and development. For detailed pricing, visit the ZEGOCLOUD pricing page.

Conclusion

The ZEGOCLOUD Whiteboard SDK is a powerful tool for building real-time, interactive whiteboard experiences. With its low-latency performance, cross-platform support, and rich features, it’s ideal for online education, virtual meetings, and collaborative workflows. By following the integration steps and best practices above, developers can create engaging apps that enhance collaboration.

Explore the ZEGOCLOUD Whiteboard SDK today at the ZEGOCLOUD Developer Center and leverage the free trial to bring your app’s collaboration features to life!

Happy coding, and enjoy your new video call app!

written by shubham Pandey

Step-by-Step Guide to Building a Video Conference App with ZEGOCLOUD Video Conference Kit

Roozer Grom — Fri, 02 May 2025 18:39:56 +0000

In today's digital age, video conferencing has become an essential tool You can explore more on ZEGOCLOUD’s official website for powerful tools to build such apps... for remote work, education, and social interaction. Building a video conference application from scratch can be complex, but with ZEGOCLOUD's Video Conference Kit, developers can integrate feature-rich video conferencing capabilities into their web applications quickly and easily. This comprehensive guide will walk you through the process of setting up a video conference app using ZEGOCLOUD's Video Conference Kit in simple, beginner-friendly language. We'll cover everything from prerequisites to customization, including a detailed code tutorial with step-by-step instructions.

What is ZEGOCLOUD Video Conference Kit?

ZEGOCLOUD's Video Conference Kit is a prebuilt, feature-rich component that allows developers to embed video conferencing functionality into web and mobile applications with minimal coding. It provides a ready-to-use user interface (UI) and business logic, enabling you to create Zoom-like video conferencing apps in minutes. Key features include:

High-quality video and audio: Supports crystal-clear voice and video, even in low-bandwidth conditions.
Screen sharing: Allows users to share their screens during calls.
Customizable layouts: Supports gallery and picture-in-picture layouts.
Real-time interaction: Includes in-room messaging, participant management, and more.
Cross-platform support: Works on web browsers (PC and mobile) and integrates with frameworks like React, Angular, and Vue.

This guide focuses on the web version of the Video Conference Kit, using HTML and JavaScript for integration.

Prerequisites

Before we dive into the tutorial, ensure you have the following:

Basic Knowledge:
- Familiarity with HTML, CSS, and JavaScript.
- Basic understanding of web development concepts.
Development Environment:
- A code editor (e.g., Visual Studio Code).
- A modern web browser (Google Chrome is recommended for best compatibility).
- Node.js and npm (if using a framework like React).
ZEGOCLOUD Account:
- Sign up for a free account on the ZEGOCLOUD Admin Console.
- Create a project to obtain your AppID and ServerSecret, which are required for authentication.
Internet Connection:
- A stable internet connection for testing and deploying your application.

Step-by-Step Tutorial: Building a Video Conference App

Let's build a simple video conference app using ZEGOCLOUD's Video Conference Kit. We'll use the HTML script method for integration, as it's the simplest approach for beginners. Follow these steps carefully.

Step 1: Set Up Your ZEGOCLOUD Project

Log in to ZEGOCLOUD Admin Console:
- Visit ZEGOCLOUD Admin Console and sign in or create an account.

Create a New Project:
- Click on Create Project and select UIKit as the project type.
- Give your project a name (e.g., "VideoConferenceApp").
Obtain AppID and ServerSecret:
- Once the project is created, you'll see your AppID (a numeric value) and ServerSecret (a string).
- Note these down, as you'll need them to generate a Kit Token for authentication.

Enable Video Conference Kit:
- In the project dashboard, ensure the Video Conference Kit is enabled. This is usually enabled by default for UIKit projects.

Step 2: Set Up Your Project Folder

Create a Project Directory:
- On your computer, create a new folder called video-conference-app.
- Inside this folder, create a file named index.html.
Basic HTML Structure:
- Open index.html in your code editor and add the following basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZEGOCLOUD Video Conference App</title>
    <style>
        #root {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="root"></div>
</body>
</html>

The #root div will serve as the container for the video conference UI.
The CSS ensures the video conference interface takes up the full viewport.

Step 3: Import ZEGOCLOUD Video Conference Kit

1 Add the ZEGOCLOUD SDK:

Include the ZEGOCLOUD Video Conference Kit SDK by adding the following <script> tag inside the <body> of your index.html, just before the closing </body> tag:

<script src="https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js"></script>

This script loads the prebuilt Video Conference Kit library from a CDN, making it easy to integrate without installing dependencies.

2 Verify SDK Import:

Save the file and open index.html in a browser (e.g., Chrome) using a local server. To run a local server, you can use:
- VS Code: Install the "Live Server" extension and right-click index.html to open with Live Server.
- Node.js: Run npx http-server in the project folder.
Ensure there are no errors in the browser's console.

Step 4: Generate a Kit Token

The ZEGOCLOUD Video Conference Kit requires a Kit Token for authentication. This token is generated using your AppID, ServerSecret, and other parameters like roomID, userID, and userName.

Add Token Generation Logic:
- Below the SDK script, add a <script> tag with the following JavaScript code to generate a Kit Token and initialize the video conference:

// Replace with your actual AppID and ServerSecret
const appID = YOUR_APP_ID; // e.g., 123456789
const serverSecret = "YOUR_SERVER_SECRET"; // e.g., "a1b2c3d4e5f6..."
// Generate a random roomID, userID, and userName
const roomID = Math.random().toString(36).substring(2, 7); // Random 5-character room ID
const userID = Math.floor(Math.random() * 10000) + ""; // Random user ID
const userName = "user_" + userID; // User name based on user ID
// Generate Kit Token
const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(
    appID,
    serverSecret,
    roomID,
    userID,
    userName
);
// Initialize the Video Conference Kit
const zp = ZegoUIKitPrebuilt.create(kitToken);
// Join the video conference room
zp.joinRoom({
    container: document.querySelector("#root"),
    sharedLinks: [
        {
            name: "Personal link",
            url:
                window.location.protocol +
                "//" +
                window.location.host +
                window.location.pathname +
                "?roomID=" +
                roomID,
        },
    ],
    scenario: {
        mode: ZegoUIKitPrebuilt.VideoConference,
    },
});

2 Replace Credentials:

Replace YOUR_APP_ID with the AppID from your ZEGOCLOUD project.
Replace YOUR_SERVER_SECRET with the ServerSecret from your ZEGOCLOUD project.

3 Explanation of the Code:

AppID and ServerSecret: Authenticate your app with ZEGOCLOUD's servers.
roomID: A unique identifier for the video conference room. Users with the same roomID join the same conference.
userID and userName: Identify the user in the conference. For testing, we generate random values.
generateKitTokenForTest: A helper method to create a temporary token for testing. For production, you should generate tokens server-side for security.
joinRoom: Initializes the video conference UI inside the #root div and starts the conference.

Step 5: Test Your Video Conference App

Run the Application:
- Save index.html and open it in a browser using a local server (e.g., http://localhost:8080).
- You should see the ZEGOCLOUD video conference interface, with options to enable your camera and microphone.
Join the Conference:
- Allow browser permissions for camera and microphone access.
- You'll see your video feed and the conference UI, including buttons for screen sharing, messaging, and participant management.
Test with Multiple Users:
- Open another browser tab or window and navigate to the same URL with the same roomID (you can find the shared link in the UI).
- Alternatively, modify the roomID in the code to a fixed value (e.g., room123) and open multiple tabs with ?roomID=room123 appended to the URL (e.g., http://localhost:8080?roomID=room123).
- You should see multiple participants in the same conference.

Step 6: Customize the Video Conference UI

ZEGOCLOUD's Video Conference Kit allows you to customize the UI and behavior using the ZegoUIKitPrebuiltVideoConferenceConfig object. Here are some common customizations:

Add a Leave Confirmation Dialog:
- To prompt users before leaving the conference, modify the joinRoom configuration:

zp.joinRoom({
    container: document.querySelector("#root"),
    sharedLinks: [
        {
            name: "Personal link",
            url:
                window.location.protocol +
                "//" +
                window.location.host +
                window.location.pathname +
                "?roomID=" +
                roomID,
        },
    ],
    scenario: {
        mode: ZegoUIKitPrebuilt.VideoConference,
    },
    leaveConfirmDialogInfo: {
        title: "Leave the conference",
        message: "Are you sure you want to leave?",
        cancelButtonName: "Cancel",
        confirmButtonName: "Confirm",
    },
});

This adds a confirmation dialog when the user clicks the "Leave" button.

2 Change Layout:

By default, the kit uses a gallery layout. To switch to picture-in-picture, add:

scenario: {
    mode: ZegoUIKitPrebuilt.VideoConference,
    config: {
        layout: "PictureInPicture",
    },
},

3 Turn Off Camera by Default:

To disable the camera when joining:

config: {
    turnOnCameraWhenJoining: false,
},

4 Add Custom Avatars:

To display user avatars instead of the first letter of the username:

config: {
    avatar: "https://example.com/avatar.png",
},

Step 7: Deploy Your Application

Host on a Web Server:
- For production, host your index.html on a web server (e.g., Netlify, Vercel, or AWS).
- Ensure the server supports HTTPS, as ZEGOCLOUD requires secure connections for camera and microphone access.
Generate Tokens Server-Side:
- For security, avoid using generateKitTokenForTest in production. Instead, set up a server (e.g., using Node.js) to generate tokens. Refer to ZEGOCLOUD's documentation for server-side token generation.
Test Thoroughly:
- Test your app across different browsers (Chrome, Firefox, Safari) and devices to ensure compatibility.
- Verify features like screen sharing, messaging, and participant management.

Complete Code Example

Here's the complete index.html file with all the code integrated:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZEGOCLOUD Video Conference App</title>
    <style>
        #root {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js"></script>
    <script>
        // Replace with your actual AppID and ServerSecret
        const appID = YOUR_APP_ID; // e.g., 123456789
        const serverSecret = "YOUR_SERVER_SECRET"; // e.g., "a1b2c3d4e5f6..."
        // Generate a random roomID, userID, and userName
        const roomID = Math.random().toString(36).substring(2, 7);
        const userID = Math.floor(Math.random() * 10000) + "";
        const userName = "user_" + userID;
        // Generate Kit Token
        const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(
            appID,
            serverSecret,
            roomID,
            userID,
            userName
        );
        // Initialize the Video Conference Kit
        const zp = ZegoUIKitPrebuilt.create(kitToken);
        // Join the video conference room
        zp.joinRoom({
            container: document.querySelector("#root"),
            sharedLinks: [
                {
                    name: "Personal link",
                    url:
                        window.location.protocol +
                        "//" +
                        window.location.host +
                        window.location.pathname +
                        "?roomID=" +
                        roomID,
                },
            ],
            scenario: {
                mode: ZegoUIKitPrebuilt.VideoConference,
            },
            leaveConfirmDialogInfo: {
                title: "Leave the conference",
                message: "Are you sure you want to leave?",
                cancelButtonName: "Cancel",
                confirmButtonName: "Confirm",
            },
            config: {
                turnOnCameraWhenJoining: false,
            },
        });
    </script>
</body>
</html>

Advanced Integration with Frameworks

If you're using a JavaScript framework like React, Vue, or Angular, ZEGOCLOUD provides NPM packages for seamless integration. Here's a brief example using React:

React Integration

Install the ZEGOCLOUD Package:
- Run the following command in your React project:

npm install @zegocloud/zego-uikit-prebuilt

2 Create a Video Conference Component:

Create a file named VideoConference.js:

import React from "react";
import { ZegoUIKitPrebuilt } from "@zegocloud/zego-uikit-prebuilt";

function randomID(len) {
    let result = "";
    const chars =
        "12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP";
    const maxPos = chars.length;
    len = len || 5;
    for (let i = 0; i < len; i++) {
        result += chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return result;
}

export default function VideoConference() {
    const roomID = randomID(5);
    const myMeeting = async (element) => {
        const appID = YOUR_APP_ID;
        const serverSecret = "YOUR_SERVER_SECRET";
        const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(
            appID,
            serverSecret,
            roomID,
            randomID(5),
            randomID(5)
        );
        const zp = ZegoUIKitPrebuilt.create(kitToken);
        zp.joinRoom({
            container: element,
            sharedLinks: [
                {
                    name: "Personal link",
                    url: `${window.location.protocol}//${window.location.host}${window.location.pathname}?roomID=${roomID}`,
                },
            ],
            scenario: {
                mode: ZegoUIKitPrebuilt.VideoConference,
            },
        });
    };
    return <div ref={myMeeting} style={{ width: "100vw", height: "100vh" }} />;
}

3 Use the Component:

Import and use the VideoConference component in your React app.

For detailed framework-specific guides, refer to the ZEGOCLOUD documentation.

Troubleshooting Common Issues

Camera/Microphone Not Working:
- Ensure you're using HTTPS (required for camera/microphone access).
- Check browser permissions for camera and microphone.
Token Errors:
- Verify that your AppID and ServerSecret are correct.
- For production, use server-side token generation instead of generateKitTokenForTest.
UI Not Displaying:
- Confirm that the #root div exists and has sufficient width and height.
- Check the browser console for JavaScript errors.
Cross-Browser Compatibility:
- Test on Chrome, as it's the most compatible browser. For other browsers, check ZEGOCLOUD's Web SDK compatibility.

Best Practices

Secure Token Generation:
- Always generate tokens on the server side for production apps to prevent exposing your ServerSecret.
Optimize Performance:
- Use a fixed roomID for consistent conference sessions.
- Minimize customizations that increase load times.
User Experience:
- Add clear instructions for users to enable camera/microphone permissions.
- Customize the UI to match your app's branding.
Testing:
- Test with multiple users and devices to ensure scalability.
- Simulate low-bandwidth conditions to verify performance.

Conclusion

ZEGOCLOUD's Video Conference Kit makes it incredibly easy to build a fully functional video conferencing app with minimal coding. By following this guide, you've learned how to:

Set up a ZEGOCLOUD project and obtain credentials.
Integrate the Video Conference Kit into a web app using HTML and JavaScript.
Customize the UI and behavior to suit your needs.
Deploy and test your application.

With just a few lines of code, you can create a Zoom-like experience that supports high-quality video, screen sharing, and real-time interaction. For more advanced features or framework-specific integrations, explore the ZEGOCLOUD documentation.

For a production app, generate tokens securely on a server, add error handling, and maybe style it up a bit. But for now, you've got a solid foundation. Have fun streaming, and let me know how it goes!

Start building your video conference app today and empower your users with seamless real-time communication!

Written by Shubham Pandey

Subscribe: Doumcoding

Building a Live Streaming App with ZEGOCLOUD Live Streaming SDK and React JS: A Step-by-Step Guide

Roozer Grom — Fri, 11 Apr 2025 06:10:38 +0000

Live streaming has become a massive part of how we connect online—think of platforms like Twitch, YouTube Live, or even live shopping apps. If you’re a developer wanting to create your own live streaming app, the ZEGOCLOUD Live Streaming SDK is a fantastic tool to make it happen. It’s powerful, flexible, and works seamlessly with React JS, a popular library for building interactive web apps.

In this guide, I’ll take you through every step of integrating the ZEGOCLOUD Live Streaming SDK into a React JS project. We’ll:

Set up the SDK
Initialize a live stream
Publish your video
Play streams from others

All with detailed explanations and code snippets. I’ll keep it simple, practical, and easy to follow, so it feels like a real developer wrote it—not some AI spitting out generic stuff.

Let’s dive in!

Why ZEGOCLOUD Live Streaming SDK?

The ZEGOCLOUD Live Streaming SDK is built for developers who need a robust solution for real-time video streaming. It handles the heavy lifting—like:

Connecting users
Managing streams
Ensuring low latency

So you can focus on building a great app.

With React JS, you get a clean way to manage your UI, making this combo perfect for a modern web-based live streaming app.

Prerequisites

Before we start, here’s what you’ll need:

Node.js: Installed on your system (get it from nodejs.org).
React Knowledge: Basics of components, hooks (useState, useEffect), and JSX.
ZEGOCLOUD Account: Sign up at ZEGOCLOUD’s website and grab your App ID and Server Secret from the Admin Console.
Text Editor: VS Code or any editor you like.

Step 1: Setting Up Your React Project

First, let’s create a fresh React project. I’m using Vite because it’s fast and lightweight, but you can use Create React App if that’s your preference.

Open your terminal and run:

npm create vite@latest live-streaming-app --template react

Move into the project folder:

cd live-streaming-app

Install dependencies and start the development server:

npm install
npm run dev

Visit http://localhost:5173 in your browser—you should see a basic React app. Perfect! We’ve got our base setup.

Step 2: Installing the ZEGOCLOUD Live Streaming SDK

The ZEGOCLOUD SDK for web apps uses WebRTC, so we’ll install the zego-express-engine-webrtc package.
In your terminal, run:

npm install zego-express-engine-webrtc

This adds the SDK to your project. You’ll see it listed in package.json once it’s installed.

Step 3: Initializing the SDK

Now, let’s set up the SDK in our React app.Open src/App.jsx and replace its contents with this:

import React, { useEffect } from 'react';
import { ZegoExpressEngine } from 'zego-express-engine-webrtc';

function App() {
  useEffect(() => {
    const appID = import.meta.env.VITE_ZEGO_APP_ID; // Your App ID
    const serverSecret = import.meta.env.VITE_ZEGO_SERVER_SECRET; // Your Server Secret
    const zg = new ZegoExpressEngine(appID, serverSecret);
    console.log('ZEGOCLOUD SDK Initialized!');

    return () => {
      zg.destroyEngine(); // Cleanup when component unmounts
    };
  }, []);

  return (
    <div>
      <h1>My Live Streaming App</h1>
      <div id="local-stream" style={{ width: '400px', height: '300px', border: '1px solid #ccc' }}></div>
      <div id="remote-streams" style={{ width: '400px', height: '300px', border: '1px solid #ccc' }}></div>
    </div>
  );
}

export default App;

What’s Going On?

Imports: We bring in useEffect for lifecycle management and ZegoExpressEngine from the SDK.
Initialization: Inside useEffect, we create a new instance of ZegoExpressEngine with our App ID and Server Secret.
Cleanup: The return statement ensures the engine is destroyed when the component unmounts, avoiding memory leaks.
UI: Two divs with IDs local-stream and remote-streams will hold our video feeds.

Environment Variables

We’re using VITE_ZEGO_APP_ID and VITE_ZEGO_SERVER_SECRET.
Create a .env file in your project root and add:

VITE_ZEGO_APP_ID=your_app_id_here
VITE_ZEGO_SERVER_SECRET=your_server_secret_here

Replace the placeholders with your actual values from the ZEGOCLOUD Admin Console.

Step 4: Logging into a Room

In ZEGOCLOUD, a “room” is where users connect for live streaming. Let’s log in.Update the useEffect block:

useEffect(() => {
  const appID = import.meta.env.VITE_ZEGO_APP_ID;
  const serverSecret = import.meta.env.VITE_ZEGO_SERVER_SECRET;
  const zg = new ZegoExpressEngine(appID, serverSecret);

  const roomID = 'live-room-001'; // Unique room name
  const userID = `user_${Math.floor(Math.random() * 10000)}`; // Random user ID
  const userName = 'Streamer';
  const token = 'your_token_here'; // Replace with a real token

  zg.loginRoom(roomID, token, { userID, userName }, { userUpdate: true })
    .then(() => {
      console.log('Logged into the room!');
    })
    .catch(error => {
      console.error('Login failed:', error);
    });

  return () => {
    zg.logoutRoom(roomID);
    zg.destroyEngine();
  };
}, []);

Explanation

Variables: roomID is the room’s identifier, userID is unique for each user (randomized here for simplicity), and userName is a display name.
Token: The token is for authentication. For testing, you can generate a temporary token in the ZEGOCLOUD Admin Console. In production, create it securely on your server.
loginRoom: This connects us to the room. The { userUpdate: true } option lets us track other users joining or leaving.

Step 5: Publishing Your Live Stream

To start streaming your video, we need to capture your camera and microphone feed and publish it.Add this inside the .then() block:

zg.loginRoom(roomID, token, { userID, userName }, { userUpdate: true })
  .then(() => {
    console.log('Logged into the room!');
    return zg.createStream({ camera: { audio: true, video: true } });
  })
  .then(localStream => {
    const streamID = `${userID}_stream`; // Unique stream ID
    zg.startPublishingStream(streamID, localStream);

    const localVideo = document.getElementById('local-stream');
    const videoElement = document.createElement('video');
    videoElement.autoplay = true;
    videoElement.muted = true; // Mute local audio to avoid feedback
    videoElement.srcObject = localStream;
    localVideo.appendChild(videoElement);
  })
  .catch(error => {
    console.error('Error:', error);
  });

What’s Happening?

createStream: Captures audio and video from your device. You’ll need to grant browser permissions for this.
startPublishingStream: Sends your stream to the room with a unique streamID.
Display Local Stream: We create a <video> element, attach the localStream, and add it to the local-stream div.

Step 6: Playing Remote Streams

To watch other users’ streams, we need to listen for stream updates.Add this event listener after initializing zg:

useEffect(() => {
  const appID = import.meta.env.VITE_ZEGO_APP_ID;
  const serverSecret = import.meta.env.VITE_ZEGO_SERVER_SECRET;
  const zg = new ZegoExpressEngine(appID, serverSecret);

  zg.on('roomStreamUpdate', async (roomID, updateType, streamList) => {
    const remoteContainer = document.getElementById('remote-streams');
    if (updateType === 'ADD') {
      streamList.forEach(async stream => {
        const remoteStream = await zg.startPlayingStream(stream.streamID, { audio: true, video: true });
        const videoElement = document.createElement('video');
        videoElement.id = stream.streamID;
        videoElement.autoplay = true;
        videoElement.playsInline = true;
        videoElement.muted = false;
        videoElement.srcObject = remoteStream;
        remoteContainer.appendChild(videoElement);
      });
    } else if (updateType === 'DELETE') {
      streamList.forEach(stream => {
        const videoElement = document.getElementById(stream.streamID);
        if (videoElement) {
          videoElement.remove();
        }
      });
    }
  });

  const roomID = 'live-room-001';
  const userID = `user_${Math.floor(Math.random() * 10000)}`;
  const userName = 'Streamer';
  const token = 'your_token_here';

  zg.loginRoom(roomID, token, { userID, userName }, { userUpdate: true })
    .then(() => {
      console.log('Logged into the room!');
      return zg.createStream({ camera: { audio: true, video: true } });
    })
    .then(localStream => {
      const streamID = `${userID}_stream`;
      zg.startPublishingStream(streamID, localStream);

      const localVideo = document.getElementById('local-stream');
      const videoElement = document.createElement('video');
      videoElement.autoplay = true;
      videoElement.muted = true;
      videoElement.srcObject = localStream;
      localVideo.appendChild(videoElement);
    })
    .catch(error => {
      console.error('Error:', error);
    });

  return () => {
    zg.logoutRoom(roomID);
    zg.destroyEngine();
  };
}, []);

Breakdown

roomStreamUpdate: This event triggers when streams are added (ADD) or removed (DELETE).
ADD: For each new stream, we use startPlayingStream to fetch it, create a <video> element, and display it in remote-streams.
DELETE: Removes the video element when a stream ends.

Step 7: Adding Basic Controls (Optional)

Let’s add a button to stop publishing your stream.Update App.jsx with state and a button:

import React, { useEffect, useState } from 'react';
import { ZegoExpressEngine } from 'zego-express-engine-webrtc';

function App() {
  const [zg, setZg] = useState(null);
  const [streamID, setStreamID] = useState(null);

  useEffect(() => {
    const appID = import.meta.env.VITE_ZEGO_APP_ID;
    const serverSecret = import.meta.env.VITE_ZEGO_SERVER_SECRET;
    const engine = new ZegoExpressEngine(appID, serverSecret);
    setZg(engine);

    engine.on('roomStreamUpdate', async (roomID, updateType, streamList) => {
      const remoteContainer = document.getElementById('remote-streams');
      if (updateType === 'ADD') {
        streamList.forEach(async stream => {
          const remoteStream = await engine.startPlayingStream(stream.streamID, { audio: true, video: true });
          const videoElement = document.createElement('video');
          videoElement.id = stream.streamID;
          videoElement.autoplay = true;
          videoElement.playsInline = true;
          videoElement.muted = false;
          videoElement.srcObject = remoteStream;
          remoteContainer.appendChild(videoElement);
        });
      } else if (updateType === 'DELETE') {
        streamList.forEach(stream => {
          const videoElement = document.getElementById(stream.streamID);
          if (videoElement) {
            videoElement.remove();
          }
        });
      }
    });

    const roomID = 'live-room-001';
    const userID = `user_${Math.floor(Math.random() * 10000)}`;
    const userName = 'Streamer';
    const token = 'your_token_here';

    engine.loginRoom(roomID, token, { userID, userName }, { userUpdate: true })
      .then(() => {
        console.log('Logged into the room!');
        return engine.createStream({ camera: { audio: true, video: true } });
      })
      .then(localStream => {
        const sid = `${userID}_stream`;
        setStreamID(sid);
        engine.startPublishingStream(sid, localStream);

        const localVideo = document.getElementById('local-stream');
        const videoElement = document.createElement('video');
        videoElement.autoplay = true;
        videoElement.muted = true;
        videoElement.srcObject = localStream;
        localVideo.appendChild(videoElement);
      })
      .catch(error => {
        console.error('Error:', error);
      });

    return () => {
      engine.logoutRoom(roomID);
      engine.destroyEngine();
    };
  }, []);

  const stopStreaming = () => {
    if (zg && streamID) {
      zg.stopPublishingStream(streamID);
      const localVideo = document.getElementById('local-stream');
      localVideo.innerHTML = ''; // Clear the local video
      setStreamID(null);
    }
  };

  return (
    <div>
      <h1>My Live Streaming App</h1>
      <div id="local-stream" style={{ width: '400px', height: '300px', border: '1px solid #ccc' }}></div>
      <div id="remote-streams" style={{ width: '400px', height: '300px', border: '1px solid #ccc' }}></div>
      {streamID && <button onClick={stopStreaming}>Stop Streaming</button>}
    </div>
  );
}

export default App;

Explanation

State: zg stores the engine instance, and streamID tracks the active stream.
stopStreaming: Stops the stream and clears the local video.

The Full Code

Here’s everything together:

import React, { useEffect, useState } from 'react';
import { ZegoExpressEngine } from 'zego-express-engine-webrtc';

function App() {
  const [zg, setZg] = useState(null);
  const [streamID, setStreamID] = useState(null);

  useEffect(() => {
    const appID = import.meta.env.VITE_ZEGO_APP_ID;
    const serverSecret = import.meta.env.VITE_ZEGO_SERVER_SECRET;
    const engine = new ZegoExpressEngine(appID, serverSecret);
    setZg(engine);

    engine.on('roomStreamUpdate', async (roomID, updateType, streamList) => {
      const remoteContainer = document.getElementById('remote-streams');
      if (updateType === 'ADD') {
        streamList.forEach(async stream => {
          const remoteStream = await engine.startPlayingStream(stream.streamID, { audio: true, video: true });
          const videoElement = document.createElement('video');
          videoElement.id = stream.streamID;
          videoElement.autoplay = true;
          videoElement.playsInline = true;
          videoElement.muted = false;
          videoElement.srcObject = remoteStream;
          remoteContainer.appendChild(videoElement);
        });
      } else if (updateType === 'DELETE') {
        streamList.forEach(stream => {
          const videoElement = document.getElementById(stream.streamID);
          if (videoElement) {
            videoElement.remove();
          }
        });
      }
    });

    const roomID = 'live-room-001';
    const userID = `user_${Math.floor(Math.random() * 10000)}`;
    const userName = 'Streamer';
    const token = 'your_token_here';

    engine.loginRoom(roomID, token, { userID, userName }, { userUpdate: true })
      .then(() => {
        console.log('Logged into the room!');
        return engine.createStream({ camera: { audio: true, video: true } });
      })
      .then(localStream => {
        const sid = `${userID}_stream`;
        setStreamID(sid);
        engine.startPublishingStream(sid, localStream);

        const localVideo = document.getElementById('local-stream');
        const videoElement = document.createElement('video');
        videoElement.autoplay = true;
        videoElement.muted = true;
        videoElement.srcObject = localStream;
        localVideo.appendChild(videoElement);
      })
      .catch(error => {
        console.error('Error:', error);
      });

    return () => {
      engine.logoutRoom(roomID);
      engine.destroyEngine();
    };
  }, []);

  const stopStreaming = () => {
    if (zg && streamID) {
      zg.stopPublishingStream(streamID);
      const localVideo = document.getElementById('local-stream');
      localVideo.innerHTML = '';
      setStreamID(null);
    }
  };

  return (
    <div>
      <h1>My Live Streaming App</h1>
      <div id="local-stream" style={{ width: '400px', height: '300px', border: '1px solid #ccc' }}></div>
      <div id="remote-streams" style={{ width: '400px', height: '300px', border: '1px solid #ccc' }}></div>
      {streamID && <button onClick={stopStreaming}>Stop Streaming</button>}
    </div>
  );
}

export default App;

Testing the App

Run npm run dev and open http://localhost:5173.

You should see your video in the local-stream div.

To test remote streams, open another tab with the same roomID but a different userID. The second user’s stream should appear in remote-streams.

Conclusion

There you go—you’ve built a live streaming app with the ZEGOCLOUD Live Streaming SDK and React JS!

We’ve covered setting up the project, initializing the SDK, joining a room, publishing your stream, and playing others’ streams.

It’s a basic app, but ZEGOCLOUD offers tons more—like co-hosting, low-latency modes, or stream recording—that you can explore in their docs.

For a production app:

Generate tokens securely on a server
Add error handling
Style it up a bit

But for now, you’ve got a solid foundation.

Have fun streaming, and let me know how it goes!

Happy coding, and enjoy your new video call app!

written by shubham Pandey

for video tutorial watch this :-

Building a Video Call App with ZEGOCLOUD SDK and React JS: A Step-by-Step Guide In 10 Minutes

Roozer Grom — Wed, 26 Mar 2025 08:40:23 +0000

In today’s world, video calling is everywhere — whether it’s catching up with friends or hosting a team meeting. If you’re a developer looking to add video call features to your app, it might sound like a big challenge. But with tools like the ZEGOCLOUD SDK, it’s easier than you think! ZEGOCLOUD is a cloud-based platform that gives developers simple APIs and SDKs to integrate video calling into their projects fast.

In this article, I’ll walk you through how to build a video call app using React JS and the ZEGOCLOUD SDK. We’ll go step by step, with clear instructions, code snippets, and explanations to make it beginner-friendly. By the end, you’ll have a working video call app — Let’s get started.

Why ZEGOCLOUD and React JS?

ZEGOCLOUD makes video calling simple by handling all the tricky stuff — like connecting users and managing streams — so you don’t have to. Pair that with React JS, a popular JavaScript library for building user interfaces, and you’ve got a powerful combo for creating modern web apps. Whether you’re a solo developer or part of a team, this setup lets you build something functional quickly.

Why Choose ZegoCloud?

ZegoCloud stands out due to its:

High-Quality Video and Audio:
Ensures clear and reliable communication.
Low Latency:
Provides a near real-time interactive experience.
Scalability:
Can handle a large number of concurrent users.
Cross-Platform Support
: Works on various operating systems and devices.
Rich Feature Set:
Offers features like screen sharing, recording, and more, beyond basic video calling.

Prerequisites :-

Before we dive in, let’s make sure you’ve got everything you need:

Node.js Installed on your computer (download it from nodejs.org if you haven’t already).
Basic React Knowledge: You should know how components, hooks (like useEffect), and JSX work.
ZEGOCLOUD Account: Sign up at ZEGOCLOUD’s website to get your App ID and Server Secret.
Text Editor: Something like VS Code works great.
Once you’ve got these ready, we’re good to go!

Step 1: Setting Up the React Project :-

First, we need a React project to work with. We’ll use Vite, a fast tool for creating React apps (though you could use Create React App if you prefer). Open your terminal and type:

npm create vite@latest video-call-app --template react

This creates a new project called video-call-app. Now, move into that folder:

cd video-call-app

Start the development server to make sure everything’s working:

npm run dev

You should see a basic React app running at http://localhost:5173. Great! We’ve got our foundation.

Step 2: Installing the ZEGOCLOUD SDK :-

Next, we need to add the ZEGOCLOUD SDK to our project. This SDK gives us all the tools to handle video calls. Run this command in your terminal:

npm install zego-express-engine-webrtc

This installs the ZEGOCLOUD WebRTC SDK, which is perfect for web apps like ours. Once it’s done, you’ll see it added to your package.json.

Step 3: Importing and Initializing the SDK :-

Now, let’s set up the SDK in our app. Open src/App.jsx (or src/App.js if you’re using JavaScript instead of JSX) and replace its contents with this:

import React, { useEffect } from 'react';
import { ZegoExpressEngine } from 'zego-express-engine-webrtc';

function App() {
  useEffect(() => {
    const appID = import.meta.env.VITE_ZEGO_APP_ID;
    const serverSecret = import.meta.env.VITE_ZEGO_SERVER_SECRET;
    const zg = new ZegoExpressEngine(appID, serverSecret);
    console.log('ZEGOCLOUD SDK initialized!');
  }, []);

  return (
    <div>
      <h1>My Video Call App</h1>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
}

export default App;

What’s Happening Here?

Imports: We bring in React’s useEffect hook and the ZegoExpressEngine from the SDK.
useEffect: This hook runs code when the component loads. Here, it initializes the ZEGOCLOUD SDK with an App ID and Server Secret.
HTML: We’ve added two div elements with IDs local-video and remote-video. These will hold our video streams later.

But wait — where do VITE_ZEGO_APP_ID and VITE_ZEGO_SERVER_SECRET come from? We need to set them up as environment variables.

Setting Up Environment Variables :-

In your project’s root folder, create a file called .env and add these lines

VITE_ZEGO_APP_ID=your_app_id_here
VITE_ZEGO_SERVER_SECRET=your_server_secret_here

Replace your_app_id_here and your_server_secret_here with the actual values from your ZEGOCLOUD console. Since we’re using Vite, environment variables start with VITE_ and are accessed with import.meta.env.

Step 4: Joining a Room :-

In ZEGOCLOUD, a “room” is like a virtual meeting space where users connect for a video call. To join one, we use the loginRoom method. Update the useEffect block in App.jsx like this:

useEffect(() => {
  const appID = import.meta.env.VITE_ZEGO_APP_ID;
  const serverSecret = import.meta.env.VITE_ZEGO_SERVER_SECRET;
  const zg = new ZegoExpressEngine(appID, serverSecret);

  const roomID = 'zego-room'; // Change this to anything you like
  const userID = 'user123'; // A unique ID for the user
  const userName = 'John Doe';
  const token = 'your_token_here'; // Replace with a real token

  zg.loginRoom(roomID, token, { userID, userName }, { userUpdate: true })
    .then(() => {
      console.log('Successfully joined the room!');
    })
    .catch(error => {
      console.error('Error joining room:', error);
    });
}, []);

What’s This Code Doing?

Variables: We define a roomID (the room’s name), userID (a unique identifier for you), and userName. The token is for authentication.
loginRoom: This method connects us to the room. The { userUpdate: true} option ensures we get updates about other users in the room.

Important Note: The token is a placeholder here. In a real app, you’d generate this securely on a server using your App ID and Server Secret. For this tutorial, you can use a test token from ZEGOCLOUD’s documentation, but don’t hardcode it in production!

Step 5: Creating a Local Audio and Video Stream :-

Now that we’re in the room, let’s capture our audio and video (like turning on your webcam and mic). Add this code inside the .then() block:

zg.loginRoom(roomID, token, { userID, userName }, { userUpdate: true })
  .then(() => {
    console.log('Successfully joined the room!');
    return zg.createStream({ camera: { audio: true, video: true } });
  })
  .then(localStream => {
    console.log('Local stream created!');
  })
  .catch(error => {
    console.error('Error:', error);
  });

Explanation

createStream: This method uses your device’s camera and microphone to create a stream. The { audio: true, video: true } options enable both.
localStream: This is the stream object we’ll use next to share our video.

If your browser asks for camera/mic permissions, allow it — otherwise, this won’t work!

Step 6: Starting the Video Call :-

To let others see and hear us, we need to “publish” our stream to the room. Add this inside the second .then() block:

.then(localStream => {
  const streamID = 'stream_' + userID; // Unique ID for the stream
  zg.startPublishingStream(streamID, localStream);
  console.log('Stream published!');
})

streamID: A unique identifier for our stream (we’re just adding the userID to make it simple).
startPublishingStream: This sends our audio and video to the room.

Now, our stream is live for others to see!

Step 7: Rendering Video Streams :-

Finally, let’s display the video streams — ours (local) and anyone else’s (remote).

Showing the Local Stream
Add this code after publishing the stream:

.then(localStream => {
  const streamID = 'stream_' + userID;
  zg.startPublishingStream(streamID, localStream);

  const localVideo = document.getElementById('local-video');
  const videoElement = document.createElement('video');
  videoElement.autoplay = true;
  videoElement.muted = true; // Mute local audio to avoid echo
  videoElement.srcObject = localStream;
  localVideo.appendChild(videoElement);
})

videoElement: We create a <video> tag dynamically, set it to autoplay, and mute it (so you don’t hear yourself).
srcObject: This attaches our localStream to the video element.

Showing Remote Streams

To see other people’s streams, we need to listen for updates. Add this event listener right after initializing zg:

useEffect(() => {
  const appID = import.meta.env.VITE_ZEGO_APP_ID;
  const serverSecret = import.meta.env.VITE_ZEGO_SERVER_SECRET;
  const zg = new ZegoExpressEngine(appID, serverSecret);

  zg.on('roomStreamUpdate', async (roomID, updateType, streamList) => {
    if (updateType === 'ADD') {
      const remoteVideo = document.getElementById('remote-video');
      streamList.forEach(stream => {
        const vd = document.createElement('video');
        vd.id = stream.streamID;
        vd.autoplay = true;
        vd.playsInline = true;
        vd.muted = false;
        remoteVideo.appendChild(vd);
        zg.startPlayingStream(stream.streamID, { audio: true, video: true })
          .then(stream => {
            vd.srcObject = stream;
          });
      });
    } else if (updateType === 'DELETE') {
      streamList.forEach(stream => {
        const vd = document.getElementById(stream.streamID);
        if (vd) {
          vd.remove();
        }
      });
    }
  });

  // Rest of the code (loginRoom, etc.) goes here
}, []);

roomStreamUpdate: This event fires when streams are added or removed.
ADD: When a new stream appears, we create a <video> and play it with startPlayingStream.
DELETE: When someone leaves, we remove their video.

The Full Code

Here’s everything put together in App.jsx:

import React, { useEffect } from 'react';
import { ZegoExpressEngine } from 'zego-express-engine-webrtc';

function App() {
  useEffect(() => {
    const appID = import.meta.env.VITE_ZEGO_APP_ID;
    const serverSecret = import.meta.env.VITE_ZEGO_SERVER_SECRET;
    const zg = new ZegoExpressEngine(appID, serverSecret);

    zg.on('roomStreamUpdate', async (roomID, updateType, streamList) => {
      if (updateType === 'ADD') {
        const remoteVideo = document.getElementById('remote-video');
        streamList.forEach(stream => {
          const vd = document.createElement('video');
          vd.id = stream.streamID;
          vd.autoplay = true;
          vd.playsInline = true;
          vd.muted = false;
          remoteVideo.appendChild(vd);
          zg.startPlayingStream(stream.streamID, { audio: true, video: true })
            .then(stream => {
              vd.srcObject = stream;
            });
        });
      } else if (updateType === 'DELETE') {
        streamList.forEach(stream => {
          const vd = document.getElementById(stream.streamID);
          if (vd) {
            vd.remove();
          }
        });
      }
    });

    const roomID = 'zego-room';
    const userID = 'user123';
    const userName = 'John Doe';
    const token = 'your_token_here'; // Replace with a real token

    zg.loginRoom(roomID, token, { userID, userName }, { userUpdate: true })
      .then(() => {
        console.log('Successfully joined the room!');
        return zg.createStream({ camera: { audio: true, video: true } });
      })
      .then(localStream => {
        const streamID = 'stream_' + userID;
        zg.startPublishingStream(streamID, localStream);

        const localVideo = document.getElementById('local-video');
        const videoElement = document.createElement('video');
        videoElement.autoplay = true;
        videoElement.muted = true;
        videoElement.srcObject = localStream;
        localVideo.appendChild(videoElement);
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }, []);

  return (
    <div>
      <h1>My Video Call App</h1>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
}

export default App;

Testing Your App

Run npm run dev and open http://localhost:5173. You should see your video in the local-video div. To test with another user, open the app in a second browser tab (or another device) with a different userID. Their video should appear in the remote-video div.

Conclusion

And there you have it — a fully functional video call app built with React JS and ZEGOCLOUD! We’ve covered setting up the project, integrating the SDK, joining a room, creating streams, and displaying videos. It’s a solid starting point, but ZEGOCLOUD offers way more — like screen sharing or call recording — if you want to take it further.

For a real app, make sure to generate tokens securely on a server and add error handling. Check out ZEGOCLOUD’s official docs for more ideas.

Happy coding, and enjoy your new video call app!

written by shubham Pandey

for video tutorial watch this :-

youtube.com