How to Build a Video and Voice Call App with ZEGOCLOUD in React

Introduction

Video and voice communication is now a key feature in many applications, whether for virtual meetings, social networking, or customer support. https://www.zegocloud.com/ makes it easy for developers to integrate these features into their apps with minimal effort.
In this tutorial, we’ll learn how to integrate ZEGOCLOUD's Video & Voice SDK in a React app. By the end, you’ll have a fully functional video calling app where users can create or join calls easily.

Let's get started! 🚀

Setting Up the Environment

1️⃣ Sign Up & Set Up ZEGOCLOUD

Step 1: Create an Account
First, sign up on ZEGOCLOUD's official website and create a free account.

Step 2: Create a New Project
1️⃣ Once logged in, go to the ZEGOCLOUD Admin Console.
2️⃣ Click on "Create a New Project" and enter your project name.
3️⃣ After creating the project, you will get your App ID and App Sign. (Copy these, we’ll use them in our code!)

2️⃣ Setting Up the React Project

Step 3: Create a React App
If you don’t have a React project yet, create one using:

4) Create a new project and get your AppID and AppSign—these will be required for integrating the SDK.

1️⃣ Create a New React Project:
If you don’t have a React project yet, create one using.

npx create-react-app zegocloud-video-call
cd zegocloud-video-call

Now, install the required dependencies:

npm install zego-uikit-prebuilt-call

3️⃣ Implementing the Video Call Feature

Step 4: Create a Call Component
Now, let's create a VideoCall.js file inside the src folder and add the following code:

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

const VideoCall = ({ callID }) => {
  const myMeeting = async (element) => {
    const appID = YOUR_APP_ID; 
    const serverSecret = "YOUR_SERVER_SECRET";

    const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(
      appID, serverSecret, Date.now().toString(), "User"
    );

    const zp = ZegoUIKitPrebuilt.create(kitToken);
    zp.joinRoom({
      container: element,
      sharedLinks: [{ name: "Copy Link", url: window.location.href }],
      scenario: { mode: ZegoUIKitPrebuilt.OneONoneCall },
    });
  };

  return (
    
      Join a Video Call
      
    
  );
};

export default VideoCall;

Code Explanation:
✅ ZegoUIKitPrebuilt.generateKitTokenForTest(): Generates a token to authenticate the user.
✅ zp.joinRoom({}): Initializes the video call with the given configuration.
✅ container: element: Renders the call interface inside the given div.

4️⃣ Adding Call ID Validation (Error Handling)
Before joining a call, we need to validate the Call ID to prevent users from joining an empty session.

Step 5: Update App.js with Validation
Modify App.js like this:

import React, { useState } from "react";
import VideoCall from "./VideoCall";

function App() {
  const [callID, setCallID] = useState("");
  const [error, setError] = useState("");

  const handleJoin = () => {
    if (!callID.trim()) {
      setError("Please enter a valid Call ID.");
    } else {
      setError("");
      window.location.href = `/call/${callID}`;
    }
  };

  return (
    
      ZEGOCLOUD Video Call App
       setCallID(e.target.value)}
      />
      Join Call
      {error && {error}}
    
  );
}

export default App;

✅ Code Improvements:
✅ Call ID validation (prevents empty calls)
✅ Error message display if Call ID is missing

5️⃣ Running and Testing the App

Step 6: Start the React App
Run the following command in the terminal:

npm start

1️⃣ Open the browser and enter a Call ID (e.g., test123).
2️⃣ Open the same link in another browser/tab.
3️⃣ Enjoy real-time video calling! 🎥🎤

6️⃣ Deploying the App (Optional)
After testing, you can deploy your app for free using Vercel or Netlify.

Step 7: Deploy on Vercel
1️⃣ Install Vercel CLI:

npm install -g vercel

2️⃣ Deploy the app:

vercel --prod

Conclusion
Congratulations! You have successfully built a React-based video call app using ZEGOCLOUD! 🚀

Next Steps:
Customize the UI for a better user experience.
Add authentication to restrict call access.
Implement group calls & screen sharing for advanced features.

Let me know in the comments if you need any help! 😊

Overall, ZEGOCLOUD's platform offers an innovative and powerful solution for developers looking to create engaging, real-time audio and video experiences in their applications. With its user-friendly interface and comprehensive set of tools, ZEGOCLOUD makes it easy to build high-quality, interactive applications that offer users a seamless and enjoyable communication experience.