Build a Live streaming app in React with ZEGOCLOUD 🚀

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. What makes ZEGOCLOUD particularly attractive is their generous offer: every new account receives 10,000 free minutes, 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. The process is straightforward — simply 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 Nextjs, Angular, Vue and also with Wordpress and HTML with framework or language specific code examples available for each. This means you can build video and audio calling features using whichever technology stack suits your needs best.

By following 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

Let's make sure we have everything we need before we start:

1️⃣ Node.js

Make sure Node.js is installed on our machine. If it's not already installed, we will use this command/script:

npm install -g nodejs

To check if Node.js is installed or needs an update, we need to run the script:

node -v  # Check installed version

npm update nodejs  # Update Node.js if needed

Setting up React with Vite

1. First of all, lets create an empty folder with any name, lets say live-stream-app-react and open in your editor like Visual studio Code.




2. Lets now open terminal and run the script
   
   

npm create vite@latest .

We then need to choose React from the first prompt and then Javascript/Typescript from the second prompt.

This will install all the required packages and dependencies in your folder, live-stream-app-react in our case.

3️⃣ Lets sign up for a ZEGOCLOUD Account for free

To use ZEGOCLOUD SDK, we need to sign up for a free account and get our App ID and App Sign here:

🔗 Sign Up on ZEGOCLOUD

After signing up, we will receive 10,000 free minutes to test and deploy our live streaming application.

Let’s Start: Building a live streaming App with ZEGOCLOUD in React

Now that we have everything set up, let’s start integrating ZEGOCLOUD into our React project step by step.

Step 1: Install the ZEGOCLOUD SDK

To integrate ZEGOCLOUD into your React project, we will need to install the SDK using the following script:

npm install @zegocloud/zego-uikit-prebuilt

Step 2: Get our AppID and ServerSecret

Lets now log in to ZEGOCLOUD and navigate to the developer console to obtain our AppID and ServerSecret which we need to use in our project code later to initialize SDK.

⚠️ Important: Lets keep our AppID and ServerSecret private! We need to consider we never share it with anyone or exposing it to others.

Step 3: Initialize the SDK in React

Now, modify your App.jsx/App.tsx file to initialize the ZEGOCLOUD SDK and create a function to start live streaming component.

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 role_str = getUrlParams(window.location.href).get("role") || "Host";

  const role =

    role_str === "Host"

      ? ZegoUIKitPrebuilt.Host

      : role_str === "Cohost"

      ? ZegoUIKitPrebuilt.Cohost

      : ZegoUIKitPrebuilt.Audience;



  let sharedLinks = [];

  if (role === ZegoUIKitPrebuilt.Host || role === ZegoUIKitPrebuilt.Cohost) {

    sharedLinks.push({

      name: "Join as co-host",

      url:

        window.location.protocol +

        "//" +

        window.location.host +

        window.location.pathname +

        "?roomID=" +

        roomID +

        "&role=Cohost",

    });

  }

  sharedLinks.push({

    name: "Join as audience",

    url:

      window.location.protocol +

      "//" +

      window.location.host +

      window.location.pathname +

      "?roomID=" +

      roomID +

      "&role=Audience",

  });

  // generate Kit Token

  const appID = your_app_id;

  const serverSecret = "your_app_secret";

  const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(

    appID,

    serverSecret,

    roomID,

    randomID(5),

    randomID(5)

  );



  // start the call

  let myMeeting = async (element) => {

    // Create instance object from Kit Token.

    const zp = ZegoUIKitPrebuilt.create(kitToken);

    // start the call

    zp.joinRoom({

      container: element,

      scenario: {

        mode: ZegoUIKitPrebuilt.LiveStreaming,

        config: {

          role,

        },

      },

      sharedLinks,

    });

  };



  return (

    <div

      className="myCallContainer"

      ref={myMeeting}

      style={{ width: "100vw", height: "100vh" }}

    ></div>

  );

}

Step 4: Add our AppID and ServerSecret

Now, we need to add our AppID and ServerSecret here in this codeblock of above code in App.jsx/App.tsx:

// generate Kit Token

  const appID = your_app_id;

  const serverSecret = "your_app_secret";

Step 5: Run the App

Now, lets start our project by running the script:

npm run serve

Our live streaming app is now up and running! 🎉

🎬 Want a Video Tutorial?

If you prefer watching a video instead of reading, check out my tutorial on YouTube where I explain the entire process step by step! 🎥

Conclusion

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

I will be coming back with other tutorials regarding Nextjs, Reactjs and so many other things about Frontend and web development. Until then, have a good time my friends.

Warm Regards,

Codeek