Building a Video Chat using Node.js, WebRTC and Socket.IO
rydotAdmin
Web Development

Building a Video Chat using Node.js, WebRTC and Socket.IO

Share

Loading

Hello everyone, today we are going to learn how to build a simple one-to-one Video/Audio chat using NodeJS and Websockets as Backend and HTML5 APIs and javascript as Frontend. Most modern browsers like Mozilla Firefox, Google Chrome, Opera support WebRTC (Web Real Time Communication). The mission is to enable rich, high-quality RTC apps for the browsers. Let’s start.

How Does it work?

Generally, a WebRTC application needs following things:

  • Audio or Video streams
  • Network information
  • A communication medium to report errors (if any), start, halt or end sessions
  • Player for the Audio/Video streams

Let’s start with creating a web server which serves the html and javascript.

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

// use express static to deliver resources HTML, CSS, JS, etc)
// from the public folder 
app.use(express.static('public'));
http.createServer(options, app).listen(3355);
console.log("The HTTP server is up and running");

Here you can see we have set up a basic http server, now we need this server to handle socket sessions as well, thus we will use ws module to handle them. Let’s add some more code and combine both of them, the result will be like this.

const express = require('express'),
    ws = require('ws'),
    http = require('http'),
    app = express();

// use express static to deliver resources HTML, CSS, JS, etc)
// from the public folder 
app.use(express.static('public'));
var httpServer = http.createServer(options, app).listen(3355);
console.log("The HTTP server is up and running");

var wsServer = new ws.Server({server: httpServer});
wss.on('connection', function (client) {
    console.log("A new client was connected.");
    client.on('message', function (message) { // incoming client
        wss.broadcast(message, client);
    });
});

// Define a method to broadcast to all clients
wss.broadcast = function (data, exclude) {
    var i = 0, n = this.clients ? this.clients.length : 0, client = null;
    if (n < 1) return;
    for (; i < n; i++) {
        client = this.clients[i];
        if (client === exclude) continue;
        if (client.readyState === client.OPEN) client.send(data);
        else console.error('Error: the client state is ' + client.readyState);
    }
};

Till now, we learned how to build a server. If you notice the code you will see that everything received from a client will be sent back to other clients by using message broadcast. Our next task is to create a UI (simple UI) and a javascript to handle the socket messages/data. Let’s create some basic HTML for the same. We will require a couple of video tags one for the self video and another for the receiver’s/caller’s.

<!DOCTYPE html>
<html>
  <head>
    <script src="webrtc.js"></script>
    <title>WebRTC Simple Video-Chat</title>
  </head>

  <body>
    <video id="remoteVideo" autoplay></video>
    <video id="localVideo" autoplay muted></video>
    <input id="videoCallButton" type="button" disabled value="Video Call"/>
    <input id="endCallButton" type="button" disabled value="End Call"/>
    <script>window.addEventListener("load", pageReady);</script>
  </body>
</html>

Now, we have HTML and server setup already, now it’s time to do some Javascript magic and the app will be ready. Let’s start with the pageReady method,

function pageReady() {
    
// check browser WebRTC availability 
    if(navigator.getUserMedia) {
        videoCallButton = document.getElementById("videoCallButton");
        endCallButton = document.getElementById("endCallButton");
        localVideo = document.getElementById('localVideo');
        remoteVideo = document.getElementById('remoteVideo');
        videoCallButton.removeAttribute("disabled");
        videoCallButton.addEventListener("click", initiateCall);
        endCallButton.addEventListener("click", function (evt) {
            wsc.send(JSON.stringify({"closeConnection": true }));
        });
    } else {
        alert("Sorry, your browser does not support WebRTC!")
    }
};

Look carefully we have defined two buttons “Call” and “End Call”. Two Videos “Local Video” and “Remote Video”. Clicking on the Call button will initiate the call and “End Call” end the call. Once the Connection is established Videos will be played. Now you will be thinking we haven’t defined how video will be played as there is no content right now. Before we jump into the next section let’s generalise some methods which names are different as per the browser engine. Have a look at the below line.

navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;

window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;

window.RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate || window.webkitRTCIceCandidate;

window.RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription;

You will be able to see that the methods have different names but the function is the same. getUserMedia gets the client/browser machine’s media (audio, video). RTCPeerConnection is responsible for the session between two remote peers. RTCIceCandidate is quite special as it is retrieved from the ICE servers we define(see more about ICE Server). While the RTCSessionDescriptor describes the connection between two and how they are configured.

Conclusion

Now you know how to integrate video call and chat functionality with WebRTC, Node.js Of course, there are numerous programming languages available to build a video chat app. However, there are certain languages like JavaScript that can deliver the exact video/voice chat app as per the user expectation.

In today’s large-scale market of WebRTC, Node.js is the perfect choice to build an ideal WebRTC enabled video chat app. This app can provide users with tremendous performance, creates API’s, and handles the parallel request and demand scalability to build up successful video/voice chat applications in Android, iOS, and Web.

So, let’s explore these technologies and integrate video chat functionality in your project that lets the user do real-time data exchange and video streaming.

Back to Top