DEV Community: Anand

Integrating ZEGOCLOUD in React.js: A Complete Guide to Video Calling Website in Minutes

Anand — Wed, 10 Dec 2025 14:48:10 +0000

Build a Video Calling WebApp in React.js using ZEGOCLOUD (UIKIT).

Introduction

Video calling has become a must-have feature in modern applications — from social platforms and educational tools to telemedicine services and team collaboration systems. But the biggest challenge in creating such features is its complexity. Don't worry there is a simple solution to this complex problem and that's ZEGOCLOUD.

With just a few lines of code, you can integrate:

1:1 video calls
Group meetings
Live streaming
Multiple rooms
In-app chat
Audio calls …and many more — all powered by ZEGOCLOUD.

One of the best things about ZEGOCLOUD is it instantly provides 10,000 free minutes to experiment, test, or even launch a basic version of an app. Perfect for solo developers, startups, or anyone trying to build things faster.

In this article, I'll make you walk through the process of building a fully functional React.js video calling app from scratch. No complicated setup and no confusing code, just simply follow the steps and paste the snippets exactly as they are.

By the time you finish reading, you’ll be having a working video calling app built in React.js — clean, simple, and production-ready.

So let’s dive in!

Prerequisites.

Before we start, make sure you have:

Node.js & npm installed
Basic React.js knowledge
ZEGOCLOUD account

Steps

Step 1: Create a New React App

npm create vite@latest react-video-app --template react
cd react-video-app
npm install

Install ZegoCloud npm package

npm install @zegocloud/zego-uikit-prebuilt

Now
Start the dev server:

npm run dev

You can see your frontend running on localhost:5173.

Step 2: Create Your zegoCloud Account.

Create an account on ZegoCloud

Step 3: Get AppId and ServerSecret.

You need to create your first project then you can select use case for app like voice and video call, video conference, live streaming, in app-chat etc. As this article is about Video call webapp creation, we will select Voice & video Call.

After the project is created you get the AppId and ServerSecret for the project.

Step 3: Code Part.

Since you have got your AppId and ServerSecret, let's move to the Project that we created in step 1.

Create a .env file at root of the project and add variables for AppId and ServerSecret

VITE_APP_ID=YOUR_APP_ID
VITE_SERVER_SECRET=YOUR_SERVER_SECRET

Complete Code

Move to App.jsx file and add the following Code.


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

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

export function getUrlParams(url = window.location.href) {
  let urlStr = url.split("?")[1];
  return new URLSearchParams(urlStr);
}

export default function App() {
  const roomID = getUrlParams().get("roomID") || randomID(5);
  let myMeeting = async (element) => {
    // generate Kit Token
    const appID = Number(import.meta.env.VITE_APP_ID);
    const serverSecret = import.meta.env.VITE_SERVER_SECRET;

    const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(
      appID,
      serverSecret,
      roomID,
      randomID(5),
      randomID(5)
    );

    // Create instance object from Kit Token.
    const zp = ZegoUIKitPrebuilt.create(kitToken);
    // start the call
    zp.joinRoom({
      container: element,
      sharedLinks: [
        {
          name: "Personal link",
          url:
            window.location.protocol +
            "//" +
            window.location.host +
            window.location.pathname +
            "?roomID=" +
            roomID,
        },
      ],
      scenario: {
        mode: ZegoUIKitPrebuilt.GroupCall, // To implement 1-on-1 calls, modify the parameter here to [ZegoUIKitPrebuilt.OneONoneCall].
      },
    });
  };

  return (
    <div
      className="myCallContainer"
      ref={myMeeting}
      style={{ width: "100vw", height: "100vh" }}
    ></div>
  );
}

Code Explanation

This function creates a random string, which we use as a room ID or user ID.

This gets the parameters from the URL like localhost:5173/?roomID=11111, getUrlParams().get("roomID"); returns "12345".

roomlD comes from the URL or is randomly generated. If no roomlD exists then read AppId and ServerSecret from .env file.

generateKitTokenForTest() creates a temporary token to connect to ZegoCloud.

ZegoUIKitPrebuiIt.create kitToken gives you an object that can manage the call.

zp.joinRoom({ ...}) starts the video call.

sharedLinks - Generates a link that others can click to join.

scenario.mode - We can choose Group Call or One-on-one Call.

Final output

For loop vs filter reduce

Anand — Mon, 14 Apr 2025 04:14:37 +0000

Imagine you are in an interview and the interviewer shows you two code... one using for loop and another using filter + reduce.. The code is to find the sum of all even number from array. What will run faster?

here is the code

using foor loop..

using filter reduce...

So now what will you answer??

So lets test it live and see which will run faster

So as you can see for loop run faster than filter + reduce..

But what is exactly the reason that filter reduce running slower than for loop

The reason:

filter will create a array first so it will get all even number and then it will start finding sum of array... this way it works on two loop causing to run slower..

I have made whole video about this

https://youtube.com/shorts/qJ6rLpSrLwY?si=qAfUZdJa6yrIA7qm

Realtime QUIZ webapp using Socket.io

Anand — Tue, 26 Dec 2023 20:04:55 +0000

Vs code shortcuts you don't want to miss🤔

Anand — Thu, 26 Oct 2023 17:03:38 +0000

In this post I am sharing three vs code shortcuts that will definitely boost your efficiency and decrease the time consumption on basic repeatetive things.

So here It starts😃

1) Ctrl + W
This shortcut helpes in closing the opened file in a project so you cna ose the opened file with this shortcut.

2) Ctrl + P
This shortcut is helpful in finding the file in a second without need of checking whole file directory.

3) Ctrl + B

Through this shortcut you can toggle side bar(file explorer) ie you can show and hide the Vscode file explorer.

Try these shortcuts as they might look simple but I literally found these shortcuts very very useful.

You can check video here

https://youtube.com/shorts/SZnUuc8VvEw

Theme Extension for Vs code

Anand — Tue, 02 Aug 2022 04:37:00 +0000

I have created this vs code extension which is a theme extension.

You can download this from here.

or by Searching Green theme on vs code extension tab.

Any feedback or improvements for this?? Comment pls

My extension is live on microsoft Edge

Anand — Mon, 27 Dec 2021 17:35:50 +0000

This is a free Microsoft edge extension I have created. I checked today it got 400+ installs.

live link

Typing animation in website with 4 lines of code

Anand — Tue, 21 Dec 2021 17:50:55 +0000

So if you want to have typing animation to your website you can use typed.js
You can watch this 50 seconds video for reference.

https://youtube.com/shorts/04bRWYV8RZ8?feature=share