Introduction

SimpleWebRTC is a great WebRTC client, generally used in conjunction with SignalMaster, both built by our good friends at &yet. Each tool is powerful and versatile and open source! By default, both SimpleWebRTC and SignalMaster are configured to connect to Google’s STUN server, which is intended for public use. However, it does not connect to any TURN server out of the box, which is needed for better connectivity, and that’s where we come in.

The SimpleWebRTC sample uses a sandbox signaling server that is only meant for development and testing purposes. If you are planning on using SimpleWebRTC in a production setting, you need to set up your own signaling server - SignalMaster is the recommended option.

In order to retrieve your Turn server info (or ICE credentials) from Xirsys, you will need to make a secure request to the Xirsys API. This request can be handled via the signaling server, which is what we will walk through in this tutorial. We are going to show you how to set up your own SignalMaster for SimpleWebRTC and then hook in the Xirsys Turn servers for better connectivity and stable media relay facilities.

Prerequisites

Basic understanding of the SimpleWebRTC framework; specifically this demo found on Github

A webserver to host your SimpleWebRTC application over HTTPS. Please follow this tutorial if you would like to see an example of the SimpleWebRTC demo, hosted on a Node.js webserver - http://docs.xirsys.com/secure-calls-xirsys-api

A Xirsys account with a channel created. Please read our documentation here for more info on creating your channels - http://docs.xirsys.com/get-started

Step 1: Setup SimpleWebRTC + SignalMaster

If you haven’t already, please download the SimpleWebRTC demo here - https://github.com/andyet/SimpleWebRTC. As noted above, you will need to host this application over HTTPS, so you will need to setup your SSL certificates and define them in the config file(s) - you can check out this guide on setting up SSL certs.

Once you have the basic demo setup on a secure webserver, you will need to setup your own SignalMaster. We have forked the SignalMaster repo and added instructions for integrating with Xirsys here - https://github.com/xirdev/signalmaster. You will need to follow the instructions on the ReadMe file to get your server setup and running.

**Note: In this version of SignalMaster, we added an HTTPS request to retrieve the iceServers from the Xirsys API.

Step 2: Configure SignalMaster

Once you have set up your SignalMaster server, within the SignalMaster config directory you will find the development.json and production.json files; here you will find a Xirsys object you can apply your Xirsys account information:

"xirsys": {
    "gateway": "global.xirsys.net",
    "info": {
      "ident": "",
      "secret": "",
      "channel": ""
    }
  },

Once configured to an active Xirsys account, the Xirsys supported SignalMaster fork will be able to securely make requests to the Xirsys REST API.

Step 3: Configure SimpleWebRTC

Now that we have your signaling server setup to handle both the signaling and the Xirsys API requests, we need to direct the SimpleWebRTC demo to the SignalMaster server via the SimpleWebRTC url property. In your SimpleWebRTC files, open the index.html file in the Test directory, and we’re going to add an onReady event listener which will then fire the Start function, passing the SignalMaster endpoint.

$( function(){
        start("https://localhost:8888/");
    });
    function start(data) {
        // grab the room from the URL
        var room = location.search && location.search.split('?')[1];
        console.log('start ',data);
        // create our webrtc connection
        var webrtc = new SimpleWebRTC({
            // the id/element dom element that will hold "our" video
            localVideoEl: 'localVideo',
            // the id/element dom element that will hold remote videos
            remoteVideosEl: '',
            // immediately ask for camera access
            autoRequestMedia: true,
            debug: false,
            detectSpeakingEvents: true,
            url: data
        });
        // when it's ready, join if we got a room from the URL
        webrtc.on('readyToCall', function () {
            // you can name it anything
            if (room) webrtc.joinRoom(room);
            console.log(webrtc.config.peerConnectionConfig);
        });

You can now test this by trying to video chat with someone on a different network. You can confirm you have properly set up the Xirsys servers by checking how many STUN connections you had before and after testing the updated demo, within your Xirsys dashboard. And you can open chrome://webrtc-internals in another tab in Chrome and check that you are connecting to the Xirsys servers.

You can view our GitHub repo with the edited version of this demo here: https://github.com/xirsys/xirsys-examples-v3 (go to app > public > simplewebrtc folder).

Conclusion

In this tutorial, we demonstrated how to replace the default Google STUN server used by SignalMaster thus SimpleWebRTC, with Xirsys’ STUN and TURN servers.