How to Build a Video Call in React JS (2025 Guide with WebRTC, Code & Best Practices)

1npx create-react-app react-video-call
2cd react-video-call
3

1npm install simple-peer socket.io-client
2# Or for an SDK:
3npm install agora-rtc-react
4

1npm install --save-dev @types/socket.io-client
2

1/src
2  /api           # Signaling and backend logic
3  /components    # App, Participant, Controls, Chat, ScreenShare
4  /hooks         # Custom React hooks (useMedia, usePeer)
5  /utils         # Helpers
6  App.js         # Main entry
7

1// server.js (Express + Socket.IO for signaling)
2const express = require("express");
3const http = require("http");
4const socketIo = require("socket.io");
5
6const app = express();
7const server = http.createServer(app);
8const io = socketIo(server, { cors: { origin: "*" } });
9
10io.on("connection", (socket) => {
11  socket.on("signal", (data) => {
12    socket.broadcast.emit("signal", data);
13  });
14});
15
16server.listen(5000, () => console.log("Signaling server running on 5000"));
17

1// useWebRTC.js
2import { useRef, useEffect } from "react";
3import io from "socket.io-client";
4import Peer from "simple-peer";
5
6export const useWebRTC = (roomId) => {
7  const localVideo = useRef();
8  const remoteVideo = useRef();
9  const socket = useRef();
10  const peerRef = useRef();
11
12  useEffect(() => {
13    socket.current = io("http://localhost:5000");
14    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
15      .then((stream) => {
16        localVideo.current.srcObject = stream;
17        peerRef.current = new Peer({ initiator: true, trickle: false, stream });
18        peerRef.current.on("signal", (data) => {
19          socket.current.emit("signal", { roomId, data });
20        });
21        socket.current.on("signal", ({ data }) => {
22          peerRef.current.signal(data);
23        });
24        peerRef.current.on("stream", (remoteStream) => {
25          remoteVideo.current.srcObject = remoteStream;
26        });
27      });
28  }, [roomId]);
29  return { localVideo, remoteVideo };
30};
31

1// tokenUtils.js
2import jwt from "jsonwebtoken";
3export function generateToken(userId, roomId) {
4  return jwt.sign({ userId, roomId }, "your_secret", { expiresIn: "1h" });
5}
6// Usage: const token = generateToken(userId, roomId);
7

1import React from "react";
2import { useWebRTC } from "./hooks/useWebRTC";
3
4export default function App() {
5  const { localVideo, remoteVideo } = useWebRTC("room1");
6  return (
7    <div>
8      <video ref={localVideo} autoPlay muted />
9      <video ref={remoteVideo} autoPlay />
10      <Controls />
11    </div>
12  );
13}
14

1import React from "react";
2export function Controls() {
3  return (
4    <div>
5      <button>Mute</button>
6      <button>End Call</button>
7      <button>Screen Share</button>
8    </div>
9  );
10}
11

1import { useRef, useEffect } from "react";
2
3function useMediaStreams() {
4  const videoRef = useRef();
5  useEffect(() => {
6    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
7      .then((stream) => {
8        videoRef.current.srcObject = stream;
9      });
10  }, []);
11  return videoRef;
12}
13

1function startScreenShare() {
2  navigator.mediaDevices.getDisplayMedia({ video: true })
3    .then((screenStream) => {
4      // Replace video track in peer connection
5      const videoTrack = screenStream.getVideoTracks()[0];
6      peerRef.current.replaceTrack(
7        peerRef.current.streams[0].getVideoTracks()[0],
8        videoTrack,
9        peerRef.current.streams[0]
10      );
11    });
12}
13

1peerRef.current.send("Hello from React!");
2peerRef.current.on("data", (data) => {
3  console.log("Message received:", data);
4});
5

1let recorder = new MediaRecorder(stream);
2recorder.ondataavailable = (e) => { /* Save blob */ };
3recorder.start();
4