Блог

Я пытаюсь создать простой веб-сайт для видеозвонков, с которого кто-то может поделиться ссылкой, и человек, который нажимает на ссылку, присоединится к вызову, проблема в том, что если я присоединюсь к нему с разных вкладок моего браузера Chrome, это сработает, но если один из моих друзей попытается присоединиться к вызову, он покажет черныйэкран в виде видео моего друга и аудио также не передается. Мой код :-

 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;
  };

 

Я использую peer.js и розетка.ввод-вывод для этого веб-сайта.
Вы можете проверить это, веб-сайт размещен с heroku по этому URL-адресу — https://protected-everglades-14521.herokuapp.com