Let’s Build a Video Chat App with JavaScript and WebRTC

Part 2: How to implement WebRTC using JavaScript and Node.js in the Backend

Tutorials in this Series

1. Understanding WebRTC
2. Implementing WebRTC in code (this tutorial)

In the previous tutorial, we learned about the fundamentals of WebRTC.
In this tutorial, we will learn how to implement those concepts in code and create a website for online video-conferencing.

Live Demo

You can see and use the website live in action at the link mentioned below. You just have to enter the room name to create/join a room.
WebTutsPlus Webcon
Note:-

• The website currently supports only 2 persons per room.

Video

You can also watch the following video to see how to use this website.

Requirements

If you have not read the previous tutorial, it is highly recommended that you read it before you begin this tutorial.

We will use the following:-

• Node.Js (version 12.14.1) — Runtime Env for JS
• Socket.IO (version 1.2.0) — for signaling in WebRTC
• Express.Js: (version 4.17.1) — BackEnd Framework
• Code Editor (Microsoft Visual Studio Code recommended)
• A Good Browser (Google Chrome Recommended)

We will use Node.Js with Express.Js Framework for the backend. If you are not familiar with Node.Js and Express.Js but you know any other MVC framework, DON’T WORRY. We have tried to explain in such a way that you should be able to understand even if you have never worked with Node.Js & Express.Js

Step 1. Setting up the Project

Let’s begin with setting up the project.

Step 1.1. Download Node.Js

• You can download Node.Js for your platform by clicking on this link. Downloading Node.Js will automatically install NPM (Node Package Manager) on your PC. NPM is the default Package Manager for Node.Js

Step 1.2. Create a node project

• Create a New Folder. This folder will be the root directory for our project.
• Open terminal/CMD in this folder and run the command npm init .
• Press the Enter Key continuosly to skip the additional configurations for the project and write YES when prompted.
• This will create a file package.json in the root directory of the project. This file will contain all the necessary information regarding our project like project dependencies.

Step 1.3. Installing dependencies

• In the terminal, run the following command. It will install the dependencies — Express.JS and socket.IO in our project.

npm install express@4.17.1 socket.io@1.2.0 --save

• The flag --save will save the name and versions of these dependencies in package.json for future reference.
• After the above command has finished execution, you will see a folder node_modules created in the root directory of the project. This folder contains the dependencies that we have just installed.

Now we have finished setting up the project. The following is the project structure at this stage.

Step 2. Creating The BackEnd

Let us now begin writing the code for the backend. Before we begin, let’s revise a few points from the previous tutorial.

• We need a backend server for signaling.
• Certain information — Candidate (network) information & Media Codecs must be exchanged between the two peers before a direct connection can be made between them using WebRTC.
• Signaling refers to the mechanism using which two peers exchange this information

The above points tell us that we have to implement a mechanism using which two clients (browsers) can send messages to each other. We will use Socket.IO for this purpose. Socket.IO is suited to learning about WebRTC signaling because of its built-in concept of ‘rooms’. Let’s first discuss what is Socket.IO

Socket.IO

• Socket.IO consists of two parts— client Library& server Library. Obviously, the client library is used on the client-side & server library is used on the server-side.
• Socket.IO helps in implementing the following — Let’s say four clients are connected to the server. When the server receives a new message from one client, it should notify all the other clients and also forward this message to the other client. It is similar to a group chat.
• In Socket.IO, each message, that is sent to the server or received from the server, is associated with an event. So, if a client sends a message to the server on a particular event, the server will forward this message to only those clients that are listening to this corresponding event.
• There are some reserved events. However, we can also define custom events. To know about the reserved events, you can visit this link.
• Also, the clients can join a room and ask the server to send the message to only those clients that have joined a particular room.

Now that we have discussed Socket.IO, we can begin implementing the backend server

Step 2.1. Create a file index.js

• In the Express framework, index.js is the starting point for our server by default. So create a file index.js at the root level of our project.

Step 2.2. Create a Public folder and a views folder

• Create the following folders at the root level of our project
  • public — contains the static files like CSS and JS files for the frontend
  • views — contains the views for the frontend

• Our website will only contain one page. Inside the views folder, create a file index.ejs that will contain the HTML code for the frontend. Expresses uses ejs as the templating engine.
  
  The project structure will now look like the following
  
  
  
  Step 2.3. Initialize Express and an HTTP Server

• Now, we must initialize Express, HTTP server, and Socket.IO for our backend. To do this, paste the following code in the index.js located at the root level of the project
  

  Step 2.3. Implement Socket.IO
  • Now, it is time to implement Socket.IO in the backend.
  • Paste the following code in index.js file
    So, now we have implemented the backend of our website. The following is the complete code of index.js.
    ## Step 3. Creating the FrontEnd of our website

Now, let’s create the frontend of our website

Step 3.1. Create the HTML file

• Let’s create the HTML file for our frontend.
• We will define the CSS and Javascript for the front-end in public/css/styles.css and public/js/main.js respectively. Hence, we must import those files. In the backend, we explicitly set public it as the default directory for serving static files. Hence, we will import the files from css/styles.css & js/main.js in HTML.
• We will also import the client library for socket.io.
• We will also import adapter.js for WebRTC because implementations of WebRTC are still evolving, and because each browser has different levels of support for codecs and WebRTC features. The adapter is a JavaScript shim that lets your code be written to the specification so that it will “just work” in all browsers with WebRTC support.
• We discussed STURN/TURN servers in the previous tutorials. We will import the TURN/STUN URLs from public/js/config.js . We will create this file later in this tutorial.

• Paste the following code in views/index.ejs.
  

  Step 3.2. Add the CSS code
  • We are not explaining the CSS code.
  • Paste the following code in public/css/styles.css
    ## Step 3.3. Add the JS file

• Now, let’s add javascript to our frontend. We had already the file public/js/main.js in index.ejs . It is in this file, we will implement the various methods for using WebRTC and client library of Socket.IO

• A lot of messages will be exchanged between the two clients before a direct connection is created between them. We saw this in details in the previous tutorial when we gave the example of Amy and Bernadette. It is highly recommended that you read that example. We have simply implemented each step mentioned in that article using Socket.IO

• Paste the following code in public/js/main.js
  

  
  
  Step 3.4. Add the STUN/TURN URLs in config.js

• To make this website in the real world, we must specify TURN/STUN configuration to RTCPeerConnection() . There are a lot of companies that provide free STUN/TURN servers. We will use the servers offered by XirSys.

• Steps to obtain the TURN/STUN URLs from XirSys are mentioned in this README file

• Paste the obtained configurations in public/js/config.js

• Following is how config.js will look. (The urls will be different
  

Congratulations!

You have now created a web-conferencing website. To deploy your website on localhost and test it, follow these steps

• Open a terminal in the root directory of our project.
• Run the following command — node index.js .
• Open Google Chrome and visit localhost:8000 . Enter a room name (say foo). You should see your video.
• Open a new tab and visit localhost:8000 . Enter the same room name (foo). You should now see two video elements.

You can find the complete code in this GitHub Repo

Comments

[xgubianas]

In my maltop, I reach the "enter room name" and then I get a blue background screen with nothing...
But if I'll do the same in my mobile, in the console node.js I get this error:

/var/www/vhosts/guvavet.com/app.guvavet.com/videochat/index.js:47
var numClients = clientsInRoom ? Object.keys(clientsInRoom.sockets).length : 0;
^

TypeError: Cannot convert undefined or null to object
at Function.keys ()
at Socket. (/var/www/vhosts/guvavet.com/app.guvavet.com/videochat/index.js:47:44)
at Socket.emit (events.js:315:20)
at Socket.onevent (/var/www/vhosts/guvavet.com/app.guvavet.com/videochat/node_modules/socket.io/lib/socket.js:327:8)
at Socket.onpacket (/var/www/vhosts/guvavet.com/app.guvavet.com/videochat/node_modules/socket.io/lib/socket.js:287:12)
at Client.ondecoded (/var/www/vhosts/guvavet.com/app.guvavet.com/videochat/node_modules/socket.io/lib/client.js:185:14)
at Decoder.Emitter.emit (/var/www/vhosts/guvavet.com/app.guvavet.com/videochat/node_modules/component-emitter/index.js:134:20)
at Decoder.add (/var/www/vhosts/guvavet.com/app.guvavet.com/videochat/node_modules/socket.io-parser/index.js:247:12)
at Client.ondata (/var/www/vhosts/guvavet.com/app.guvavet.com/videochat/node_modules/socket.io/lib/client.js:170:16)
at Socket.emit (events.js:315:20)

Any idea?

Thanks !!!

[Robert Loeber]

I found it. I had the same error.
line 47, index.js:
var numClients = clientsInRoom ? Object.keys(clientsInRoom.sockets).length : 0;
change it to:
var numClients = clientsInRoom ? Object.keys(clientsInRoom).length : 0;

the first time there is no room, and the object is made bij 'join' with teh name of the room. When the second user joins, the room object is made but:
'sockets' appears not to be a property,and gives 'undefined'. so leave it out.
It probably has to to with different versions of socket.io. It took a couple of hours to find this out.

[Shivam Agarwal]

@xgubianas , This is Shivam. @nilmadhabmondal informed me that you wanted to integrate WEBRTC with your veterinary project. Please DM me on Dev.to

[levincem]

Hi,

Great tutorial, but i have issues to make it work..

It only displays the local stream, i can't find out why..
The remote stream seems to connect, but it does not trigger the handleRemoteStreamAdded function ?

I've just made a few changes (the correction below for the var numClients, and the deprecated "onaddstream" replaces by "ontrack"

I'm not really used to js development (PHP mostly) so debugging is not easy !

A little help/advices would be much appreciated !

Here is my console log :
Attempted to create or join room foo main.js:32:11
Going to find Local media main.js:105:9
Getting user media with constraints
Object { audio: true, video: true }
main.js:124:9
Message from server: Received request to create or join room foo main.js:63:15
Message from server: Room foo now has 0 client(s) main.js:63:15
Message from server: Client ID z-44yxk-0TY0syYKAAAF joined room foo main.js:63:15
joined: foo main.js:57:11
Adding local stream. main.js:114:11
Client sending message: got user media foo main.js:96:11
Message from server: Client said: got user media main.js:63:15
Client received message: bye foo main.js:70:13
Another peer made a request to join room foo main.js:50:11
This peer is the initiator of room foo! main.js:51:11
Client received message: got user media foo main.js:70:13

maybeStart() false
MediaStream { id: "{792c32de-cee6-4511-a716-97bad26679b7}", active: true, onaddtrack: null, onremovetrack: null }
true main.js:128:11
creating peer connection main.js:130:13
WebRTC: Using more than two STUN/TURN servers slows down discovery 2 9fa9772d-8c14-4df4-897f-9b6b84dd36ac:275
WebRTC: Using five or more STUN/TURN servers causes problems 3 9fa9772d-8c14-4df4-897f-9b6b84dd36ac:275
Created RTCPeerConnnection main.js:154:13
isInitiator false main.js:134:13

Thanks for any help

[ersaurabh101]

Need this to join in my app, we have a tuition center, around 15 teachers and 400 students.

If anyone can help us host this or similar script, you are welcome to work with us.

Please call [phone]

[alakkadshaw]

Nice article, about how to create web conferencing. For TURN server you can consider the openrelayproject.org/
which provides free public turn server.

If some one is looking for a paid TURN service than Metered TURN servers are a good alternative

[nafiudanlawal]

It works

thanks for this

[nafiudanlawal]

Going to try it out
I will revert back on how it goes

[Jiannis Sotiropoulos]

this works like a charm! Is there a reason why you capped it to max two users? I removed the ifelse statement on the server, but still a third user doesn't join the video. any clue why?

[Robert Loeber]

Great tutorial, but please check if code still works for socket.io 1.2 or higher versions. I installed 1.2.0 but had compatibility issues.