WebRTC peer-to-peer data, video, and audio calls with Peer.JS

What is exactly WebRTC?

WebRTC is an initiative that started in May 2011. As in July 2015, much progress has been made since it’s now supported on Google Chrome, Mozilla Firefox, Opera and the Android, iOS operating systems.

It aims at establishing real-time communication inside of a browser. With this technology you can exchange plain data, video data & audio data with the Peer-to-peer (P2P) decentralized communication model. One of the most popular example is probably the website appear.in that replicates Skype software features into your browser.

What about Peer.JS?

Peer.js wraps WebRTC technology and allows the establishment of peer connections between two clients based on unique IDs. In order to have a working system, Peer.JS needs a server called PeerServer that you can either host yourself or use one of the free cloud instance provided by peerjs.com. As you might understand, the PeerServer is only needed to connect the peers, any communication that occurs after happens directly between the peers.

Learning by example

Learning with a concrete example is always easier! So that’s why in this post, I’ll show you how to recreate, using peer.JS, your own “clone” of a limited version of Skype.

The very first step is to add the PeerJS client library to your webpage :

<script src="http://cdn.peerjs.com/0.3/peer.min.js"></script>

Then you need to Sign up for a PeerServer cloud API key. As I said earlier, PeerJS uses PeerServer for session metadata and establish connection between peers.

This is how you can define a peer:

In order to connect, a peer needs to know the id of the other peer. This library is not gonna help you for this, so you’re in charge of communicating the peer IDs between users of your site (by URL or database for example).

Let’s create a friend for our first peer!

In the following code we gonna make the first peer call the second peer.

Media Stream?

As you can notice in the code above, we are using a variable called mediaStream. This is the last piece of the project we need to get done in order to have a functional prototype (yes already!).

When calling or answering a call, a Media Stream should be provided. It represents the local video & audio stream that can be obtained via the browser. When answering a call, the MediaStream is optional and will result as a one-way call.

You now have window.localStream that is your mediaStream. You can simply display your own stream in an HTML canvas:

and provide window.localStream as the parameter for call() and answer() functions.

To display your partner’s stream (the stream you are receiving over p2p) :

Conclusion

If you followed the instructions correctly you should be able to establish a video and audio call between peer one and peer two … congratulations you made you own Skype “clone” !

I strongly encourage you to read the amazing Peer.JS documentation that will give you a complete overview of the technology. If you want to learn more about Skype “cloning”, you can also take a look at my personal open-source project, oro-chat, that will show you more tips and tricks. You can also try it by following these instructions.

Have fun with WebRTC & peer.JS!