Overview

WebRTC is technology which can help us achieve real time communication between two web browsers or an application that works on top of open standards. We can use this technology to build messaging applications, voice and video calling applications as it supports voice, video and generic data transfer.

WebRTC is supported by major browsers like Chrome, Firefox, Opera, Safari and Edge. WebRTC is also supported by mobile device platforms such as Android and iOS using libraries having the same functionality. On top of all this, it is open source and is backed by big tech companies like Google, Microsoft, Apple and Mozilla.

Why use webRTC in our application? 

WebRTC helps you create peer to peer connections between two different clients without a need for third party servers. Hence communication your application will be completely decentralized without requirement of any servers to handle the communication. 

How does it work?

 The first peer will create an offer for another peer to connect to them in terms of Session Description Protocol(SDP) with all necessary data for connection to happen.This will be stored in the server which can be read by another peer to take the request and answer with SDP. Hence the server will act as mediator between two peers with connection but will not interfere with the actual data getting communicated. But the problem with peer to peer communication is that most devices have firewalls. Also the ip addresses change due to Network address translators(NAT). Hopefully we have something called Interactive connectivity establishment(ICE), which helps clients with discovery of their public ips’. Both peers will create the list of their ICE candidates with ips’ and ports with which it can create a connection. In the backround WebRTC will do this by making a series of requests to stun servers. These ICE candidates will be stored in  the database in the server and the algorithm will determine which will be best for creating the connection.

How to get started?

Lets see how we can make connections between two browsers(say peer A and peer B), using WebRTC with javascript. Actually it is quite simple since the browser has built in support for webRTC. Initially peer A creates a new peer connection with help of the server. Then the next step is to create an offer to connect and will set it as a local description. Also we will be creating a data channel to be used for communication. 

We can create peer connection using below function which will take stun server details

const pc = new RTCPeerConnection(servers);

We can create a channel through the following function which will be connected to a peer and will be used to send and receive data. 

const dc = new pc.createDataChannel (“channel”);

Next we can create offer and store it as local description

pc.createOffer.then(x => pc.setLocalDescription(x));

Similarly we have to create a connection in peer B which answers to the offer. As we did for peer A we will create a new connection with the same server and will set the offer received as a remote description. Next we will create an answer and set it as a local description in peer B. 

Following function can be used to set remote description the offer received by peer A and peer B

const rc = new RTCPeerConnection(servers);

rc.setRemoteDescription(offer);

To create the answer to the offer by peer A, Peer B can use following method and store as its local description

rc.createAnswer().then( y => y.setLocalDescription(y));

Now the final step of making the connection is setting the answer we got from peer B as a remote description in peer A.

pc.setRemoteDescription(answer);

With this connection would be established successfully between two peers and you can send messages using the channel created. 

Should you be using webRTC then?

Yes, with fast communication and easy to build upon standardized api which even comes out of the box with modern browsers. However the peer to peer communication gets too complicated when it comes to multiple participants.