WebRTC voice chat

WebRTC (real time communication) is a project with open source code that allows developers to create VoIP applications in and between browsers. In this article i’ll show you example of group voice chat.
First of all. WebRTC only allows us to create and use peer to peer connections. And we should handle handshake between peers by our selfs. Lets see how to create and establish P2P connect to get more context

Click to call

When one peer (caller) want to call other (callee) we have to create and send somehow the offer. API provide us createOffer method in RTCPeerConnection instance.

In offer parameters we tell that we want to send audio and video content (in this article we actually wont be use video). Then we set this offer as local description for our end of P2P connection.
After creating offer and configuring our side of connection we should send this offer to another peer somehow. There is signaling server taking his place (flow for offer and answer between peers to start and establish P2P connect). I prefer WS but you can choose any way (fetch, firebase, email, etc…)

Accept call

When the callee receive this offer, he must configure his side of connection, create an answer and send it back to the caller.

When both caller and callee configured their side of connection WebRTC tries to create and establish P2P connect. But in real world we actually don’t have static IP and path between peers, NAT protocol helps us to browse internet. NAT is out of this article so you can read more about here

How to avoid NAT

ICE (Interactive Connectivity Establishment) is a technology to find the way for our peers to talk to each other.
STUN (Session Traversal Utilities for NAT) is protocol that helps us find out our IP address for ICE. To create P2P connect we can use some public STUN servers like google:

"stun1.l.google.com:19302",
"stun2.l.google.com:19302",
"stun3.l.google.com:19302",
"stun4.l.google.com:19302",

Whit this configuration our app already can connect us to another peer.

Add voice to our call

Most browsers have a good support for MediaDevice API. When connection created and established we can add our own voice and send it to another peer:

Here we take stream from our mic, retries all tracks from him and adding them to our connection. When other side of connection do the same we receive track event and can create audio interface to play it:

And thats it =) Pretty and easy.

All source code and work example you can find in my github:
https://github.com/essaenko/voice