PeerJS

Introduction

PeerJS is another great WebRTC API that is more of a WebRTC JavaScript library, rather than a full stack framework, such as EasyRTC or SimpleWebRTC. This framework is lightweight and essentially only exists on the frontend of your application. For signaling you can either use their PeerServer Cloud and have up to 50 concurrent users connected for free, or you can roll your own PeerServer. By default, PeerJS is configured to connect to Google’s STUN server, which is intended for public use. However, it does not connect to any TURN servers out of the box, which are needed for better connectivity, and that’s where we come in. We have modified PeerJS’s basic demo to hook into Xirsys’ STUN and TURN servers, so this tutorial will walk you through setting up your own instance of the demo.

Prerequisites

  • General understanding of jQuery AJAX
  • Basic understanding of the Peerjs framework; specifically this videochat example. If you are not familiar with PeerJS, you can check out and download their GitHub repo here: https://github.com/peers/peerjs
  • Node.js server to make secure requests to the Xirsys API. Please follow this tutorial to set up your Node server and your ICE call to the Xirsys API before proceeding


  • Step 1: ICE onReady

    We will be editing the index.html file in PeerJS's Video Chat example, found here: https://github.com/peers/peerjs/blob/master/examples/videochat/index.html. We're going to be using the utility class xirsys-ice.js, which is an AJAX request that will be made to the Xirsys API via our secure proxy for a list of Xirsys STUN and TURN servers, and will later be applied to the PeerJS instance. Note: save a copy of the original content from the onReady function, we will use this later in this tutorial. Let's add the onReady function to request the ICE list on page load:

     $(function(){
            // Get Xirsys ICE (STUN/TURN)
            if(!ice){
                ice = new $xirsys.ice('/webrtc');
                ice.on(ice.onICEList, function (evt){
                    console.log('onICE ',evt);
                    if(evt.type == ice.onICEList){
                        create(ice.iceServers);
                    }
                });
            }
        });
    
    **Reminder** Xirsys API requests are made securely via the secure Node proxy. If you have not already, please follow this tutorial before proceeding - http://docs.xirsys.com/secure-calls-xirsys-api.

    Step 2: Create

    Once the Xirsys STUN and TURN servers are retrieved, the ‘create’ method is called. The ‘create’ method creates an instance of PeerJS, and here we apply the Xirsys STUN and TURN servers via the PeerJS config property:

      function create() {
            // PeerJS object
            peer = new Peer({ key: 'lwjd5qra8257b9', debug: 3, config: ice.iceServers});
            peer.on('open', function(){
                $('#my-id').text(peer.id);
            });
            // Receiving a call
            peer.on('call', function(call){
                // Answer the call automatically (instead of prompting user) for demo purposes
                call.answer(window.localStream);
                step3(call);
            });
            peer.on('error', function(err){
                alert(err.message);
                // Return to step 2 if error occurs
                step2();
            });
            setup();
        }
    


    Step 3: Setup

    After the ‘create’ method, we will add an additional function ‘setup’ and move the original content of the onReady function here. Here’s what the ‘setup’ function should look like:

      function setup() {
            $('#make-call').click(function(){
                // Initiate a call!
                var call = peer.call($('#callto-id').val(), window.localStream);
                step3(call);
            });
            $('#end-call').click(function(){
                window.existingCall.close();
                step2();
            });
            // Retry if getUserMedia fails
            $('#step1-retry').click(function(){
                $('#step1-error').hide();
                step1();
            });
            // Get things started
            step1();
        }
    
    The ‘setup’ method is called by the ‘create’ method. You can now test this by hosting this demo on a secure webserver and trying to video chat with someone on a different network.

    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 > peerjs/examples folder).

    Conclusion

    In this tutorial, we demonstrated how to replace the default Google STUN server used by PeerJS, with Xirsys STUN and TURN servers. 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.