Build Live stream or video call app in React.js in few minutes

#react #webdev #zegocloud #javascript

Build a Live stream 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.

This guide walks you through creating a live streaming app, step by step — 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 code examples available for each.
By following this tutorial, we'll have a fully operational live streaming application in React. 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.

Download and install from the official site:
nodejs
Choose LTS version.

This installs:
node
npm
npx

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

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.
Lets now open terminal and run the script

npm create vite@latest .

We then need to give package name in the prompt, any name you prefer and choose React from the second prompt and then Javascript/Typescript from the third prompt.
This will install all the required packages and dependencies in your folder, live-stream-app-react in our case.

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 dev

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! 🎥
Youtube video

And before leaving, we can also connect in github:
My github

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