Problem streaming video using media source extensions

Question

I seem to have a very strange problem. I am trying to play a video which is being streamed live using a web browser. For this, I am looking at the MediaSource object. I have got it in a way so that the video is taken from a server in chunks to be played. The problem is that the first chunk plays correctly then playback stops.

To make this even more strange, if I put the computer to sleep after starting streaming, then wake it up andthe video will play as expected.

Some Notes:

1. I am currently using chrome.

2. I have tried both of them ,with and without calling MediaSource's endOfStream.

   var VF = 'video/webm; codecs="vp8,opus"';
   var FC = 0;
   alert(MediaSource.isTypeSupported(VF));
   
   var url = window.URL || window.webkitURL;
   var VSRC = new MediaSource();
   var VURL = URL.createObjectURL(VSRC);
   var bgi, idx = 1;
   var str, rec, dat = [], datb, brl;
   var sbx;
   
   //connect the mediasource to the <video> elment first.
   vid2.src = VURL;
   
   VSRC.addEventListener("sourceopen", function () {
       // alert(VSRC.readyState);
       //Setup the source only once.
       if (VSRC.sourceBuffers.length == 0) {
           var sb = VSRC.addSourceBuffer(VF);
           sb.mode = 'sequence';
           sb.addEventListener("updateend", function () {
               VSRC.endOfStream();
           });
           sbx = sb;
       }
   });
   
   
   //This function will be called each time we get more chunks from the stream.
   dataavailable = function (e) {
               //video is appended to the sourcebuffer, but does not play in video element
               //Unless the computer is put to sleep then awaken!?
               sbx.appendBuffer(e.result);
               FC += 1;
               //These checks behave as expected.
               len.innerHTML = "" + sbx.buffered.length + "|" + VSRC.duration;
               CTS.innerHTML = FC;
   };
   

Answer 1

You are making two big mistakes:

1. You can only call sbx.appendBuffer when sbx.updating property is false, otherwise appendBuffer will fail. So what you need to do in reality is have a queue of chunks, and add a chunk to the queue if sbx.updating is true:

   if (sbx.updating || segmentsQueue.length > 0)
       segmentsQueue.push(e.result);
   else
       sbx.appendBuffer(e.result);
   

2. Your code explicitly says to stop playing after the very first chunk:

   sb.addEventListener("updateend", function () {
       VSRC.endOfStream();
           });
   

   Here is what you really need to do:

   sb.addEventListener("updateend", function () {
       if (!sbx.updating && segmentsQueue.length > 0) {
           sbx.appendBuffer(segmentsQueue.shift());
       }
   });