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.