webrtc 與 firebase：如何修復 ios/safari 上的黑屏

Question

我在我的 web 應用程序中進行視頻通話。 我在https://webrtc.org/getting-started/firebase-rtc-codelab上嘗試了 [ https://github.com/webrtc/FirebaseRTC/tree/solution][1]示例。

它適用於這些瀏覽器：

• 桌面/鉻----->桌面/鉻
• 桌面/鉻----->桌面/火狐
• 桌面/火狐----->桌面/火狐

但不是 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);
      });
    });

我該如何解決這個問題？

Answer 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 是一個 MediaStream obj ) 我搜索了這個問題找不到任何東西。

Answer 2

像這樣添加playinline ：

<video playsinline autoplay></video>

在我的情況下有所幫助

Answer 3

我發現添加playsinline HTML 屬性不起作用。

您可以嘗試使用 JavaScript 啟用playsInline選項：

document.querySelector('video#remoteVideo').playsInline = true;

Answer 4

我認為問題在於視頻對象沒有在 addTrack 上“更新”。 我通過在每次添加曲目時設置 srcObject 來解決這個問題：

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

Answer 5

您必須使用 JS 添加playisinline屬性，但是：

video.playsinline = true; // ❌ This does not work on iOS (although works everywhere else)

video.setAttribute('playsinline', ''); // ✅ This works on iOS and everywhere else