Part 2: How to implement WebRTC using JavaScript and Node.js in the Backend
Tutorials in this Series
- Understanding WebRTC
- 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 inpackage.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, theclient 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
- Now, it is time to implement Socket.IO in the backend.
- Paste the following code in
index.js
fileindex.js
.
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
andpublic/js/main.js
respectively. Hence, we must import those files. In the backend, we explicitly setpublic
it as the default directory for serving static files. Hence, we will import the files fromcss/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
.
- We are not explaining the CSS code.
- Paste the following code in public/css/styles.css
Now, let’s add javascript to our frontend. We had already the file
public/js/main.js
inindex.ejs
. It is in this file, we will implement the various methods for usingWebRTC 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
Top comments (10)
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 !!!
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.
@xgubianas , This is Shivam. @nilmadhabmondal informed me that you wanted to integrate WEBRTC with your veterinary project. Please DM me on Dev.to
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
Thanks for any help
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 +919216142737
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
It works
thanks for this
Going to try it out
I will revert back on how it goes
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?
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.