Web Based Video Chat Using PeerJS

Kirtan Parmar

6y47.3k18100Article

JavaScriptWebRTCPeerJSVideo chatWeb Based Video Chat

18 Comments

Join the conversation! Your thoughts help the community grow.

cagatay aksoy6y ago
How can I open the project, no .sln file?
Bharat Joshi8y ago
Can we assign our own id instead of using peer id generated by peer server?
Pranav Kumar9y ago
I hosted this application so after entering the name it give an error of something like hardware access i am unable to test in live server help me out of this
Humayun Kabir Mamun10y ago
Nice...
Ankur Mistry10y ago
Nice share
Gowtham K10y ago
Good One and Great Start
Dinesh Beniwal10y ago
Good start Kirtan, Welcome to C# Corner
Upendra Pratap Shahi10y ago
nice
Pankaj Kumar Choudhary10y ago
Nice Start , Welcome to community......
- Kirtan Parmar10y ago
  thanks :)
Sibeesh Venu10y ago
Nice Share
- Kirtan Parmar10y ago
  thanks
Ehsan Sajjad10y ago
Welcome, and good article, informative
- Kirtan Parmar10y ago
  thanks
Vignesh Mani10y ago
Nice
Pramod Thakur10y ago
Welcome to community..
- Kirtan Parmar10y ago
  thanks
Asfend Yar10y ago
nice start

Introduction

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 an 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 a connection with peerjs server, and on connection success with the 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 a 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 a call from another user, we will create an event that will answer to call and display the 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