Building a Simple Voice Call App with React and Node.js: A Step-by-Step Guide

With the increasing popularity of voice-based communication and the availability of advanced technology, it is now possible to build a voice call application with just a few lines of code. In this tutorial, we will be building a simple voice call application using React and Node.js.

Prerequisites

Before we begin, make sure you have the following tools installed:

• Node.js: This is a JavaScript runtime that allows you to run JavaScript on the server. You can download the latest version of Node.js from the official website.
• React: This is a JavaScript library for building user interfaces. You can learn more about React and how to set it up on the official website.
• npm: This is a package manager for Node.js that allows you to install and manage packages (libraries and frameworks) for your projects. npm is included with Node.js, so you don’t need to install it separately.

Creating the Server

The first step in building our voice call application is to set up the server. We will be using Node.js and the Express framework to build the server.

1. Create a new folder for your project and navigate to it in your terminal.
2. Initialize the project by running the following command

npm init -y

This will create a package.json file in your project folder.

3. Install the dependencies by running the following command:

npm install express --save

This will install the Express framework and save it as a dependency in your package.json file.

4. Create a new file called server.js and add the following code:

const express = require('express');
const app = express();

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

This code sets up the server and listens for incoming connections on port 3000.

5. Run the server by typing the following command in your terminal:

node server.js

You should see the message “Server listening on port 3000” in your terminal.

Creating the React App

Now that we have the server set up, let’s create the React app that will be used to make and receive voice calls.

6. Install the dependencies by running the following command:

npm install react react-dom --save

This will install the React and ReactDOM libraries and save them as dependencies in your package.json file.

7. Install the create-react-app tool by running the following command:

npm install -g create-react-app

This will allow you to create a new React app with a single command.

8. Create a new React app by running the following command:

create-react-app client

This will create a new folder called client with the necessary files for a React app.

9. Navigate to the client folder by running the following command:

cd client

10. Run the React app by typing the following command in your terminal:

npm start

Integrating WebRTC

Now that we have the server and React app set up, let’s integrate WebRTC (Web Real-Time Communication) to enable voice calls. WebRTC is a technology that allows real-time communication between web browsers and devices.

1. Install the simple-peer library by running the following command:

npm install simple-peer --save

This library simplifies the implementation of WebRTC by providing a simple API.

2. In your server.js file, add the following code to import the simple-peer library and create a new peer connection:

const SimplePeer = require('simple-peer');

app.get('/peer', (req, res) => {
  const peer = new SimplePeer({ initiator: true });
});

This code creates a new route called /peer that creates a new peer connection when it is accessed. The initiator option is set to true, which means that this peer will initiate the connection.

3. In your client folder, open the src/App.js file and import the simple-peer library:

import SimplePeer from 'simple-peer';

4. Add a button to initiate the call in the App component:

<button onClick={this.initiateCall}>Initiate Call</button>

5. Add the initiateCall function to the App component:

initiateCall = () => {
  fetch('/peer')
    .then(res => res.json())
    .then(data => {
      const peer = new SimplePeer({ initiator: false });
    });
};

This function sends a request to the /peer route on the server and creates a new peer connection with the initiator option set to false. This means that this peer will not initiate the connection, but rather wait for the other peer to initiate the connection.

6. Add the following code to the App component to handle the connection and data exchange:

peer.on('signal', data => {
  // Send the signal data to the other peer
});

peer.on('data', data => {
  // Handle the received data
});
peer.on('connect', () => {
  // The connection has been established
});
peer.on('close', () => {
  // The connection has been closed
});

The signal event is emitted when the peer connection needs to exchange signaling data with the other peer. The data event is emitted when data is received from the other peer. The connect event is emitted when the connection has been established, and the close event is emitted when the connection has been closed.

7. In the initiateCall function, send the signal data to the other peer using the following code:

peer.signal(data);

This will send the signal data to the other peer, which will then use it to establish the connection.

8. Test the voice call application by running both the server and the React app and clicking the “Initiate Call” button on one of the devices. You should be able to make and receive voice

Adding Audio Streams

Now that we have the basic structure for our voice call application, let’s add audio streams to enable real-time audio communication.

1. In your server.js file, import the getUserMedia method from the simple-peer library:

const { getUserMedia } = require('simple-peer');

2. Add the following code to the /peer route to get the user's audio stream:

getUserMedia({ audio: true, video: false }, (err, stream) => {
  if (err) {
    console.error(err);
    return;
  }

  // Send the audio stream to the other peer
});

This will get the user’s audio stream and pass it to the callback function. If an error occurs, it will be logged to the console.

3. In the App component, import the useEffect hook from the react library:

import { useEffect } from 'react';

4. Add the following code to the App component to get the user's audio stream and add it to the peer connection:

useEffect(() => {
  getUserMedia({ audio: true, video: false }, (err, stream) => {
    if (err) {
      console.error(err);
      return;
    }

    peer.addStream(stream);
  });
}, []);

This will use the useEffect hook to get the user's audio stream when the component mounts and add it to the peer connection.

5. In the App component, add the following code to play the audio stream from the other peer:

peer.on('stream', stream => {
  const audioElement = new Audio();
  audioElement.srcObject = stream;
  audioElement.play();
});

This will create a new Audio element and set its srcObject to the audio stream from the other peer. The audio will then be played automatically.

6. Test the voice call application again and make sure that you can hear the audio from the other peer.

That’s it! You have successfully created a simple voice call application using React and Node.js. You can now use this as a starting point to build more advanced voice call applications with additional features such as video support, multiple connections, and more.