如何播放從WebRTC獲得的HLS流（或其他視頻流）？

Question

有一些JavaScript庫可在瀏覽器中本地播放HLS流，例如https://github.com/dailymotion/hls.js

文檔中的示例用法如下所示：

<script src="dist/hls.js"></script>
<video id="video"></video>
<script>
   if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://www.streambox.fr/playlists/test_001/stream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

我想用RTCDataChannel使用的Blob或ArrayBuffer替換URL（ http://www.streambox.fr/playlists/test_001/stream.m3u8 ）。

因此，假設我正在瀏覽器中動態創建視頻流（該流的數據不是使用getUserMedia創建的視頻流，而是使用RTCDataChannel從其他對等方獲取的數據），我可以立即將其作為數據播放RTCDataChannel被寫入緩沖區？

Answer 1

如果要獲取傳入流並將其“饋送”到瀏覽器的HTML5視頻播放器中，則可以使用媒體源擴展機制-MSE。 這樣您就可以按照我的意願立即播放它。

可在此處在線獲得MSE規范： http ： //w3c.github.io/media-source/

以下鏈接提供了很好的概述/簡介：

• http://updates.html5rocks.com/2011/11/Stream-video-using-the-MediaSource-API

您的案例的概述示例：

.
.
.
<div>
  <video id="myStreamedVideo" width="320" height="240"></video> 
</div>
.
.
.

您的Javascript偽代碼-顯然不會像這樣運行，但是應該給出大致的思路：

//Get the video element
var videoElement = document.getElementById('myStreamedVideo');

//Create a 'MediaSource' and associate it with this video
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);

//Add a listener to the MediaSource object to check for
//the video been opened. In this function you can add your
//code to get the received video chunks from the socket

mediaSource.addEventListener('sourceopen', function(e) {

  //Set the format of the source video
  var mediaSourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');

  //Get your video from the web
  while (not the end of your video) {
    ...
    //Receive some video packets from web socket 
    ...
    //Add packets received to the media source bufer
    mediaSourceBuffer.appendBuffer(receivedVideoPackets);

    //You can also add the received data to a file here if wanted.

  }
};

需要注意的一件事-MSE是相對較新的，盡管現在所有主要瀏覽器的最新版本都支持MSE（我認為），但這仍然是一項新功能，每個人都可能沒有，所以值得首先檢查一下用戶瀏覽器運動功能。 最新的最新支持摘要在這里：

• http://www.jwplayer.com/html5/mediasource/

用於檢查是否受支持的代碼是（ https://developer.mozilla.org/en-US/docs/Web/API/MediaSource#Browser_compatibility ）：

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {