Developers

Introduction

PeerJS is another WebRTC API that we’ve had the good fortune to hook into our platform. It’s built and maintained by two UC Berkeley students who definitely know what they’re doing. PeerJS is more of a WebRTC JavaScript library, rather than a full stack framework, such as EasyRTC or SimpleWebRTC.

The pros of using this framework are that it is both lightweight and essentially only exists on the frontend of your application. It is by far the most readable, well-documented, and malleable WebRTC API we’ve seen. We love how easy it is to roll out a WebRTC app in practically any language (we tested it with Ruby on Rails). The biggest con we see is that you’re in charge of communicating the peer IDs between users of your site, meaning you’ll have to use some sort of real-time messaging platform, such as Pubnub, Pusher, or Firebase to allow peers to “find” each other, but this is hardly a setback. However, they do have signaling covered. At the time of writing this tutorial, you can either use their PeerServer Cloud and have up to 50 concurrent users connected for free, or you can roll your own PeerServer. PeerJS is one of the more robust solutions we’ve seen, and we’re very glad to use it with the XirSys platform.

Because WebRTC is such a new technology, solid WebRTC APIs are still few and far between these days. But PeerJS is also among the best we’ve seen, so much so that we’ve decided to persuade our clients to use it and focus on our strength: highly reliable TURN servers.

This tutorial will teach you the basics of hooking PeerJS into XirSys’s STUN and TURN servers.

Don’t like PeerJS? You can hook any WebRTC API into our platform.

Prerequisites

If you haven’t already, we highly suggest that you first read our Introduction, followed by our Quick start guide. These guides should give you a fundamental understanding of our platform, making hooking PeerJS into the XirSys platform a piece of cake.

The demo

PeerJS’s bare-bones demo can be found here. And you can also fork it from their GitHub. We’ll be using this demo for this tutorial, specifically the PeerJS Video Chat demo. By default, it is configured to connect to Google’s STUN server at stun.l.google.com:19302, which is intended for public use. It does not connect to any TURN servers out of the box. That’s where we come in.

Configuring the config object

PeerJS has made it very easy to specify your own STUN and TURN servers. To hook PeerJS into the XirSys platform, all you have to do is modify the config object to store XirSys STUN and TURN servers — instead of the default Google STUN server.

But you can’t just hook into any ICE server. You must first make a REST request to https://service.xirsys.com/ice with your XirSys credentials, and only then can you pass the returned STUN and TURN servers into config.

Let’s edit index.html to initiate a GET request:

 

Please keep in mind that this REST request should only be implemented in a secure environment, such as a server-side application or a compiled client-side application. Failure to do this will result in unwanted users hijacking your TURN bandwidth and other security flaws. However, we’re breaking that rule and initiating a WebRTC connection from the client-side just this once for simplicity’s sake.

Please notice the fact that we’re setting customConfig to data.d, which is where the array of XirSys ICE servers live.

A successful call should yield similar results to the array of servers returned below:

Confirmation

Let’s try it out. We used the PeerJS Video Chat demo. If your XirSys call was truly successful, the new config should have replaced the default Google STUN server with XirSys STUN and TURN servers. You can confirm this within your XirSys dashboard by checking how many STUN connections you had before and after testing the updated demo. The dashboard updates instantly, so if your STUN connections increased, congratulations. Achievement unlocked! You’ve successfully hooked PeerJS into the XirSys platform.

Tying up loose ends

Although this demo now hooks into XirSys’s STUN and TURN servers, it still uses PeerJS’s public signaling server. In a later tutorial, we’ll cover how to instead hook into XirSys’s signaling server.

We hope you’ve left with a solid understanding of what it takes to bring these two wonderful platforms together. You can also fork this customized PeerJS demo from our GitHub, although it may not be as up to date as the official PeerJS repository. This tutorial covered all the fundamentals you need to develop and deploy an awesome PeerJS application that hooks into our highly reliable servers.

 


Developers