In this blog post, I will show you how to create a video call app using ZEGOCLOUD and React. For context, ZEGOCLOUD is a cloud-based that provides developers with a set of APIs and SDKs to easily build video calling applications. video call platform Prerequisites Before you start, you will need to: and project. Create a ZEGOCLOUD account Have a basic understanding of React. Creating a ZEGOLCOUD account and project Step 1: Head over to the website and create an account. ZEGOCLOUD Step 2: Now, create a new project and grab the appId and serversecret from the project dashboard. Creating a Video Call App The following steps show you how to create a video call app using ZEGOCLOUD and React: Create a new React project. Install the ZEGOCLOUD React SDK. Import the ZEGOCLOUD SDK into your project. Join a room. Create a local audio and video stream. Start a video call. Render the video streams. Step 1: Create a new React project You can create a new React project using the following command: npx create-react-app video-call-app This will create a new directory called video-call-app with a basic React project. Step 2: Install the ZEGOCLOUD React SDK You can install the ZEGOCLOUD React SDK using the following command: npm i zego-express-engine-webrtc This will install the ZEGOCLOUD React SDK into your project. Step 3: Import the ZEGOCLOUD SDK into your project and initialize it In your project's index.js file, import the ZEGOCLOUD SDK and initialize the zegocloud app by the function as follows: import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const zg = new ZegoExpressEngine(
      process.env.NEXT_PUBLIC_ZEGO_APP_ID,
      process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
    );
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
}

export default App; In the above step, we have utilized the useEffect hook to initialize the ZegoClouds library by passing the app ID and server secret as parameters. Step 4: Join a Room import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );
      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} Now in this step, we have joined the passing of the token, userId, and userName, and the userUpdate status. Step 5: Create a local audio and video stream. import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );
      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );

      const localStream = await zg.createStream({
        camera: {
          audio: true,
          video: true,
        },
      });
      // Get the audio tag.
      const localAudio = document.getElementById("local-video");

      const videoElement = document.createElement("video");
      videoElement.id = "local-video";
      videoElement.className = "h-28 w-32";
      videoElement.autoplay = true;
      videoElement.muted = false;

      videoElement.playsInline = true;

      localAudio.appendChild(videoElement);

      const td = document.getElementById("audio-local");
      td.srcObject = localStream;
    };
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} We have created the video elements here where we will be actually displaying the video streams of our local webcam. Step 6: Start a video call. import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );
      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );

      const localStream = await zg.createStream({
        camera: {
          audio: true,
          video: true,
        },
      });
      // Get the audio tag.
      const localAudio = document.getElementById("local-video");

      const videoElement = document.createElement("video");
      videoElement.id = "local-video";
      videoElement.className = "h-28 w-32";
      videoElement.autoplay = true;
      videoElement.muted = false;

      videoElement.playsInline = true;

      localAudio.appendChild(videoElement);

      const td = document.getElementById("audio-local");
      td.srcObject = localStream;
    };

    const streamID = "123" + Date.now();

    zg.startPublishingStream(streamID, localStream);
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} Here we have started publishing our local stream to the specified room. Step 7: Render the video streams. import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );

      zg.on(
        "roomStreamUpdate",
        async (roomID, updateType, streamList, extendedData) => {
          if (updateType == "ADD") {
            const rmVideo = document.getElementById("remote-video");
            const vd = document.createElement("video");
            vd.id = streamList[0].streamID;
            vd.autoplay = true;
            vd.playsInline = true;
            vd.muted = false;
            if (rmVideo) {
              rmVideo.appendChild(vd);
            }
            zg.startPlayingStream(streamList[0].streamID, {
              audio: true,
              video: true,
            }).then((stream) => {
              vd.srcObject = stream;
            });

            // New stream added, start playing the stream.
          } else if (updateType == "DELETE" && zg && streamList[0].streamID) {
            zg.stopPublishingStream(streamList[0].streamID);
            zg.logoutRoom("123");
          }
        }
      );

      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );

      const localStream = await zg.createStream({
        camera: {
          audio: true,
          video: true,
        },
      });
      // Get the audio tag.
      const localAudio = document.getElementById("local-video");

      const videoElement = document.createElement("video");
      videoElement.id = "local-video";
      videoElement.className = "h-28 w-32";
      videoElement.autoplay = true;
      videoElement.muted = false;

      videoElement.playsInline = true;

      localAudio.appendChild(videoElement);

      const td = document.getElementById("audio-local");
      td.srcObject = localStream;
    };

    const streamID = "123" + Date.now();

    zg.startPublishingStream(streamID, localStream);
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} Now as soon as the other user joins the room, we want to display the upcoming video stream and render it to the DOM. Conclusion In this blog post, we have shown you how to create a video call app with Zegocloud and React. We have covered the following topics: Setting up your development environment Integrating the Zegocloud video call web APIs Building a simple video call app We hope that this blog post has helped you to get started with building video call apps using Zegocloud and React. For more information, please refer to the Zegocloud . documentation

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

How to Build a Video Call App with ZEGOCLOUD and React

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Compilation of the Best Full-Stack Clones: Amazon, Whatsapp, Netflix, Spotify & More

10 Steps to Build a High-Value Startup with $44k Free Credits

125 Stories To Learn How To Do X

213 Stories To Learn About Guide

181 Stories To Learn About Beginners Guide

A Compilation of the Best Full-Stack Clones: Amazon, Whatsapp, Netflix, Spotify & More

10 Steps to Build a High-Value Startup with $44k Free Credits

125 Stories To Learn How To Do X

213 Stories To Learn About Guide

181 Stories To Learn About Beginners Guide

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps