In this article I will show you how we integrated for and functionality with my Full Stack Whatsapp Clone Video on Youtube. Zegocloud’s services Video Call Voice Call Features of Whatsapp Clone Login with Google using Firebase: Seamlessly sign in with your Google account via Firebase integration. Switch between multiple databases using Prisma: Customize your database preferences to suit your needs effortlessly. Send and Receive Messages using Sockets: Real-time messaging capabilities using Socket.io for instant communication. Voice Call and Video Call Feature: Enjoy crystal clear voice and video calls within the app. This functionality is built using Zegocloud Voice Call and Video Call services. Voice Notes with Live Audio Waveforms: Send and receive voice notes accompanied by live audio waveforms for an enhanced messaging experience. Support for Emoji: Express yourself with a wide range of emojis to add fun and emotions to your conversations. Send Images: Share images with your friends and loved ones effortlessly. Online/Offline Functionality: Easily identify the online and offline status of your contacts. Search Messages: Quickly find specific messages using the search functionality. Capture Photo From Camera: Take instant photos using your device's camera and send them instantly. Message Read Status: Know when your messages have been read by your recipients. Message Time: Stay updated with the time stamps of messages for better organization. Tech Stack of Whatsapp Clone Next.js Sockets Tailwind CSS Node.js Express Firebase Prisma PostgreSQL Zegocloud Voice Call SDK Zegocloud Video Call SDK App Screenshots Introducing Zegocloud ZEGOCLOUD is a designed for facilitating video calls. By granting developers access to a comprehensive suite of and , ZEGOCLOUD empowers them to effortlessly construct their own video and voice calling applications. cloud-native solution UIKIt’s SDKs Creating Zegocloud Account Head over to and create an account. Zegocloud provides free 10,000 minutes of free trial to get you started. Zegocloud Create a new Zegocloud Project Now in your click on create your first project as shown in the image below. Zegocloud console Select a project use case Zegocloud provides various pre configured use cases for your apps; we are going to select the Video and Voice Call Option and click Next. Project Name and Scnearios Now in the next screen you need to give a unique project name. We are going to give the name as whastasppclone. Next, we will select the project Scenario. Zegocloud provides two scenarios: The UIKIT’s and the SDKS’s. Here we are going to select the Start with the Customs SDK’s option. With this Zegolcoud will start configuring your app. This process will take few minutes. Now all the things are configured for Zegocloud. Install the Zegocloud package for the Whatsapp Clone 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. Import the ZEGOCLOUD SDK into your project and initialize it In your project's container.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. Now you need the APP_ID and the SERVER_ID from your zegocloud project configuration screen. You need to paste those in the Next Config file in your Next.js App 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. 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. 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. 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 With this we have successfully integrated the Voice Call and Video Call in our Whatsapp Clone uisng Zegocloud’s Voice and Video Call SDK’s. 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 You can follow along my Youtube Tutorial to create the entire Whatspp Clone using Zegocloud’s SDK’s. https://www.youtube.com/watch?v=keYFkLycaDg&embedable=true

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.

Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More

Optimizing SEO in Next.js: Techniques for Better Search Engine Visibility

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to add Video Call and Voice Call Functionality in a Full Stack Whatsapp Clone

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

30 Next.js Interview Questions: Get Ready for Your Dream Job

5 reasons to consider Next.js for your next projects

5 Reasons to Convert from React to Next.js

50+ GitHub Repositories Every Front-End Developer Needs

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

30 Next.js Interview Questions: Get Ready for Your Dream Job

5 reasons to consider Next.js for your next projects

5 Reasons to Convert from React to Next.js

50+ GitHub Repositories Every Front-End Developer Needs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps