Wern Ancheta

Adventures in Web Development.

Implementing Video Calls With PeerJS

| Comments

Picking up from where we left off last time. Let’s now try to add a video on our simple calling app with PeerJS. If you haven’t read my previous tutorial, go ahead and read it as this article wouldn’t make sense if you haven’t yet.

First, we still need to use the same scripts we used on the last tutorial.

1
2
3
<script src="//cdn.peerjs.com/0.3/peer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//www.WebRTC-Experiment.com/RecordRTC.js"></script>

But for our HTML, we need to replace the audio element with video. We also set the video to autoplay so that as soon as the stream becomes available, the video starts playing.

1
2
<button id="start-call">start call</button>
<video controls autoplay></video>

For our custom script, we still have the getParameterByName function.

1
2
3
4
5
6
function getParameterByName(name){
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

As for the getAudio function that we previously used for getting the audio input from the users device. We now replace it with getVideo:

1
2
3
function getVideo(successCallback, errorCallback){
    navigator.getUserMedia({audio: true, video: true}, successCallback, errorCallback);
}

When the call is received, we now call the getVideo function instead of getAudio.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function onReceiveCall(call){

    console.log('peer is calling...');
    console.log(call);

    getVideo(
        function(MediaStream){
            call.answer(MediaStream);
            console.log('answering call started...');
        },
        function(err){
            console.log('an error occured while getting the video');
            console.log(err);
        }
    );

    call.on('stream', onReceiveStream);
}

Once a stream is received, we also need to replace the element that we’re selecting. So we now select the video element instead of audio.

1
2
3
4
5
6
7
8
function onReceiveStream(stream){
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(stream);
    video.onloadedmetadata = function(){
        console.log('loaded');
    };

}

The code for getting the current user and the peer is also the same.

1
2
var from = getParameterByName('from');
var to = getParameterByName('to');

But for the creation of the peer, we now use the PeerServer Cloud service instead of our own since we already did that last time.

1
var peer = new Peer(from, {key: 'Your PeerJS API Key'});

Then we listen for the open event on the peer just so we can check if the peer has actually been created.

1
2
3
peer.on('open', function(id){
    console.log('My peer ID is: ' + id);
});

We also listen to the call event so we can receive incoming calls.

1
peer.on('call', onReceiveCall);

For the start call button click event, we use the getVideo function and proceed as usual.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#start-call').click(function(){

    console.log('starting call...');

    getVideo(
        function(MediaStream){

            console.log('now calling ' + to);
            var call = peer.call(to, MediaStream);
            call.on('stream', onReceiveStream);
        },
        function(err){
            console.log('an error occured while getting the video');
            console.log(err);
        }
    );

});

Conclusion

That’s it! We have implemented video calling using peerJS. Do note that this will consume more bandwidth than audio calls so the performance might be affected depending on the network.

Comments