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

【问题标题】：webrtc with firebase :how to fix black screen on ios/safariwebrtc with firebase：如何修复 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

标签： javascript firebase safari html5-video webrtc

【解决方案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;
});

【讨论】：