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

#zegocloud #react

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