SimpleWebRTC
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
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).