Creating Custom Video Chat Application using WebRTC…
Hi Guys , in this article we will talk about WebRTC .We will go through all the basic concepts of WebRTC , and lastly there will be a demo project of creating own Video Chat using WebRTC .We will segregate our discussion into several segments:
- What is WebRTC ?
- What are the difference between Web Socket and Web RTC ?
- How WebRTC actually works ?
- Challenges of WebRTC ?
- Why we use WebRTC ?
- Code Walkthrough of our demo project of creating Video Chat.
What is WebRTC ?
WebRTC stands for Web Real Time Communication, as name suggests it’s a collection of api that allows direct connection between browsers . This allows to exchange file, information and any type of data between two or more browser or servers.
What are the difference between Web Socket and Web RTC ?
So lets start with Web socket, In web socket if client wants to connect to server, It sends a request to the server for a connection , and server response “sure we are connected now”. If there are numerous client at a same time, there will be multiple request , If one of the client is changing something, typing a text, or loading a file , server immediately place the change and push it to all of the clients, means there is no direct connection between client to client , there is only conversation between client and server , So It actually creates a sort of delay, between the sending client and server processing all the information. This will not actually affect much if there is a file transmission, but It will affect for the live stream, videos, where every 1 sec delay can be noticed very easily.
So now let’s talk about WebRTC, in WebRTC client directly connect with each other and server is just a meditator which initials the connection. It actually decreases the latency by a lot because the receiving client does not have to wait for the sending client to pass information from server to itself. Normally clients is a browser , its an Html. It makes request to the server , which will response so that it can update itself with continuous information. With WebRTC browser can communicate with each other with a server. So How do the server know each other while communicating, This actually happens through process called Signaling .So when Client A wants to connect with Client B , it just ask the server “Hey This is my Id , I want to connect with Client B.” Then Server took that Id and send it to Client B and ask “ Client A want to connect with you , here is the Id” . Then Client B says “Yeah, sure Here is my Id” , and it sends the Id to server , Finally server sends the Id to Client A , and by this a connection gets establish between Client A and Client B. And now Client A and Client B will share information and server will know nothing about it.
How WebRTC actually works ?
So There are 5 steps which can actually describe how WebRTC actually works:
Api : Developers interacts with Api, client , server uses this api to setup the connection.
Identity: Then they identify the clients, it just checks that whether those are actual client or they are just pretending to be the client.
Type of Data: Then they determine which kind of data will be transferred, Is it video, voice chat, or file etc.
NAT Traversal: Network Address Translation- It’s a technic that establish a connection between the client, it’s commonly used in peer to peer sharing and transferring. and it transfers sort of metadata for the browser, such as browser information , IP address , Port etc.
Security: Identity is already a sort of security only. But this type of security, is about encryption. When data is being send over and transferred over, WebRTC automatically encrypt any type of data.
Codec: It determines how do data is going to be compressed.
Challenges of WebRTC ?
WebRTC uses UDP, and in itself is the real issue. UDP is not reliable for transferring important data. All it does it sends data really really quick, but it does not check whether the data is being received. So this could be useful for live video chat and stream, if we loss a few frame these will be not noticeable. But if a file being transferred loses it’s few byte of data , then entire file could be corrupted. WebRTC doesn’t have any standard signaling protocol and also not fully compatible with all browsers.
Why we use WebRTC ?
With Web socket live stream is possible, but the stream is used to be too slow and there is a very noticeable delay, but WebRTC stream can be much quicker. WebRTC remove the need of extra apps. Google, Facebook embed this technologies for client to client connection. The server does not need any resource to process data encryption , trafficing etc. There are develop kit using some library that can provide us as a developer a new interface. WebRTC also solve our security issue, because encryption is mandatory for all WebRTC component. We have seen there is no need of any third party application , because it runs inside of the browser sandbox without creating a new process. So there will be no spyware, malware or anything that can get into our system. It also shows it’s using your browser securely, camera and microphone access has to be given explicitly. So enough theory now let’s start coding.
Code Walkthrough of our demo project of creating Video Chat.
So we are going to create our Video chat application , we will create separate room for each video meeting, user can join that meeting according to the meeting room. So we first have to create the boilerplate on which we are going to build our application, So open Vs Code run :
npm init — y
It creates our basic package.json , Now we have to install npm packages which we are going to use in our application:
express: It’s the server we are going to use.
ejs: it’s the templating language we are going to use.
socket.io: It helps to communicate back and forth with the actual server easily.
uuid: It generates random ids , which we will be using for dynamical url generation.
To install those packages we have to run the following in our terminal:
npm i express ejs socket.io uuid
there is another dev dependencies which we have to install that is nodemon , nodemon is the package which reruns the server whenever any changes is made to code base or server. We have to run :
npm i — — save -dev nodemon
Now inside package.json we will add a script inside script tags:
“devStart”:”nodemon server.js”
Now if we run :
npm run devStart our server will start running.
Now we will create our server, we will create a file named server.js :
In server.js we are creating our server , first we are declaring our express server .
const express=require(‘express’)
then we are running our express server
const app=express()
creating server url which is to be used to run server, actually we are creating a server to be used in socket.io.
const server=require(‘http’).Server(app)
Now we are creating server , based on which our express server is going to pass that socket.io, so that socket.io eventually know what server it actually used so that it can actually interact with that.
const io=require(‘socket.io’)(server)
setting up server on port:3000
server.listen(3000)
Now we are setting our view engine
app.set(‘view engine’,’ejs’)
setting up public folder as our static folder:
app.use(express.static(‘public’))
creating a brand new room , whenever user hits the base url we are using uuid for creating dynamic unique
app.get(‘/’,(req,res)=>{
res.redirect(`/${uuidV4()}`)
})
then we are adding dynamic parameter which we want to be get passed to our url
app.get(‘/:room’,(req,res)=>{
res.render(‘room’,{roomId:req.params.room})
})
this req.params.room will make room params for our url, we will get back to our server.js file later, but now we will look into the html part, for that we will create views folder and inside that we will create room.ejs:
Now in room.ejs we are going to create our frontend Ui, So first we will press !+tab , to get the basic html structure. Now the div having id video grid will contain the video stream, We are adding styles to that grid inside style tag. Now we have to pass the param room from the url , for that we will go back to our server.js:
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)
})
})
})
io.on(‘connection’,socket=>{
}) this runs anytime when someone connect to our webpage,
socket.on(‘join-room’,(roomId,userId)=>{}) runs whenever we connect with socket.io, we will be passing roomId and userId. Now inside room.ejs :
const ROOM_ID = “<%= roomId %>”
We can access the roomId by this in our frontend , so that socket.io can use it for frontend development.
<script src=”/socket.io/socket.io.js” defer></script>
This actually loads all of the socket js code into our code.
then we have added script.js file which is having the main js logic of our application. Now let’s see the script.js file:
Inside script.js we are first creating the reference of socket, socket is going to connect to our root path:
const socket=io(‘/’)
So here we are using peerjs which has the ability to create connection between different users using WebRTC ,the most important thing is that it has a server setup that we can use that allows us to create the dynamic ids for connecting between users. To install this we have to run :
npm i -g peer and by running peerjs — port 3001 we are asking peer server to run on port 3001, it allows to connect different server and will give us an id of an user which we can use. To make this peer working we have to add this script tag on our room.ejs:
<script defer src=”https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
Now inside script.js we are defining server that should take care of the generation of new Id:
const myPeer= new Peer(undefined,{host:'/',port:'3001'})
peer server take all of the WebRTC information from the user, and turn those information into a unique id , which we can pass in and ask peer library to actually connect with our peers on the network. As soon as we connect to peer server we get back an id which we actually use to run this code .
myPeer.on(‘open’,id=>{
socket.emit(‘join-room’, ROOM_ID,id)
})
socket.emit(‘join-room’) is triggered when ever anyone joins the room. Now we will be adding the video call connection to our application , So for that we will inject our video div having live streaming inside our video-grid div .So we are referring our Video grid by:
const videoGrid=document.getElementById(‘video-grid’) and creating video component by const myVideo=document.createElement(‘video’). We are keeping our video muted myVideo.muted=true. Now we have to connect our own video by:
navigator.mediaDevices.getUserMedia({
video:true,
audio:true
}).then(stream=>{ addVideoStream(myVideo,stream)
})
stream will be our own video and audio. There we are calling addVideoStream function to add our video in our webpage. In addVideoStream we are passing our video component and our own stream data , we will append our video component inside div having div-grid id. Now we have to allow our self to be connected to new user for that we have an event :
socket.on(‘user-connected’,userId=>{
connectToNewUser(userId,stream)
})
In connectToNewUser function we are passing two parameters userId , and our stream .
const call=myPeer.call(userId,stream)
call variable is coming from our peer object, it will be call to user, and stream is our video which we used to send to the user.
call.on(‘stream’,userVideoStream=>{})
when we call the user we gave them our video stream, while they will send us back their video stream. While they send us back their video stream .
call.on(‘stream’,userVideoStream=>{}) gets triggered , and userVideoStream will be the video stream of the user. So we are taking the stream from the other user , and then we are again calling the addVideoStream function with video element and user’s video to inject the that to our video-grid dom.
call.on(‘close’,()=>{
video.remove()
})
This is to remove us from the call when the call ends. Now when someone try to call us , first we will answer to that call, and appending their video to our webapp by calling addVideoStream function. So to make our disconnection more smooth, we will added this to our server.js:
socket.on(‘disconnect’,()=>{
socket.to(roomId).broadcast.emit(‘user-disconnected’,userId)
})
user disconnection is handled by socket.io. Now in script.js we will create a blank object called peers. Through this peers object we used to keep track of which people is connected to which call .So when new user connects we will use userId as the id linked to the call that we make.
peers[userId]=call
and whenever user disconnect we will close the call:
peers[userId].close().
So our application is now ready, So you can see how easily you have create your own video application like Skype or Zoom , using WebRTC. There are few more cool staffs we can perform using WebRTC. It’s just an introductory article on WebRTC. I am leaving my github repo link for this article as reference.
Code:
HAPPY CODING..:)
