WebRTC удаленного и локального видео отображается с локальным потоком

Question

привет, я новичок в WebRTC, и я попробовал этот код

  const yourVideo = document.querySelector("#face_cam_vid");
 const theirVideo = document.querySelector("#thevid");

 (async () => {
 if (!("mediaDevices" in navigator) || !("RTCPeerConnection" in window)) {
  alert("Sorry, your browser does not support WebRTC.");
  return;
 }
  const stream = await navigator.mediaDevices.getUserMedia({video: true, 
  audio: true});
  yourVideo.srcObject = stream;

  const configuration = {
  iceServers: [{urls: "stun:stun.1.google.com:19302"}]
  };
const yours = new RTCPeerConnection(configuration);
const theirs = new RTCPeerConnection(configuration);

for (const track of stream.getTracks()) {
  yours.addTrack(track, stream);
}
theirs.ontrack = e => theirVideo.srcObject = e.streams[0];

yours.onicecandidate = e => theirs.addIceCandidate(e.candidate);
theirs.onicecandidate = e => yours.addIceCandidate(e.candidate);

const offer = await yours.createOffer();
await yours.setLocalDescription(offer);
await theirs.setRemoteDescription(offer);

const answer = await theirs.createAnswer();
await theirs.setLocalDescription(answer);
await yours.setRemoteDescription(answer);
})();

, и он работает, но частично https://imgur.com/a/nG7Xif6.короче говоря, я создаю случайный видеочат в формате «один-к-одному», как в omegle, но этот код отображает как «удаленное» (незнакомое), так и «локальное» («мое») видео с моим локальным потоком, но все, что я хочу, - это ждать пользователявторой пользователь имеет видео-чат, и когда третий пользователь входит, он должен ждать четвертого и т. д. Я надеюсь, что кто-то поможет мне с этим

Answer 1

Вы путаете демо локальной петли - что у вас есть - с комнатой чата.

A демо локальной петли - это короткое замыканиетолько клиентское подтверждение концепции, связывающее два одноранговых соединения на одной странице друг с другом.Совершенно бесполезно, за исключением того, что доказать, что API работает, и браузер может общаться с самим собой.

Он содержит localPeerConnection и remotePeerConnection - или pc1 и pc2 - и это не то, что обычно пишутWebRTC код.Сигнал пропускается.

Демонстрацию сигналов сложно провести без сервера, но я показываю людям эту демонстрационную вкладку .Щелкните правой кнопкой мыши и откройте его в двух смежных окнах и нажмите кнопку Call! на одном из них, чтобы вызвать другое.Он использует localSocket, непроизводственный хак, который я сделал, используя localStorage для передачи сигналов.

Так же бесполезно, вкладка-демонстрация больше похожа на реальный код:

const pc = new RTCPeerConnection();

call.onclick = async () => {
  video.srcObject = await navigator.mediaDevices.getUserMedia({video:true, audio:true});
  for (const track of video.srcObject.getTracks()) {
    pc.addTrack(track, video.srcObject);
  }
};

pc.ontrack = e => video.srcObject = e.streams[0];
pc.oniceconnectionstatechange = e => console.log(pc.iceConnectionState);
pc.onicecandidate = ({candidate}) => sc.send({candidate});
pc.onnegotiationneeded = async e => {
  await pc.setLocalDescription(await pc.createOffer());
  sc.send({sdp: pc.localDescription});
}

const sc = new localSocket();
sc.onmessage = async ({data: {sdp, candidate}}) => {
  if (sdp) {
    await pc.setRemoteDescription(sdp);
    if (sdp.type == "offer") {
      await pc.setLocalDescription(await pc.createAnswer());
      sc.send({sdp: pc.localDescription});
    }
  } else if (candidate) await pc.addIceCandidate(candidate);
}

Есть одинpc - ваша половина вызова - и имеется onmessage сигнальный обратный вызов для правильной обработки несимметричного согласования сроков предложения / ответа.То же самое JS с обеих сторон.

Это еще не чат .Для этого вам нужна серверная логика, чтобы определить, как люди встречаются, и сервер веб-сокетов для сигнализации.Попробуйте этот учебник на MDN , который завершается демонстрацией чата .