JavaScript: Black Screen on Peer Connection

I am trying to make a simple video calling website from which someone can share a link and the person who clicks the link will join the call, problem is that if I join it from different tabs of my chrome browser it works but if one of my friends tries to join the call, it shows black screen as the video of my friend and audio also doesn't get transmitted. My code is :-

let peer =  new Peer({host:'peerjs-server.herokuapp.com', secure:true, port:443})

const socket = io('/');

let myVideoStream;
const videoArea = document.getElementById('videos');
const myVideo = document.createElement('video');
myVideo.muted = true;
const peers = {};

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
}).then(stream => {
    myVideoStream = stream;
    addVideoObject(myVideo, stream);
    peer.on('call', call => {
        call.answer(stream);
        const video = document.createElement('video');
        call.on('stream', (userStream) => {
            addVideoObject(video, userStream);
        });
    })
    socket.on('user-connected', userId => {
        console.log('Final Confirmation');
        connectUser(userId, stream);
    })
}).catch(err => {
    alert('Your camera or microphone is not working!');
    console.log(err);
});

socket.on("user-disconnected", (userId) => {
    if (peers[userId]) peers[userId].close();
});

peer.on('open', id => {
    console.log('Peer identified');
    socket.emit('join-room', window.location.href.split('/')[4], id);
})

function addVideoObject(video, stream) {
    video.srcObject = stream;
    video.addEventListener("loadedmetadata", () => {
        video.play();
    });
    videoArea.append(video);
}

function connectUser(userId, stream) {
    console.log('User Connected');
    const call = peer.call(userId, stream);
    const video = document.createElement('video');
    call.on('stream', userStream => {
        addVideoObject(video, userStream);
    });

    call.on('close', () => {
        console.log('User Disconnected');
        video.remove()
    });

    peers[userId] = call;
}

const muteUnmute = () => {
    try {
      const enabled = myVideoStream.getAudioTracks()[0].enabled;
      if (enabled) {
        myVideoStream.getAudioTracks()[0].enabled = false;
        setUnmuteButton();
      } else {
        setMuteButton();
        myVideoStream.getAudioTracks()[0].enabled = true;
      }
    } catch {
      alert("Your microphone or camera is not working");
    }
  };
  
  const playStop = () => {
    try {
      let enabled = myVideoStream.getVideoTracks()[0].enabled;
      if (enabled) {
        myVideoStream.getVideoTracks()[0].enabled = false;
        setPlayVideo();
      } else {
        setStopVideo();
        myVideoStream.getVideoTracks()[0].enabled = true;
      }
    } catch {
      alert("You camera is not working!");
    }
  };

  const setMuteButton = () => {
    const html = `
      <i class="fas fa-microphone"></i>
      <span>Mute</span>
    `;
    document.querySelector(".main__mute_button").innerHTML = html;
  };
  
  const setUnmuteButton = () => {
    const html = `
      <i class="unmute fas fa-microphone-slash"></i>
      <span>Unmute</span>
    `;
    document.querySelector(".main__mute_button").innerHTML = html;
  };
  
  const setStopVideo = () => {
    const html = `
      <i class="fas fa-video"></i>
      <span>Stop Video</span>
    `;
    document.querySelector(".main__video_button").innerHTML = html;
  };
  
  const setPlayVideo = () => {
    const html = `
    <i class="stop fas fa-video-slash"></i>
      <span>Play Video</span>
    `;
    document.querySelector(".main__video_button").innerHTML = html;
  };

I am using peer.js and socket.io for this website. You can check this, the website is hosted with heroku on this url - https://protected-everglades-14521.herokuapp.com