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

有播放HLS在瀏覽器的原生流，例如JavaScript庫https://github.com/dailymotion/hls.js 如何播放從WebRTC獲取的HLS流（或其他視頻流）？

從文檔的用法示例如下：

<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>

我想要做的就是更換URL（http://www.streambox.fr/playlists/test_001/stream.m3u8 ），RTCDataChannel使用Blob或ArrayBuffer。

所以，想象一下我創建瀏覽器中的動態視頻流（該數據流未使用getUserMedia視頻流創建，但使用RTCDataChannel其他同行所獲得的數據），我可以打回來數據是否寫入緩衝區？

來源

2015-11-23 mnowotka

就是你的流將實際接收HLS--一種流式封裝格式，通常包含對視頻流的多個比特率版本的引用或指針？或者它只是一個簡單的單比特率視頻在一個mp4（例如）'容器'被流式傳輸？ – Mick

爲簡單起見，我們假設mp4中的單比特率視頻 – mnowotka

好的 - MSE應該可以幫助您。我會在下面發佈一些信息 – Mick

如果您想要接收流並將其「饋送」到瀏覽器的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> 
. 
. 
.

Y我們的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是相對較新的，雖然它是由所有主要瀏覽器的最新版本現在支持（我認爲）這仍然是一項新功能，而且每個人都可能沒有，所以首先需要檢查用戶瀏覽器是否支持該功能。一個好的高達最新支持日期摘要這裏：

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)) {

來源

2015-11-23 20:54:22 Mick

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

回答

相關問題