Build a Video Calling App in React with ZEGOCLOUD SDK – Step-by-Step Guide 🚀

📢 Introduction
Have you ever wanted to build a fully functional video calling app in React with minimal effort? 🤯

With ZEGOCLOUD SDK, you can integrate high-quality video calls into your React application within minutes!

In this guide, we will walk through how to use ZEGOCLOUD SDK to build a video calling app step by step.

This tutorial is perfect for beginners and intermediate React developers who want to learn about video call integration.

🎯 By the end of this tutorial, you will have a working video calling app deployed online!

Let’s get started! 🚀

📌 Prerequisites
Before we start, make sure you have:
✅ Basic React knowledge
✅ Node.js installed
✅ A ZEGOCLOUD account (Sign up - https://www.zegocloud.com/)

🔹Step 1: Set Up a ZEGOCLOUD Account

1️⃣ Go to ZEGOCLOUD's website → Sign Up

2️⃣ Create a new project and get your AppID & AppSign

📸 Make sure to note down the AppID & AppSign – we’ll use them in the code.

Creating a video call app
The following steps show you how to create a video call app using ZEGOCLOUD and react.

1.Create a new React project.
2.Install the ZEGOCLOUD React SDK.
3.Import the ZEGOCLOUD SDK into your project.
4.Join a room.
5.Create a local audio and video stream.
6.Start a video call.
7.Render the video streams.

1. Add user controls (Mute, Camera Toggle, Leave Call, etc.)

Step 1: Create a new React Project
To start, create a new React app using Vite

npm create vite@latest video-call-app
npm run dev

After running the above commands, your React project is successfully set up. Now, open the project folder in VS Code and start the development server.

Next, let’s install the ZEGOCLOUD SDK to integrate video calling! 🚀

step 2 : Install the ZEGOCLOUD React SDK

Now that our React project is set up, let's install the ZEGOCLOUD React SDK, which will help us integrate video calling functionality.

Run the following command in your project directory:

npm install zego-express-engine-react

What Does This Package Do?
📹 zego-express-engine-react → Provides real-time audio/video communication features using ZEGOCLOUD SDK.

Once installed, we’re ready to integrate ZEGOCLOUD into our React project! 🚀

Next, let's set up the SDK and join a video call! 🎥

step 3: Import the ZEGOCLOUD SDK into your project.

Now that we have installed the ZEGOCLOUD React SDK, let's import it into our React project and initialize it.

1️⃣ Open your project and navigate to App.jsx or create a new component VideoCall.jsx.

2️⃣ Import the required ZEGOCLOUD SDK components:

import {zegoUiKitPrebuilt} from "@zegocloud/zego-uikit-prebuilt";

Step 4: join a room.

import React from 'react'
import { useParams } from 'react-router-dom'
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';
import { APP_ID, SERVER_SECRET } from './constant';

const VideoPage = () => {
    const {id} = useParams();
    const roomID = id
    let myMeeting = async (element) => {
   // generate Kit Token
    const appID = APP_ID;
    const serverSecret = SERVER_SECRET;
    const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID, Date.now().toString(),"aanchalmittal");  
   // Create instance object from Kit Token.
    const zp = ZegoUIKitPrebuilt.create(kitToken);
    // start the call
    zp.joinRoom({
      container: element,
      sharedLinks: [
        {
          name: 'Copy link',
          url:
           window.location.protocol + '//' + 
           window.location.host + window.location.pathname +
            '?roomID=' +
            roomID,
        },
      ],
      scenario: {
        mode: ZegoUIKitPrebuilt.OneONoneCall, // To implement 1-on-1 calls, modify the parameter here to [ZegoUIKitPrebuilt.OneONoneCall].
      },
    });


};
  return (
    <div ref={myMeeting}>

    </div>
  )
}

export default VideoPage 

What This Code Does?
✅ Imports ZEGOCLOUD SDK into the project.
✅ Generates a Kit Token for authentication.
✅ Creates & joins a video call room.
✅ Renders the video call UI inside a

.

Now, you can import VideoCall.jsx inside App.jsx and render it! 🚀

Step 5: Create a Local Audio and Video Stream.

Now that we have joined a room, the next step is to create a local audio and video stream using the ZEGOCLOUD SDK. This will allow the user to capture their video and audio and stream it in real time.

📌 Implementing Local Stream in React
1️⃣ Import the required dependencies and initialize the stream.
2️⃣ Use ZegoUIKitPrebuilt to access the user’s camera and microphone.
3️⃣ Render the local video stream inside a

.

Here’s the code snippet to set up the local stream in VideoCall.jsx:

🛠️ What This Code Does?
✅ Initializes a unique user and room ID.
✅ Uses ZegoUIKitPrebuilt.create() to create an instance.
✅ Calls joinRoom() to start the local audio & video stream.
✅ Renders the video stream inside a div.

Now, the user’s local video and audio will be streamed in the video call! 🎥🎙️

✅ Next Step: Start a Video Call

step 6 : Start a video call .
Now that we have set up the local audio and video stream, the next step is to start a video call where multiple participants can join and communicate in real time.

📌 Implementing a Video Call in React
1️⃣ Use ZegoUIKitPrebuilt.create() to initialize the call.
2️⃣ Join the video call room with camera and microphone enabled.
3️⃣ Display all participants’ video streams dynamically.

🛠️ What This Code Does?
✅ Initializes a video call room where users can join.
✅ Allows multiple participants to communicate in real time.
✅ Displays video streams of all users.
✅ Adds call features like room timer, user list, and leave confirmation.

Now, when users join the room, their video and audio will be streamed live! 🎥📞

✅ Next Step: Render the Video Streams
Now that we have started the call, let’s proceed to Step 7: Render the Video Streams to display all participants' videos dynamically! 🚀

step 7:Render the video streams.

Now that we have started a video call, we need to display the video streams of all participants dynamically. The ZEGOCLOUD SDK makes this easy by automatically handling the rendering of video streams for users in a call.

📌 Rendering Video Streams in React
1️⃣ Use the ZegoUIKitPrebuilt component to manage video streams.
2️⃣ Dynamically update the UI as participants join or leave.
3️⃣ Handle multiple participants seamlessly in the video grid.

🛠️ What This Code Does?
✅ Joins the video call room and streams live video.
✅ Displays multiple users’ video feeds dynamically.
✅ Handles user entries and exits smoothly.
✅ Uses a grid layout to arrange video streams neatly.

✅ Next Step: Add User Controls (Mute, Camera Toggle, Leave Call, etc.)
Now that the video streams are being rendered, let's add user controls like mute, camera toggle, and leave call to enhance the user experience! 🚀

step 8:Add user controls (Mute, Camera Toggle, Leave Call, etc.)
To improve the user experience, we will add controls that allow users to:
✅ Mute/Unmute their microphone 🎤
✅ Turn their camera ON/OFF 📷
✅ Leave the call 🚪

🛠️ What This Code Does?
✅ Provides UI buttons for Mute, Camera Toggle, and Leave Call.
✅ Allows users to enable/disable screen sharing.
✅ Displays call duration, participant list, and layouts.
✅ Auto-turns ON the camera and microphone when joining.

🎯 Conclusion
Congratulations! 🎉 You have successfully built a fully functional video calling app using React and ZEGOCLOUD SDK. 🚀

Through this guide, you have learned how to:
✅ Set up a ZEGOCLOUD account and create a project.
✅ Install and integrate the ZEGOCLOUD React SDK.
✅ Join a room and manage audio/video streams.
✅ Render video streams and add user controls (Mute, Camera Toggle, Leave Call).

You can further improve your app by:
🎨 Customizing the UI to match your branding.
🔐 Adding authentication for secure calls.
📡 Integrating real-time chat for better user interaction.

Now, you’re all set to build and enhance your own video calling experience! 🚀🔥

Happy coding .