Integrating Realtime ZEGOCLOUD SDK in React.js

Source: Dev.to

Introduction

Video calling and live streaming have become must‑have features in today’s applications, and ZEGOCLOUD API simplifies the integration process remarkably. You can implement complete live streaming functionality, create separate rooms, add in‑app chat, and more with minimal code. ZEGOCLOUD offers 10,000 free minutes for every new account—perfect for testing or launching a basic version of your application.

ZEGOCLOUD delivers a smooth development experience regardless of your project’s scale. This guide walks you through creating a live streaming app step by step. Follow the instructions and use the code snippets provided here or from ZEGOCLOUD’s official documentation.

ZEGOCLOUD

The flexibility doesn’t end with React. ZEGOCLOUD supports multiple modern frameworks including Next.js, Angular, Vue, as well as WordPress and plain HTML, with framework‑specific code examples available for each.

By the end of this tutorial, you’ll have a fully operational live streaming application in React—created efficiently and without unnecessary complexity. Let’s dive in! 🚀

Project Setup and Prerequisites

1️⃣ Node.js

Make sure Node.js is installed on your machine. If it isn’t, install it globally:

npm install -g nodejs

Check the installed version and update if necessary:

node -v          # Check installed version
npm update nodejs   # Update Node.js if needed

Setting up React with Vite

1. Create a new folder (e.g., live-stream-app-react) and open it in your editor (VS Code, etc.).
2. Open a terminal in the folder and run:

npm create vite@latest .

3. Choose React from the first prompt, then select JavaScript or TypeScript as desired. Vite will install all required packages and dependencies.

3️⃣ Sign up for a ZEGOCLOUD Account (Free)

To use the ZEGOCLOUD SDK, sign up for a free account and obtain your App ID and App Sign:

🔗 Sign Up on ZEGOCLOUD

After signing up, you’ll receive 10,000 free minutes for testing and deploying your live streaming application.

Let’s Start: Building a Live Streaming App with ZEGOCLOUD in React

Step 1: Install the ZEGOCLOUD SDK

npm install @zegocloud/zego-uikit-prebuilt

Step 2: Get Your AppID and ServerSecret

Log in to ZEGOCLOUD, navigate to the developer console, and copy your AppID and ServerSecret. Keep these values private—do not share them publicly.

Step 3: Initialize the SDK in React

Edit App.jsx (or App.tsx) and add the following code:

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

function randomID(len) {
  let result = "";
  const chars =
    "12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP";
  const maxPos = chars.length;
  len = len || 5;
  for (let i = 0; i  {
    const zp = ZegoUIKitPrebuilt.create(kitToken);
    zp.joinRoom({
      container: element,
      scenario: {
        mode: ZegoUIKitPrebuilt.LiveStreaming,
        config: { role },
      },
      sharedLinks,
    });
  };

  return (
    
  );
}

Note: Replace YOUR_APP_ID and YOUR_APP_SECRET with the values obtained from the ZEGOCLOUD console.

Step 4: Run the App

Start the development server:

npm run dev

Your live streaming app should now be up and running! 🎉

Conclusion

Congratulations! 🎉 You have successfully built a fully functional live streaming app using React and ZEGOCLOUD.

Stay tuned for more tutorials covering Next.js, additional React features, and other front‑end development topics.

Happy coding!