What is WebRTC
WebRTC is a free and open-source project providing web browsers and mobile applications with real-time communication via application programming interfaces (APIs). You can transfer your audio, video, or data stream directly peer-to-peer via WebRTC.
PeerJs
PeerJS wraps the browser's WebRTC implementation to provide a complete, configurable, and easy-to-use peer-to-peer connection API. Equipped with nothing but an ID, a peer can create a P2P data or media stream connection to a remote peer.
Enough Talks let's make our application
Create Simple HTML Page With Two Video Elements index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Video Call</title>
<link rel="shortcut icon" href="#" />
<link rel="stylesheet" href="style.css" />
<script
defer
src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/1.3.2/peerjs.min.js"
></script>
<script defer src="main.js"></script>
</head>
<body>
<div id="wrapper">
<video id="local-video" width="400" height="300" autoplay muted></video>
<video id="remote-video" width="400" height="300" autoplay></video>
<div class="clear"></div>
</div>
</body>
</html>
Put Some CSS to place Them Side by Side style.css
#wrapper {
width: 920px;
height: auto;
margin: 0 auto;
}
#local-video {
width: 47.5%;
height: 300px;
float: left;
margin-right: 5%;
}
#remote-video {
width: 47.5%;
height: 300px;
float: left;
}
.clear {
clear: both;
}
@media (max-width: 767px) {
#wrapper {
width: 100%;
height: auto;
}
#local-video {
width: 100%;
height: auto;
float: none;
}
#remote-video {
width: 100%;
height: auto;
float: none;
}
}
Let's Code Our JavaScript for PeerJs main.js
let localVideo = document.getElementById("local-video");
let remoteVideo = document.getElementById("remote-video");
// Video and audio are enabled for this call.
let peer, localStream;
let MediaConfigurtion = {
audio: true,
video: true,
};
// Initialize peer object with userId
function init(userId) {
peer = new Peer(userId);
peer.on("open", () => {
console.log(`user connected with userID = ${userId}`);
});
listenCall();
}
// Get the user media (camera and microphone) for the call.
function makeCall(friendId) {
var getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
getUserMedia(MediaConfigurtion, (stream) => {
localVideo.srcObject = stream;
localStream = stream;
const call = peer.call(friendId, stream);
call.on("stream", (remoteStream) => {
remoteVideo.srcObject = remoteStream;
});
});
}
// navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
function listenCall() {
var getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
peer.on("call", (call) => {
getUserMedia(MediaConfigurtion, (stream) => {
localVideo.srcObject = stream;
locaStream = stream;
call.answer(stream);
call.on("stream", (remoteStream) => {
remoteVideo.srcObject = remoteStream;
});
});
});
}
// Call init with random UUID
init(getUID());
// generate a random UUID string.
function getUID() {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
(
c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
).toString(16)
);
}
That's it open your index.html on your browser open your console you will see your unique UID1 say user 1. Now just open the same file in another tab will be a new client now open console and you will see the unique UID2 of user 2.
Now Call makeCall function in user 1 console like this makeCall("UID2")
Just press enter and you will see the following screen
That's it now both the users are video calling live. Using WebRTC peer-to-peer.
Top comments (0)