See Me Duo | Docs

Back to Home Page

Introduction

See Me Duo is a simple video-call web app that works on all devices. Languages used are JavaScript(peer.js), HTML and CSS. Javascript has been used for the call room. Here javascript is used for generating a unique random Id, it is used to connect the person to the call, it is used to stream your video and audio to the other person, etc.

Coding (Javascript)

Global variables

var MY_STREAM;

var peerList = [];

Accessing the required Elements

const videoCallBtn = document.getElementById("videoCallBtn");

const localVideo = document.getElementById("localVideo");

const remoteVideo = document.getElementById("remoteVideo");

const peerId = document.getElementById("peerId");

const msg = document.getElementById("msg");

Adding event to video call button

videoCallBtn.addEventListener('click', () => {

let remotePeerId = peerId.value;

msg.innerHTML = "Connecting to " + remotePeerId;

callPeer(remotePeerId);

 });

Video Calling Function

const callPeer = (id) => {

navigator.mediaDevices.getUserMedia({

  video: true,

  audio: {

echoCancellation: true,

noiseSuppression: true,

  },

}).then((stream) => {

    MY_STREAM = stream;

    addLocalVideo(stream);

    let call = peer.call(id, stream);

call.on('stream', (remoteStream) => {

       if (!peerList.includes(call.peer)) {

             addRemoteVideo(remoteStream);

             peerList.push(call.peer);

           }

       })

   }).catch((err) => console.log(err));

}

This is not the full code written for the call room but these are the main functions.