webrtc with firebase：如何修复 ios/safari 上的黑屏

Posted 2023-05-07

【中文标题】webrtc with firebase：如何修复 ios/safari 上的黑屏

【英文标题】：webrtc with firebase :how to fix black screen on ios/safari

【发布时间】：2020-05-30 15:39:42

【问题描述】：

我在我的网络应用中处理视频通话。我试过 [https://github.com/webrtc/FirebaseRTC/tree/solution][1] https://webrtc.org/getting-started/firebase-rtc-codelab 这里的例子。

它适用于这些浏览器：

桌面/chrome----->桌面/chrome 桌面/chrome----->桌面/火狐 桌面/火狐----->桌面/火狐

但不是 Safari，我只能看到黑屏。它不起作用。

桌面/chrome---->ios/safari ios/safari---->ios/safari

实际上我看到黑屏，但我认为 safari 获得媒体流但无法显示。

我在 codelab 中有这段代码：

 peerConnection.addEventListener('track', event => //other pc track
      console.log('Got remote track:', event.streams[0]);
       event.streams[0].getTracks().forEach(track => 
        console.log('Add a track to the remoteStream:', track);
        remoteStream.addTrack(track);
      );
    );

我该如何解决这个问题？

【问题讨论】：

这个问题很有价值，因为它涉及到一个棘手的领域，并在 Safari 中发现了一个错误。我投票重新开放。见github.com/webrtc/FirebaseRTC/issues/1

【参考方案1】：

我解决了它在 safari 上工作的问题，我现在可以获取 videStream。 我在codelab中更改了这段代码

 peerConnection.addEventListener('track', event => //other pc track
      console.log('Got remote track:', event.streams[0]);
       event.streams[0].getTracks().forEach(track => 
        console.log('Add a track to the remoteStream:', track);
        remoteStream.addTrack(track);
      );
    );

到

peerConnection.addEventListener('track', event => //other pc track
      console.log('Got remote track:', event.streams[0]);

        document.querySelector('#remoteVideo').srcObject = event.streams[0];
        console.log(event.streams[0]);
        remoteStream = event.streams[0];


    );

我认为 safari 不支持 remoteStream.addTrack(track);(remoteStream is a MediaStream obj) 我搜索了这个问题找不到任何东西。 p>

【讨论】：

addTrack 在 iOs 13 上为我工作，但仅在第二次尝试时，第一次给我一个黑色流，现在我将使用 event.stream

【参考方案2】：

像这样添加 playsinline：

<video playsinline autoplay></video>

对我有帮助

【参考方案3】：

我认为问题在于视频对象未在 addTrack 上“更新”。我通过在每次添加曲目时设置 srcObject 来解决这个问题：

peerConnection.addEventListener('track', event => 
    event.streams[0].getTracks().forEach(track => 
        remoteStream.addTrack(track);
    );
    myRemoteVideo.srcObject = remoteStream;
);