JavaScript MediaSource 和 MediaRecorder 播放直播視頻滯后

Question

我一直在使用基於RTCConnection的 WebRTC 和名為simple-peer的庫使用WebRTC流式傳輸實時視頻，但我遇到了實時 stream 視頻（使用MediaRecorder ）之間的一些滯后，並且使用MediaSource播放

這是錄音機：

    var mediaRecorder = new MediaRecorder(stream, options);
    mediaRecorder.ondataavailable = handleDataAvailable;
    function handleDataAvailable(event) {
      if (connected && event.data.size > 0) {
        peer.send(event.data);
      }
    }
    ...
    peer.on('connect', () => {
      // wait for 'connect' event before using the data channel
      mediaRecorder.start(1);
    });

這是播放的源代碼：

    var mediaSource = new MediaSource();
    var sourceBuffer;
    mediaSource.addEventListener('sourceopen', args => {
      sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    });
    ...
    peer.on('data', data => {
      // got a data channel message
      sourceBuffer.appendBuffer(data);
    });

我打開兩個選項卡並連接到自己，我看到播放視頻有延遲......似乎我配置錯誤MediaRecorder或MediaSource

任何幫助將不勝感激;）

Answer 1

您已經結合了兩種完全不相關的技術來流式傳輸視頻，並且在兩者中取得了最糟糕的權衡。 :-)

WebRTC 內置了媒體 stream 處理。 如果您期望實時視頻，那么 WebRTC 堆棧就是您想要使用的。 它處理編解碼器協商、自動縮放帶寬、幀大小、幀速率和編碼參數以匹配網絡條件，並將徹底丟棄時間塊以盡可能保持實時播放。

另一方面，如果保持質量比實時更可取，那么您將使用 MediaRecorder。 它不會根據網絡條件進行調整，因為它不知道這些條件。 MediaRecorder 在為您提供緩沖區后不知道也不關心您將數據放在哪里。

如果您嘗試在錄制視頻時播放視頻，由於沒有內置的追趕方法，因此不可避免地會越來越落后。 唯一可能發生的是緩沖區欠載，播放端等待直到有足夠的數據再次開始播放。 即使它落后幾分鍾，它也不會自動向前跳過。

解決方案是使用正確的工具。 從你的問題聽起來你想要實時視頻。 因此，您需要使用 WebRTC。 幸運的是 simple-peer 使這...簡單。

在錄制方面：

const peer = new Peer({
  initiator: true,
  stream
});

然后在播放方面：

peer.on('stream', (stream) => {
  videoEl.srcObject = stream;
});

簡單得多。 WebRTC 堆棧為您處理一切。