How to Build React Video Chat App with VideoSDK

Introduction

Do you find the existing video-calling apps to be limiting? If yes, why not make your own video chat app that you can use for anything. With the help of VideoSDK, It is very easy to integrate and build your own video calling app with features like chat, poll, whiteboard, and much more.

VideoSDK is a platform that allows developers to create rich in-app experiences such as embedding real-time video, voice, real-time recording, live streaming, and real-time messaging. VideoSDK is available in JavaScript, Reactjs, React-Native, iOS, Android and Flutter to be seamlessly integrated. Video SDK also provides a pre-built SDK, which enables you to integrate real-time communication with your application in just 10 minutes.

In this tutorial, You are going to explore the group calling feature of VideoSDK. You will go through step by step guide on integrating video calling with React Video SDK.

This guide will get you running with the Video SDK video & audio calling in minutes. Let us create a video calling app using ReactJS and VideoSDK.

Prerequisites

Before proceeding, ensure that your development environment meets the following requirements:

VideoSDK Developer Account (Not having one? Follow VideoSDK Dashboard)
Basic understanding of React
React Video SDK
Have Node and NPM installed on your device
The basic understanding of Hooks (useState, useRef, useEffect)
React Context API (optional)

One should have a Video SDK account to generate tokens. Visit Video SDK Dashboard to generate a token

Getting Started with the Code!?

Follow the steps to create the environment necessary to add video chat to your app.

Create a new React app

Create a new React App using the below command

$ npx create-react-app videosdk-rtc-react-app

Install Video SDK

Install the Video SDK using the below-mentioned npm command. Make sure you are in your react app directory before you run this command.

$ npm install "@videosdk.live/react-sdk"

//For the Participants Video
$ npm install "react-player"

Structure of the project

Your project structure should look like this after creating the app with create-react-app

root
   ├── node_modules
   ├── public
   ├── src
   │    ├── api.js
   │    ├── App.js
   │    ├── App.css
   │    ├── index.js
   │    ├── index.js
   .    .

We are going to use functional components to leverage React's reusable component architecture. There will be components for users, videos and controls (mic, camera, leave) over the video.

App Architecture

The app will contain a MeetingView component which includes ParticipantView which will render the participant's name, video, audio, etc. We will also have a Controls component that will allow users to perform operations like leave and toggle media.

We are going to work on two files:

API.js: Responsible for handling API calls such as generating unique meetingId and token
App.js: Responsible to render MeetingView and join the meeting.

To build a React video chat app, use these 5 steps

STEP 1: Get started with API.js

Before moving on, we must create an API request to generate a unique meetingId. You will need an authentication token, which you can create either through the videosdk-rtc-api-server-examples or directly from the VideoSDK Dashboard for developers.

//Auth token we will use to generate a meeting and connect to it
export const authToken = "<Generated-from-dashbaord>";
// API call to create meeting
export const createMeeting = async ({ token }) => {
  const res = await fetch(`https://api.videosdk.live/v2/rooms`, {
    method: "POST",
    headers: {
      authorization: `${authToken}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({}),
  });
  //Destructuring the roomId from the response
  const { roomId } = await res.json();
  return roomId;
};

STEP 2: Wireframe App.js with all the components

To build up a wireframe of App.js, we are going to use Video SDK Hooks and Context Providers. VideoSDK provides MeetingProvider, MeetingConsumer, useMeeting, and use participant hooks. Let's understand each of them.

First, we will explore Context Provider and Consumer. Context is primarily used when some data needs to be accessible by many components at different nesting levels.

MeetingProvider: It is a Context Provider. It accepts value config and token as props. The Provider component accepts a value prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree.
MeetingConsumer: It is Context Consumer. All consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes.
useMeeting: It is meeting react hook API for a meeting. It includes all the information related to the meeting such as participants, streams etc.
useParticipant: It is participant hook API. useParticipant hook is responsible for handling all the events and props related to one particular participant such as join, leave, mute, etc.

Meeting Context helps to listen to all the changes when a participant joins a meeting or changes Mic or Camera etc.

Let's get started with changing a couple of lines of code in App.js.

import "./App.css";
import React, { useEffect, useRef, useState } from "react";
import {
  MeetingProvider,
  MeetingConsumer,
  useMeeting,
  useParticipant,
} from "@videosdk.live/react-sdk";
import { authToken, createMeeting } from "./API";

function JoinScreen() {
  return null;
}

function VideoComponent(props) {
  return null;
}

function Controls(props) {
  return null;
}

function Container(props) {
  return null;
}

function App() {
  const [meetingId, setMeetingId] = useState(null);

  const getMeetingAndToken = async (id) => {
    const meetingId =
      id == null ? await createMeeting({ token: authToken }) : id;
    setMeetingId(meetingId);
  };

  return authToken && meetingId ? (
    <MeetingProvider
      config={{
        meetingId,
        micEnabled: true,
        webcamEnabled: false,
        name: "C.V. Raman",
      }}
      token={authToken}
    >
      <MeetingConsumer>
        {() => <Container meetingId={meetingId} />}
      </MeetingConsumer>
    </MeetingProvider>
  ) : (
    <JoinScreen getMeetingAndToken={getMeetingAndToken} />
  );
}

export default App;

Step 3: Implement Join Screen

The join screen will work as a medium to either schedule a new meeting or to join an existing meeting.

function JoinScreen({ getMeetingAndToken }) {
  const [meetingId, setMeetingId] = useState(null);
  const onClick = async () => {
    await getMeetingAndToken(meetingId);
  };
  return (
    <div>
      <input
        type="text"
        placeholder="Enter Meeting Id"
        onChange={(e) => {
          setMeetingId(e.target.value);
        }}
      />
      <button onClick={onClick}>Join</button>
      {" or "}
      <button onClick={onClick}>Create Meeting</button>
    </div>
  );
}

Output:

Step 4: Implement Container and Controls

The next step is to create MeetingView and Controls components to manage features such as join, leave, mute, and unmute.

function MeetingView(props) {
  const [joined, setJoined] = useState(null);
  //Get the method which will be used to join the meeting.
  //We will also get the participants list to display all participants
  const { join, participants } = useMeeting({
    //callback for when meeting is joined successfully
    onMeetingJoined: () => {
      setJoined("JOINED");
    },
    //callback for when meeting is left
    onMeetingLeft: () => {
      props.onMeetingLeave();
    },
  });
  const joinMeeting = () => {
    setJoined("JOINING");
    join();
  };

  return (
    <div className="container">
      <h3>Meeting Id: {props.meetingId}</h3>
      {joined && joined == "JOINED" ? (
        <div>
          <Controls />
          //For rendering all the participants in the meeting
          {[...participants.keys()].map((participantId) => (
            <ParticipantView
              participantId={participantId}
              key={participantId}
            />
          ))}
        </div>
      ) : joined && joined == "JOINING" ? (
        <p>Joining the meeting...</p>
      ) : (
        <button onClick={joinMeeting}>Join</button>
      )}
    </div>
  );
}

Apart from that Control Component will be required to handle user actions.

function Controls() {
  const { leave, toggleMic, toggleWebcam } = useMeeting();
  return (
    <div>
      <button onClick={leave}>Leave</button>
      <button onClick={toggleMic}>toggleMic</button>
      <button onClick={toggleWebcam}>toggleWebcam</button>
    </div>
  );
}

(a) Output of Container Component:

(b) Output of Controls Component:

STEP 5: Implement Participant View

Before implementing the video component, We need to understand a couple of concepts.

(a) Forwarding Ref for mic and camera

Ref forwarding is a technique for automatically passing a ref through a component to one of its children. We are going to use Refs to attach audio and video tracks with components.

const webcamRef = useRef(null);
const micRef = useRef(null);

(b) useParticipant Hook

useParticipant hook is responsible for handling all the properties and events of one particular participant who joined in the meeting. It will take participantId as an argument.

const { webcamStream, micStream, webcamOn, micOn } = useParticipant(
  props.participantId
);

(c) MediaStream API

MediaStream is useful to add MediaTrack to the audio/video tag to play the audio or video.

const webcamRef = useRef(null);
const mediaStream = new MediaStream();
mediaStream.addTrack(webcamStream.track);

webcamRef.current.srcObject = mediaStream;
webcamRef.current
  .play()
  .catch((error) => console.error("videoElem.current.play() failed", error));

Now let's use all these APIs to create ParticipantView

function ParticipantView(props) {
  const micRef = useRef(null);
  const { webcamStream, micStream, webcamOn, micOn, isLocal, displayName } =
    useParticipant(props.participantId);

  const videoStream = useMemo(() => {
    if (webcamOn && webcamStream) {
      const mediaStream = new MediaStream();
      mediaStream.addTrack(webcamStream.track);
      return mediaStream;
    }
  }, [webcamStream, webcamOn]);

  useEffect(() => {
    if (micRef.current) {
      if (micOn && micStream) {
        const mediaStream = new MediaStream();
        mediaStream.addTrack(micStream.track);

        micRef.current.srcObject = mediaStream;
        micRef.current
          .play()
          .catch((error) =>
            console.error("videoElem.current.play() failed", error)
          );
      } else {
        micRef.current.srcObject = null;
      }
    }
  }, [micStream, micOn]);

  return (
    <div>
      <p>
        Participant: {displayName} | Webcam: {webcamOn ? "ON" : "OFF"} | Mic:{" "}
        {micOn ? "ON" : "OFF"}
      </p>
      <audio ref={micRef} autoPlay playsInline muted={isLocal} />
      {webcamOn && (
        <ReactPlayer
          //
          playsinline // very very imp prop
          pip={false}
          light={false}
          controls={false}
          muted={true}
          playing={true}
          //
          url={videoStream}
          //
          height={"300px"}
          width={"300px"}
          onError={(err) => {
            console.log(err, "participant video error");
          }}
        />
      )}
    </div>
  );
}

We are done with the implementation of a customized video calling app in ReactJS using VideoSDK. To explore more features go through Basic and Advanced features.

Your Page Title

Schedule a Demo with Our Live Video Expert!

Discover how VideoSDK can help you build a cutting-edge real-time video app.

Book a call

Conclusion

We have successfully completed the video calling app using ReactJS. If you wish to add functionalities like chat messaging, screen sharing, polls, etc, you can always check out our documentation. If you face any difficulty with the implementation, you can check out the example on GitHub or connect with us on our Discord community.