使用WebRTC在远程浏览器中查看视频，本地浏览器永远不会得到ontrack事件

Posted 2023-05-08

【中文标题】使用WebRTC在远程浏览器中查看视频，本地浏览器永远不会得到ontrack事件

【英文标题】：Using WebRTC to view video in a remote browser, local browser never gets ontrack event

【发布时间】：2017-10-22 00:50:30

【问题描述】：

我正在尝试从没有活动视频流的浏览器向有活动视频流的浏览器发出 webRTC“调用”。这个想法是允许原始浏览器查看接收浏览器的网络摄像头。

编辑：我的特定应用程序仅调用单向视频。不涉及音频流。

调用是指只有两个端点的点对点连接。

通话设置正确；提供/回答和候选人交换协议正常运行。

但源浏览器的RTCPeerConnection.ontrack 事件处理程序永远不会被调用来从接收调用的浏览器中宣布视频轨道。

翻转发起者和接收者的工作原理：如果我从浏览器发起呼叫 视频轨道 - 也就是说，获取该浏览器的 RTCPeerConnection 对象以生成 offer 对象 - 他的浏览器没有本地视频流确实获得了 ontrack 事件。

连接两端的所有 Google Chrome 和 Firefox 组合都会发生这种情况。 （Chrome 58.0.3029.110 64 位，Firefox 53.0.2）

Sone 较早的文档提到 OfferToREceiveVideo 作为 pc.createOffer() 方法的一个选项。但我不确定这是否有效。较新的文档没有提到它。无论如何，包括或省略它似乎并不重要。

var offerOptions = OfferToReceiveVideo: true, 
                    mandatory: OfferToReceiveVideo: true;

localPeerConnection.createOffer ( offerOptions )
    .then(
        function ( offer ) 
          localPeerConnection.setLocalDescription( offer );
          // send the offer to the far end via signaling server

         )
    .catch(
        function ( error ) 
          trace( "error in createOffer", error );
         );

编辑我也尝试过这个版本的选项对象，结果相同（否定）。

var offerOptions = offerToReceiveVideo: true;

和

var offerOptions = offerToReceiveVideo: true, offerToReceiveAudio: false;

没有成功。

关于非对称纯视频 webRTC 连接是否存在一些我不理解的限制？我必须做些什么来欺骗原始 RTCPeerConnection 对象来识别传入的视频流吗？

我有一个解决方法：向信令添加“请求”事务，以允许无视频浏览器对支持视频的浏览器说“给我打电话”。但我希望有更优雅的东西。

【问题讨论】：

WebRTC OfferToReceiveAudio error in Firefox的可能重复

在offerToReceiveVideo 中使用小写o，并去掉mandatory。

@jib 恕我直言，您指出的问题和答案不会重复我的视频唯一情况。我已经澄清了我的问题。

【参考方案1】：

您没有向我们展示的代码中有一个错误。这应该可以正常工作（在 Chrome 中使用 https fiddle）：

var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

var haveGum = navigator.mediaDevices.getUserMedia(video: true, audio: true);

pc1.ontrack = e => video1.srcObject = e.streams[0];
pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate).catch(log);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate).catch(log);
pc1.oniceconnectionstatechange = e => log(pc1.iceConnectionState);

pc1.createOffer(offerToReceiveAudio: true, offerToReceiveVideo: true)
  .then(d => pc1.setLocalDescription(d))
  .then(() => pc2.setRemoteDescription(pc1.localDescription))
  .then(() => haveGum)
  .then(stream => pc2.addStream(video2.srcObject = stream))
  .then(() => pc2.createAnswer()).then(d => pc2.setLocalDescription(d))
  .then(() => pc1.setRemoteDescription(pc2.localDescription))
  .catch(log);

var log = msg => div.innerhtml += "<br>" + msg;

<video id="video1"   autoplay></video>
<video id="video2"   autoplay muted></video><br>
<div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

警告！ Run code snippet 似乎让 Chrome 崩溃了！