DEV Community: Emmanuel Ezeigbo

How to Build a Live Streaming App using ZEGOCLOUD in React.js

Emmanuel Ezeigbo — Fri, 28 Mar 2025 06:02:28 +0000

Live streaming has exploded in popularity — from gaming and concerts to webinars and social media. If you’ve ever wanted to build your own live streaming platform, now’s your chance.

In this guide, I’ll walk you through creating a fully functional live streaming app using ZEGOCLOUD’s SDK in React.js. By the end, you’ll have a working app where hosts can stream, co-hosts can join, and audiences can watch — all in real time.

No prior streaming experience? No problem. I’ll break it down step by step.

What You’ll Need

Before coding, make sure you have:

Node.js installed (Download from https://nodejs.org/)
A ZEGOCLOUD account (Free sign-up https://zegocloud.com/ )
Basic React knowledge (You don’t need to be an expert) Got everything? Great. Let’s move on.

Step 1: Set Up Your ZEGOCLOUD Account

ZEGOCLOUD provides the backend infrastructure for real-time streaming. Here’s how to get started:

Go to https://zegocloud.com/ and sign up.

You’ll get 10,000 free minutes (more than enough for testing).

Create a new project in the dashboard.

Choose “Live Streaming” as your use case.

Scroll down, click Next.

Note your App ID and Server Secret.

You’ll need these later to connect your React app.

Step 2: Set Up Your React Project

We’ll use Vite for a faster setup than Create React App.

Open your terminal and run:

npx create vite@latest

Move into your project folder:

cd my-app

Install dependencies:

npm install

Add ZEGOCLOUD’s SDK:

npm install @zegocloud/zego-uikit-prebuilt

Start the development server:

npm run dev

Press Ctrl + Click the link to open your app in the browser.

Your React project is now running!

Step 3: Get Your ZEGOCLOUD Credentials

Remember the App ID and Server Secret from earlier?

Go back to your ZEGOCLOUD Console.
Find your project and copy the credentials.
Keep them secure — they authenticate your app with ZEGOCLOUD’s servers.

Step 4: Implement the Live Streaming Feature

Now, the exciting part — building the live stream!

Replace the code in App.jsx with this:

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

Key Features of This Code:

Random Room ID Generation — Each stream gets a unique ID.
Role-Based Access — Host, Cohost, and Audience have different permissions.
Shareable Links — Viewers can join via generated URLs.
Built-In UI Controls — ZEGOCLOUD handles camera, mic, and screen sharing.

Step 5: Test Your Live Streaming App

Replace YOUR_APP_ID and YOUR_SERVER_SECRET with your actual credentials.
Run the app:

npm run dev

Open two browser tabs:
One as Host (default)
One as Audience (use the shared link)
Start streaming!

You should now see:

Host view (with camera/mic controls)
Audience view (watch-only mode)

Next Steps: Customize & Improve

Want to make this even better? Try these upgrades:

Custom UI — Style the player to match your brand.
Recording — Save streams for later viewing.
Monetization — Add subscriptions or donations.
Moderation — Kick users or restrict chats. ZEGOCLOUD’s docs (https://www.zegocloud.com/docs) have everything you need to expand your app.

Final Thoughts

You’ve just built a professional live streaming app in React with ZEGOCLOUD’s SDK. No complex server setup, no fuss — just a working live stream in minutes.

What will you create with it? A gaming platform? A webinar tool? The possibilities are endless.

How to Build a Video Call Application using ZEGOCLOUD SDK in React.js

Emmanuel Ezeigbo — Fri, 21 Mar 2025 04:38:17 +0000

In this tutorial, we're going to build a fully functional video call application using the ZEGOCLOUD SDK in React.js. If you've ever wondered how apps like Zoom or Google Meet handle video calls so seamlessly, you're in the right place. ZEGOCLOUD provides powerful, developer-friendly UIKits that make integrating real-time communication features a breeze. And the best part? We'll have this up and running in just a few steps!
By the end of this guide, you'll have a working video call app that you can share with friends, colleagues, or even use for your next virtual meeting. Let's get started!

Setting Up Your ZEGOCLOUD Account

First things first, you'll need a ZEGOCLOUD account. Head over to https://zegocloud.com and either log in or sign up if you're new. Signing up is quick, and you'll get 10,000 free minutes to use for your video call applications. That's more than enough to build and test your app without worrying about costs.

Once you're logged in, you'll land on the ZEGOCLOUD Console. This is where you'll manage your projects, access your API credentials, and explore all the cool communication solutions ZEGOCLOUD has to offer. Take a moment to familiarize yourself with the dashboard - it's your command center for everything video call-related.

Prerequisites

Before we get into coding, let's make sure you have everything you need:
Node.js installed on your machine. If you don't have it yet, grab it from nodejs.org.
A ZEGOCLOUD account (which you just set up - nice work!).
Basic knowledge of React and JavaScript. If you're new to React, don't sweat it! This tutorial is beginner-friendly, and I'll walk you through every step.

Step 1: Set Up the React Project

We'll use Vite to create our React project. Vite is fast, lightweight, and perfect for modern web development. If you haven't used it before, you're in for a treat.

Open your terminal and run the following command to create a new React project:

npx create-vite@latest video-call-app --template react

Go into your project folder:

cd video-call-app

Install the project dependencies:

npm install

Now, let's add the ZEGOCLOUD SDK package:

npm i @zegocloud/zego-uikit-prebuilt --save

Once everything is installed, start your development server:

npm run dev

Press Ctrl + Click on the link in your terminal to open the app in your browser.

And just like that, your React project is up and running! Now, let's add the magic - video call functionality.

Step 2: Get Your ZEGOCLOUD Credentials

To connect your app to ZEGOCLOUD's services, you'll need two things: your App ID and App Sign. Here's how to get them:
Go to your ZEGOCLOUD Console.
Create a new project. You'll be asked what kind of app you're building - choose Video Call and click Next.

Once your project is created, you'll be redirected to a dashboard where you can find your App ID and App Sign. Keep these credentials handy; we'll need them in the next step.

Step 3: Implement the Video Call Feature

Now for the fun part - adding the video call functionality! Open your App.jsx file and replace its content with the following code:

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 myMeeting = async (element) => {
     // generate Kit Token
      const appID = YOUR_APP_ID;
      const serverSecret = "YOUR_SERVER_SECRET";
      const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));

     // Create instance object from Kit Token.
      const zp = ZegoUIKitPrebuilt.create(kitToken);
      // start the call
      zp.joinRoom({
        container: element,
        sharedLinks: [
          {
            name: 'Personal link',
            url:
             window.location.protocol + '//' + 
             window.location.host + window.location.pathname +
              '?roomID=' +
              roomID,
          },
        ],
        scenario: {
          mode: ZegoUIKitPrebuilt.GroupCall, // To implement 1-on-1 calls, modify the parameter here to [ZegoUIKitPrebuilt.OneONoneCall].
        },
      });

  };
  return (
    <div
      className="myCallContainer"
      ref={myMeeting}
      style={{ width: '100vw', height: '100vh' }}
    ></div>
  );
}

Replace YOUR_APP_ID and YOUR_SERVER_SECRET with the credentials you got from the ZEGOCLOUD Console. Save the file, refresh your browser, and voilà-your video call app is live!

Conclusion

And there you have it - a fully functional video call app built with ZEGOCLOUD SDK in React.js! In just a few steps, you've integrated real-time video communication into your app, thanks to ZEGOCLOUD's intuitive tools. Whether you're building a video conferencing app, a virtual classroom, or just experimenting with real-time communication, ZEGOCLOUD makes it easy.
But don't stop here! ZEGOCLOUD's SDK offers tons of other features like live streaming, voice calls, and messaging. You can customize your app, add new features, or even integrate it into a larger project. The possibilities are endless.
So, what's next? Share your app with friends, test it out, and start building the future of real-time communication. And if you run into any questions, ZEGOCLOUD's documentation and community are great resources to lean on.

React vs Angular: In My Opinion (IMO)

Emmanuel Ezeigbo — Thu, 27 Jun 2024 13:35:22 +0000

Two of the most prominent contenders of the Javascript ecosystem are React.js and Angular. Having dabbled in both, I'd like to share my perspective on their strengths and weaknesses, along with my excitement about using React.js at the HNG Internship program.

React vs Angular

Library vs Framework: At its core, React.js is a JavaScript library focused on building user interfaces (UI) with reusable components. Angular, on the other hand, is a full-fledged framework offering a more comprehensive set of tools for building complex web applications.
Learning Curve: React's simplicity and focus on components make it easier to learn, especially for beginners. Angular, with its built-in features and steeper learning curve, might take longer to master.
Data Binding: React utilizes a one-way data binding approach, giving you more control over data flow. Angular's two-way data binding streamlines development but can sometimes lead to unexpected behavior.
Performance: React's virtual DOM ensures efficient rendering updates, making it generally faster than Angular.

My Experience with React.js

I've found React.js to be a joy to work with. Its component-based architecture promotes code reusability and maintainability. The vast community and extensive ecosystem of libraries provide solutions for almost any need. This flexibility allows for a more customized development experience.

HNG Internship

I'm happy to be participating in the HNG Internship Program using React.js. The program's focus on this in-demand library aligns perfectly with my development goals. I expect to hone my React skills, collaborate with talented developers, and contribute to a real-world project.
While both React.js and Angular are excellent tools, React's focus on simplicity, performance, and a thriving community makes it a perfect fit for me. Also if you're a company looking to hire talented developers, check out the HNG hiring platform here: https://hng.tech/hire.