How to make a Video Calling Application with React and Node.js

Introduction

---

Video Calling Application

How to make a Video Calling Application with React and Node.js

Introduction

Video calling has become an essential feature in many applications, enabling real-time communication for personal and professional use. In this blog, we will walk through creating a video calling application using React for the frontend and Node.js with Socket.io for the backend.

Prerequisites

• Basic understanding of Node.js and Express.js.
• Familiarity with React for the frontend.
• A working Node.js environment.

Backend: Node.js Server

Step 1: Set Up the Project

Create a new project directory and initialize it:

mkdir video-calling-app
cd video-calling-app
npm init -y

Step 2: Install Dependencies

Install the required dependencies:

npm install express socket.io peer

Step 3: Create server.js

Create a file named server.js in your project directory and add the following code:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const { ExpressPeerServer } = require('peer');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);
const PORT = process.env.PORT || 5000;

const peerServer = ExpressPeerServer(server, {
  debug: true,
});

app.use('/peerjs', peerServer);

io.on('connection', (socket) => {
  socket.on('join-room', (roomId, userId) => {
    socket.join(roomId);
    socket.to(roomId).broadcast.emit('user-connected', userId);

    socket.on('disconnect', () => {
      socket.to(roomId).broadcast.emit('user-disconnected', userId);
    });
  });
});

server.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Frontend: React Application

Step 1: Set Up the React Project

Create a new React project using Create React App:

npx create-react-app video-calling-frontend
cd video-calling-frontend

Step 2: Install Dependencies

Install the required dependencies:

npm install peerjs socket.io-client

Step 3: Create the Video Call Component

Create a new file named VideoCall.js in the src directory and add the following code:

import React, { useEffect, useRef } from 'react';
import io from 'socket.io-client';
import Peer from 'peerjs';
import './VideoCall.css';

const socket = io('http://localhost:5000');

const VideoCall = () => {
  const myVideoRef = useRef();
  const userVideoRef = useRef();
  const myPeer = new Peer(undefined, {
    host: '/',
    port: '5000',
    path: '/peerjs',
  });

  useEffect(() => {
    myPeer.on('open', (id) => {
      socket.emit('join-room', 'room1', id);
    });

    myPeer.on('call', (call) => {
      navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
      }).then((stream) => {
        call.answer(stream);
        call.on('stream', (userVideoStream) => {
          addVideoStream(userVideoRef.current, userVideoStream);
        });
      });
    });

    socket.on('user-connected', (userId) => {
      connectToNewUser(userId);
    });

    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true,
    }).then((stream) => {
      addVideoStream(myVideoRef.current, stream);

      socket.on('user-disconnected', (userId) => {
        if (peers[userId]) peers[userId].close();
      });
    });

    const connectToNewUser = (userId) => {
      const call = myPeer.call(userId, stream);
      call.on('stream', (userVideoStream) => {
        addVideoStream(userVideoRef.current, userVideoStream);
      });
      call.on('close', () => {
        userVideoRef.current.remove();
      });

      peers[userId] = call;
    };

    const addVideoStream = (video, stream) => {
      video.srcObject = stream;
      video.addEventListener('loadedmetadata', () => {
        video.play();
      });
    };
  }, []);

  return (
    <div className="video-call-container">
      <video ref={myVideoRef} className="video" muted />
      <video ref={userVideoRef} className="video" />
    </div>
  );
};

export default VideoCall;

Step 4: Style the Video Call Component

Create a VideoCall.css file in the src directory and add the following styles:

.video-call-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.video {
  width: 45%;
  height: auto;
  margin: 10px;
  background-color: black;
}

Step 5: Update the App Component

Modify the App.js file to include the VideoCall component:

import React from 'react';
import VideoCall from './VideoCall';
import './App.css';

function App() {
  return (
    <div className="App">
      <VideoCall />
    </div>
  );
}

export default App;

Step 6: Run Both the Backend and Frontend

Make sure your backend server is running:

node server.js

Start your React application:

npm start

Conclusion

Congratulations! You have successfully built a real-time video calling application using React for the frontend and Node.js with Socket.io for the backend. This application allows users to join a video call room and communicate with each other in real-time.

By following this guide, you can create your own video calling application and customize it further to fit your needs.

By Lovish Kumar on August 8, 2024.

Canonical link

Exported from Medium on August 13, 2024.