DEV Community

Coding 4 Dev
Coding 4 Dev

Posted on • Edited on

Integrating ZEGOCLOUD Video Calling in React.js — Complete Guide

#javascript #react #webdev #tutorial

Video calling is now a core part of modern web apps, and integrating it shouldn’t require hundreds of lines of code or complex backend logic.
That’s exactly where ZEGOCLOUD UIKit shines.

With just a few lines of React code, you can instantly add:

  • 1-on-1 video calling
  • Group video calls
  • Room links
  • Auto UI rendering
  • Cross-platform support

In this guide, we’ll build a complete React.js video calling app using ZEGOCLOUD’s UIKit.
You don’t need to write any signaling logic — everything works out of the box.

Project Setup 

npx create-react-app zegocall
cd zegocall
Enter fullscreen mode Exit fullscreen mode

Install ZEGOCLOUD UIKit:

npm install @zegocloud/zego-uikit-prebuilt
Enter fullscreen mode Exit fullscreen mode

Open ZEGOCLOUD official Website

Screenshot of ZEGOCLOUD dashboard homepage

Create an App on ZEGOCLOUD

When you create a free ZEGOCLOUD account, you also get 10,000 free minutes, perfect for testing or even deploying a basic version of your video calling product.

After signing up on ZEGOCLOUD, copy:

  • AppID
  • AppSign

You will paste these inside the React code.

Full React Code

Create or replace App.js with the following code exactly as required:

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) => {

      const appID = "";          // Your AppID here
      const serverSecret = "";   // Your AppSign here

      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.GroupCall,
        },
      });
  };

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

Explanation

1. randomID()

Generates a unique Room ID if the user doesn’t provide one.

2. getUrlParams()

Reads roomID from the URL so users can join the same room.

3. generateKitTokenForTest

Creates a temporary token for testing (perfect for development).

4. zp.joinRoom()

Loads the complete video UI automatically into the container.

Folder Structure 

src/
 ├── App.js
 ├── index.js
 └── ...
Enter fullscreen mode Exit fullscreen mode

Running the Project 

npm start
Enter fullscreen mode Exit fullscreen mode

Website will open at:

http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

Video Call UI Preview

Screenshot of ZEGOCLOUD video call UI with participants and controls

Joining a Call

Share the link:

http://localhost:3000/?roomID=YOURROOMID
Enter fullscreen mode Exit fullscreen mode

Anyone visiting the same link instantly joins the same video call.

Switching Between Call Types

For 1-on-1 call: 

mode: ZegoUIKitPrebuilt.OneONoneCall
Enter fullscreen mode Exit fullscreen mode

For group call (default): 

mode: ZegoUIKitPrebuilt.GroupCall
Enter fullscreen mode Exit fullscreen mode

Your React app now supports:

✔ Real-time video calling
✔ Room links
✔ High-quality UI
✔ Multi-user rooms
✔ Zero backend setup

Conclusion

This is the simplest way to integrate a complete real-time video calling system into a React application.

ZEGOCLOUD handles everything — signaling, UI, media streaming, room management — letting you focus on your app, not the infrastructure.

Get ZEGOCLOUD HERE

Get 10000 free mins with UIKits:http://bit.ly/42cbwyi

Learn more about ZEGOCLOUD:http://bit.ly/4noN1GK

ZEGOCLOUD video call SDK &API allows you to easily build your live video chat apps within minutes.

📌 Video Tutorial

https://youtu.be/TyV78SY63Pc?si=_tj1lF8AodhWWapR

📌 GitHub Source Code

https://github.com/coding4dev/VideoChatWebApp

Top comments (0)