Web Based Video Chat Using PeerJS

PeerJS is a JavaScript library and provides functionality to access WebRTC.

WebRTC allows real time browser-to-browser communication for voice calling and video chat. The user does not need to install any additional plugin or application in order to access WebRTC.

WebRTC is supported in the following browsers.

• Microsoft Edge
• Google Chrome
• Mozilla Firefox
• Opera

Let’s create one simple application that will allow us to video chat; before we start coding you will need peer.js file, you can download that file, also you need api key in order to access peerjs cloud server. If you want to run this on your own server then you can get code  and also you can deploy.

Create your account on peerjs.com to get your own API key,

You can check your browser compatibility by writing simple below js :

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

getUserMedia allows a web browser to access the camera and microphone and to capture media

// PeerJS object

var peer = new Peer({ key: 'lwjd5qra8257b9' });

Above code will create connection with peerjs server, and on connection success with server it will assign one random unique id, every time when connection established with peerjs server it will return one unique id for each user it would be like phone number, we will use that unique id for establishing connection with another user.

peer.on('open', function()
{

    console.log(‘id: ’+peer.id);

});

We will need another user peer id so we can establish a connection, you can simply run the same code on another browser if you don’t have another pc. But only one browser at a time can stream your webcam.

Once you have peer id of another user then just try to connect with that user,

// Initiate a call!

var call = peer.call(‘dest peerid’, window.localStream);

peer.call and the callback of the call event provide a MediaConnection object. The MediaConnection object itself emits a stream event whose callback includes the video/audio stream of the other peer.

Now when we receive call from another user, we will create event that will answer to call and display video:

<video id="their-video" autoplay></video>

<video id="my-video" muted="true" autoplay></video> // Receiving a call peer.on('call', function (call)
     { // Answer the call automatically call.answer(window.localStream);
       // Hang up on an existing call if present if (window.existingCall)
  {
    window.existingCall.close();
  }
  // Wait for stream on the call, then set peer video display
  call.on('stream', function (stream)
    {
    $('#their-video').prop('src', URL.createObjectURL(stream));
    });
  // UI stuff
  window.existingCall = call; $('#their-id').text(call.peer);
});
peer.on('error', function (err)
  {
  alert(err.message);
  });
//To display your own video
navigator.getUserMedia(
  {
    audio: true, video: true
  }, function (stream)
  {
    // Set your video displays
    $('#my-video').prop('src', URL.createObjectURL(stream)); window.localStream = stream;
  }, function ()
  {
    console.log(‘Failed to access the webcam and microphone.’);
  });
//To end the call
window.existingCall.close();
//perform something when call ended
peer.on('close', function() { ... });

You can also print all connection logs on console, 

var peer = new Peer({key: 'lwjd5qra8257b9'}, 3);

You can also do instant message through peerjs, do the following for sending message to another user:

var conn = peer.connect('dest-peer-id');
conn.on('open', function()
{
    // Receive messages
    conn.on('data', function(data)
    {
        console.log('Received', data);
    });

    // Send messages
    conn.send('Hello !');
});

Download an attachment to experience it.

Read more articles on JavaScript:

• Code Standards And Conventions For JavaScript Programmers
• Implementing Modular Design Pattern And OOP In JavaScript