How to Build React Video Chat App with VideoSDK

A React video chat app connects browsers in real time using WebRTC, with React components handling UI and an RTC SDK managing rooms, media tracks, and signaling. VideoSDK's React SDK wraps this stack in hooks like useMeeting and useParticipant, letting teams ship group video calling in under a day instead of building STUN, TURN, and SFU infrastructure from scratch.

Most React developers who add video calling to a web app discover the gap between a working demo and a production call within the first week. Rendering a local webcam preview takes an afternoon. Handling token security, browser autoplay restrictions, participant reconnection, and group call scaling takes considerably longer.

This article explains what a React video chat app actually requires under the hood, walks through a complete VideoSDK implementation step by step, and covers the architecture and production decisions that tutorial-level posts skip.

How Does React Video Calling Work?

React video calling routes browser media through WebRTC while React state and context keep the UI synchronized with who is in the room and which tracks are active.

The Meeting Provider Layer

MeetingProvider is the React context wrapper that initializes a VideoSDK session with a meeting ID, authentication token, and default media settings (microphone on, camera off, display name). Every child component inside the provider tree can access meeting state through useMeeting without prop drilling.

The Participant Hook Layer

useParticipant(participantId) returns everything needed to render one person in the call: webcamStream, micStream, webcamOn, micOn, isLocal, and displayName. React refs attach those streams to <audio> and video elements so the browser plays incoming media.

The MediaStream API Bridge

Browsers do not render raw WebRTC tracks directly in JSX. Each track must be wrapped in a MediaStream object and assigned to a media element's srcObject property. The ParticipantView component in this guide uses useMemo for video streams and useEffect for audio streams to handle track changes when participants toggle their camera or microphone.

Group calls beyond two participants require a Selective Forwarding Unit (SFU) on the server side. Without an SFU, each browser must upload a separate video stream to every other participant, which exceeds typical home upload bandwidth at four or more people. VideoSDK routes group sessions through managed SFU infrastructure automatically.

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.

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.

More React Resources

Frequently Asked Questions

How do I build a video chat app in React?

Build a video chat app in React by installing @videosdk.live/react-sdk, creating a backend or dashboard token, wrapping your app in MeetingProvider, and using useMeeting to join rooms and useParticipant to render each person's audio and video streams. The five-step process in this guide covers project setup through a working multi-participant call. For production, generate short-lived tokens from a server endpoint rather than hardcoding credentials in api.js.

What is VideoSDK React SDK?

VideoSDK React SDK is the @videosdk.live/react-sdk npm package that provides React hooks and context providers for integrating VideoSDK's real-time audio and video infrastructure into React web applications. It exposes MeetingProvider, useMeeting, useParticipant, and usePubSub APIs that abstract WebRTC signaling, TURN relay, and SFU-based group call routing. Teams use it to add video calling, screen sharing, in-call chat, and recording to React apps without building WebRTC infrastructure from scratch.

Can I use WebRTC directly in React without an SDK?

Yes, you can use WebRTC directly in React by calling navigator.mediaDevices.getUserMedia() for local media and RTCPeerConnection for peer connections, but you must also build a signaling server, provision STUN and TURN servers, and implement ICE restart and group call SFU logic yourself. Direct WebRTC in React gives full control over codecs and bitrate but typically requires two to six weeks of engineering before reaching production reliability. VideoSDK's React SDK wraps the same WebRTC foundation with managed infrastructure for teams that prioritize speed to market.

Does React video calling work in all browsers?

React video calling works in all major modern browsers that support WebRTC, including Chrome, Firefox, Safari, and Edge. Safari on iOS requires the playsInline attribute on media elements to prevent fullscreen takeover during calls. Browser autoplay policies block unmuted audio until the user interacts with the page, so production apps handle play() promise rejections and mute local audio elements to prevent echo. Teams should test on both Chromium and WebKit engines before launch because track rendering behavior differs slightly between them.

How many participants can a React video chat app support?

A React video chat app using VideoSDK's SFU infrastructure supports group calls with dozens of participants, limited primarily by each user's download bandwidth and the UI layout's ability to render multiple tiles. Peer-to-peer WebRTC without an SFU degrades beyond three to four participants because each browser must upload a separate video stream to every other participant. For large webinars or audiences above fifty participants, consider VideoSDK's interactive live streaming mode instead of a full participant video grid.

Is VideoSDK free for React video chat development?

VideoSDK offers a free developer tier that includes API access and credits for testing React video chat integrations. New accounts receive $20 in included credits for building and testing calls. [UPDATE: verify date] Paid usage is billed per minute of video once free credits are consumed. Verify current pricing on the VideoSDK pricing page before estimating production costs for your expected call volume.

What features can I add beyond basic video calling in React?

Beyond basic video calling, VideoSDK's React SDK supports screen sharing through enableScreenShare(), in-call text chat through usePubSub("CHAT"), polls, collaborative whiteboard, cloud recording via backend API calls, and real-time transcription. Each feature integrates through the same MeetingProvider context without additional WebSocket infrastructure. Consult the VideoSDK React documentation for feature-specific implementation guides.