CODEWITHSUNDEEP
javascriptstreamingwebrtchttp-live-streamingarraybuffer
mnowotka
mnowotka

Reputation: 17228

How to play HLS stream (or other video stream) obtained from WebRTC?

There are JavaScript libraries for playing HLS streams natively in browsers, for example https://github.com/dailymotion/hls.js

The example usage from the documentation looks like this:

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

What I would like to do is to replace URL (http://www.streambox.fr/playlists/test_001/stream.m3u8) with a Blob or ArrayBuffer used by the RTCDataChannel.

So imagine I'm creating a video stream on the fly in the browser (data for this stream IS NOT a video stream created using getUserMedia but is a data obtained from the other peers using RTCDataChannel), can I play it back immediately as a data is written to the buffer?

Upvotes: 1

Views: 3790

Answers (1)

Mick
Mick

Reputation: 25471

If you want to take an incoming stream and 'feed' it into the browser's HTML5 video player you can use the media source extensions mechanism - MSE. This will allow you play it back immediately as I think you want.

The MSE spec is available here online: http://w3c.github.io/media-source/

The following link provides a good overview/intro:

An outline example for your case:

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

Your Javascript pseudocode - won't run like this obviously, but it should give the general idea:

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

  }
};

One thing to note - MSE is relatively recent and while it is supported now by the latest versions of all major browsers (I think) this is still a new feature and everyone may not have it, so it is worth checking first that the users browser sports the feature. A good up to date summary of latest support is here:

And the code to check if it is supported is (https://developer.mozilla.org/en-US/docs/Web/API/MediaSource#Browser_compatibility):

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

Upvotes: 3

Related Questions