WebRTC远程和本地视频都显示本地流 [英] WebRTC both remote and local video is displayed with local stream

问题描述

你好，我是WebRTC的新手，我试过这段代码

hello i am newbie in WebRTC and i tried this code

  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中一样，但这段代码显示远程（陌生人）和本地（我的）视频与我的本地流，但我想要的只是，用户等待第二个用户进行视频聊天，当第三个用户输入时应等待第四个等等。我希望有人能帮助我

and it works but partly https://imgur.com/a/nG7Xif6 . in short i am creating ONE-to-ONE random video chatting like in omegle but this code displays both "remote"(stranger's) and "local"("mine") video with my local stream but all i want is , user wait for second user to have video chat and when third user enters it should wait for fourth and etc. i hope someone will help me with that

推荐答案

<你正困惑一个本地循环演示 - 你有什么 - 聊天室。

You're confusing a local-loop demo—what you have—with a chat room.

A 本地循环演示 是一种短路客户端唯一的概念验证，将同一页面上的两个对等连接相互链接。完全没用，除了证明API有效并且浏览器可以自己说话。

A local-loop demo is a short-circuit client-only proof-of-concept, linking two peer connections on the same page to each other. Utterly useless, except to prove the API works and the browser can talk to itself.

它包含 localPeerConnection 和 remotePeerConnection -or pc1 和 pc2 - 并非如何通常会编写WebRTC代码。它没有信号发送。

It contains localPeerConnection and remotePeerConnection—or pc1 and pc2—and is not how one would typically write WebRTC code. It leaves out signaling.

没有服务器很难演示信号，但我向人们展示了这个 标签演示 。右键单击并在两个相邻的窗口中打开它，然后单击其中一个 Call！按钮以调用另一个窗口。它使用 localSocket ，这是我使用localStorage进行信令的非生产黑客。

Signaling is hard to demo without a server, but I show people this tab demo. Right-click and open it in two adjacent windows, and click the Call! button on one to call the other. It uses localSocket, a non-production hack I made using localStorage for signaling.

同样没用，一个标签-demo看起来更像真实的代码：

Just as useless, a tab-demo looks more like real code:

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。

There's a single pc—your half of the call—and there's an onmessage signaling callback to handle the timing-critical asymmetric offer/answer negotiation correctly. Same JS on both sides.

这仍然不是聊天室。为此，您需要服务器逻辑来确定人们如何相遇，以及用于信令的Web套接字服务器。尝试 MDN上的本教程，最终以< a href =https://webrtc-from-chat.glitch.me/ =nofollow noreferrer>聊天演示。

This still isn't a chat-room. For that you need server logic to determine how people meet, and a web socket server for signaling. Try this tutorial on MDN which culminates in a chat demo.

这篇关于WebRTC远程和本地视频都显示本地流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！