Published 2 months ago

Build a Blazing-Fast Video Calling App in React with ZEGOCLOUD SDK

Software Development

Build a Blazing-Fast Video Calling App in React with ZEGOCLOUD SDK

Video calling is a must-have feature in today's web applications. This tutorial guides you through building a video call app in React using the ZEGOCLOUD SDK, enabling features like room creation, joining calls, and link sharing.

Step 1: Setting Up Your React Project

Start by creating a new React project using Vite (Create React App is also an option):

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

Next, install the ZEGOCLOUD SDK and React Router:

npm install @zegocloud/zego-uikit-prebuilt react-router-dom

Step 2: Obtain ZEGOCLOUD Credentials

Navigate to the ZEGOCLOUD Console.
Sign up and create a new project.
Copy your App ID and Server Secret.

Create a .env file in your project's root directory and add:

APP_ID=YOUR_APP_ID
SERVER_SECRET=YOUR_SERVER_SECRET

Step 3: Configure Routing

Use React Router to manage navigation between your app's pages. Modify App.jsx:

import './App.css';
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import HomePage from './components/HomePage';
import VideoPage from './components/VideoPage';

function App() {
  const router = createBrowserRouter([
    {
      path: "/",
      element: 
    },
    {
      path: "/room/:id",
      element: 
    }
  ]);

  return (
    <RouterProvider router={router} /> 
  );
}
export default App;

Step 4: Create the Home Page (HomePage.jsx)

This page lets users enter a Room ID and join a call.

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const HomePage = () => {
  const [input, setInput] = useState("");
  const navigate = useNavigate();

  const submitHandler = () => {
    navigate(`/room/${input}`);
  };

  return (
    <div>
      <input
        onChange={(e) => setInput(e.target.value)}
        type='text'
        placeholder='Enter Room ID...'
      />
      <button onClick={submitHandler}>Join Room</button>
    </div>
  );
};
export default HomePage;

Step 5: Implement the Video Call Page (VideoPage.jsx)

This page handles the video call using the ZEGOCLOUD SDK.

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(), "user");

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

  return (
    <div ref={myMeeting} style={{ width: '100%', height: '100vh' }}/>
  );
};
export default VideoPage;

Step 6: Run and Test

Start the development server:

npm run dev

Access http://localhost:5173/ in your browser. Enter a Room ID and join. Share the generated link to connect with others.

Conclusion

This tutorial demonstrated integrating the ZEGOCLOUD SDK into a React application for video calling. You've learned to set up the SDK, create and join rooms, share meeting links, and deploy your app. Expand this app by adding features like screen sharing and chat.

Hashtags: #React # VideoCalling # ZEGOCLOUD # WebRTC # SDK # RealTimeCommunication # JavaScript # AppDevelopment

Software Development

Unveiling the Haiku License: A Fair Code Revolution

Dive into the innovative Haiku License, a game-changer in open-source licensing that balances open access with fair compensation for developers. Learn about its features, challenges, and potential to reshape the software development landscape. Explore now!

Software Development

Leetcode - 1. Two Sum

Master LeetCode's Two Sum problem! Learn two efficient JavaScript solutions: the optimal hash map approach and a practical two-pointer technique. Improve your coding skills today!

Business, Software Development

The Future of Digital Credentials in 2025: Trends, Challenges, and Opportunities

Digital credentials are transforming industries in 2025! Learn about blockchain's role, industry adoption trends, privacy enhancements, and the challenges and opportunities shaping this exciting field. Discover how AI and emerging technologies are revolutionizing identity verification and workforce management. Explore the future of digital credentials today!

Software Development

Unveiling the FSF Unlimited License: A Fairer Future for Open Source?

Explore the FSF Unlimited License: a groundbreaking open-source license designed to balance free software distribution with fair developer compensation. Learn about its origins, strengths, limitations, and real-world impact. Discover how it addresses the challenges of open-source sustainability and innovation.

Your Job, Your Community