PROSAGA码农传奇-webrtc-WebRTC视频未显示

<div class =“post-text”itemprop =“text”>
  <P>
    这是可怕的代码。它已经过时，有6个跟踪WebRTC API发展的问题。
  </p>
  <P>
    的<strong>
      TL; DR：
    </强>
     它不起作用，因为您没有检查错误，并且您只测试了一个浏览器。
  </p>
  <H2>
    1）旧供应商前缀（删除它们）：
  </H2>
   <pre>
    <code>
      yourConnection = new RTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration); // <-- wrong

</code>
  </pre>
  <P>
     <code>
      webkit
    </code>
    -names在Firefox或Edge中不起作用。多年来一直不需要这些。如果你切换到
     <code>
      navigator.mediaDevices.getUserMedia
    </code>
    ，你可以完全跳过10行前缀错误的序言。
  </p>
  <H2>
    2）使用旧的
     <code>
      url
    </code>
     （使用
     <code>
      urls
    </code>
    ）
  </H2>
  <P>
    这在技术上是错误的，但我怀疑大多数浏览器允许它：
  </p>
   <pre>
    <code>
      iceServers: [{url: "stun:stun.1.google.com:19302"}] // <-- wrong

</code>
  </pre>
  <P>
    而是使用：
  </p>
   <pre>
    <code>
      iceServers: [{urls: "stun:stun.1.google.com:19302"}]

</code>
  </pre>
  <P>
    ...因为技术上可以在多个网址上访问ICE服务器。
  </p>
  <H2>
    3）使用旧的回调API而不进行错误检查（改为使用promises）：
  </H2>
  <P>
    这是错的：
  </p>
   <pre>
    <code>
      navigator.getUserMedia({video: true, audio: true}, function(stream) { /* ... */ });

</code>
  </pre>
  <P>
    ...因为a
    <a href="https://w3c.github.io/mediacapture-main/getusermedia.html#idl-def-navigator-partial-2" rel="nofollow noreferrer">
      第三个失败回调参数是必需的
    </A>
    。 Edge说
     <code>
      TypeError: Argument not optional
    </code>
    。
  </p>
  <P>
    Chrome和Safari中的遗留错误允许这样做，但它不适用于Firefox或Edge。忽略错误会剥夺您学习为什么不起作用的原因。如果用户拒绝摄像头访问，你想知道。
  </p>
  <P>
    所有现代浏览器都支持
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises" rel="nofollow noreferrer">
      诺言
    </A>
    <a href="https://w3c.github.io/mediacapture-main/getusermedia.html#idl-def-mediadevices-partial-1" rel="nofollow noreferrer">
      API的版本
    </A>
     上
     <code>
      mediaDevices
    </code>
    。使用它代替：
  </p>
   <pre>
    <code>
      navigator.mediaDevices.getUserMedia({video: true, audio: true})
  .then(stream => { /* use stream here */ })
  .catch(error => console.log(error));

</code>
  </pre>
  <H2>
    4）你陷入了RTCPeerConnection的“承诺/回调混乱陷阱”：
  </H2>
  <P>
    我有
    <a href="https://stackoverflow.com/a/36406985/918910">
      之前回答过这个
    </A>
    ，但简而言之，这与上面的＃2相似，但有一点扭曲。这是错的：
  </p>
   <pre>
    <code>
      yourConnection.createOffer(function(offer) { /* ... */ });

</code>
  </pre>
  <P>
    你以为你在打电话给
    <a href="https://w3c.github.io/webrtc-pc/#legacy-interface-extensions" rel="nofollow noreferrer">
      旧的回调API
    </A>
    ，但你不是。那些要求
    的<strong>
      <EM>
        二
      </EM>
    </强>
     参数：
  </p>
   <pre>
    <code>
      yourConnection.createOffer(successCallback, failureCallback /*, optionsObject */);

</code>
  </pre>
  <P>
    相反，你实际上是在调用同名的
    <a href="https://w3c.github.io/webrtc-pc/#idl-def-rtcpeerconnection" rel="nofollow noreferrer">
      现代承诺API
    </A>
    ，因为函数是JS中的一个对象：
  </p>
   <pre>
    <code>
      const promise = yourConnection.createOffer(optionsObject);

</code>
  </pre>
  <P>
    这是您的代码停止工作的地方。永远不会调用您的回调函数，而是将其解释为空选项对象。您忽略了返回的承诺。请改用promise API。
  </p>
  <H2>
    5）createObjectURL（stream）已弃用，不见了。
  </H2>
  <P>
    它已在Firefox和Chrome 71中删除了
    <a href="https://i.stack.imgur.com/kIupZ.png" rel="nofollow noreferrer">
      警告
    </A>
     你收到）。这是错的：
  </p>
   <pre>
    <code>
      theirVideo.src = URL.createObjectURL(stream);

</code>
  </pre>
  <P>
    而是使用这个：
  </p>
   <pre>
    <code>
      theirVideo.srcObject = stream;

</code>
  </pre>
  <H2>
    6）对于额外点：不推荐使用整个流API（使用轨道）。
  </H2>
  <P>
     <code>
      addStream()
    </code>
     ＆安培;
     <code>
      onaddstream
    </code>
     已经不在了
    <a href="https://w3c.github.io/webrtc-pc/#idl-def-rtcpeerconnection-partial-3" rel="nofollow noreferrer">
      规范
    </A>
    ，仅适用于某些浏览器：
  </p>
   <pre>
    <code>
      yourConnection.addStream(stream);
theirConnection.onaddstream = e => theirVideo.srcObject = e.stream;

</code>
  </pre>
  <P>
    相反，对等连接现在完全基于跟踪。请改用：
  </p>
   <pre>
    <code>
      for (const track of stream.getTracks()) {
  yourConnection.addTrack(track, stream);
}
theirConnection.ontrack = e => theirVideo.srcObject = e.streams[0];

</code>
  </pre>
  <P>
    有关这些差异的更多信息，请参阅
    <a href="https://blog.mozilla.org/webrtc/the-evolution-of-webrtc/" rel="nofollow noreferrer">
      我的博客
    </A>
    。
  </p>
  <H2>
    工作实例
  </H2>
  <P>
    下列
    <a href="https://jsfiddle.net/jib1/rob3zxLa/" rel="nofollow noreferrer">
      应该适用于所有浏览器
    </A>
    ：
  </p>
   <pre>
    <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);
})();

</code>
  </pre>
</DIV>