title: This SourceBuffer has been removed from the parent media source
body: <p>I'm trying to readStream an mp4 file  and send chunks back to the client. I'm using the mediasource api. The code is failing on:</p>
  
  <pre><code> sourceBuffer.appendBuffer(new Uint8Array(mediaChunkBuffer));
  </code></pre>
  
  <p>with the error: <strong>This SourceBuffer has been removed from the parent media source</strong></p>
  
  <p>I'm able to append the first chunk this is done by calling initialMediaChunk(). for all subsequent chunks, i'm calling subsequentMediaChunk(). I get a MediaSource Api error.</p>
  
  <p>I notice after the first chunk, the mediaSource sourceclose event is called, making the mediaSource.readystate set to false, for subsequent chunks. </p>
  
  <pre><code>let mediaSource;
  let mediaQueue = [];
  let mediaChunkBuffer; 
  
  function subsequentMediaChunk(dataObj)
  {
      mediaChunkBuffer = new Uint8Array(dataObj.data.dataChunk).buffer;
      if (sourceBuffer.updating || mediaQueue.length &gt; 0) {
          mediaQueue.push(mediaChunkBuffer);
      } else {
          sourceBuffer.appendBuffer(new Uint8Array(mediaChunkBuffer));  // failing here
      }
  }
  function initialMediaChunk(dataObj){
      mediaChunkBuffer = new Uint8Array(dataObj.data.dataChunk).buffer;
      var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
  
           if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
           mediaSource = new MediaSource();
           mediaSource.addEventListener('error', function(e) {
           console.log(e);
           });
           mediaSource.addEventListener('sourceclose', function(e) {
           console.log(e);
           })
           mediaSource.addEventListener('sourceopen', function(e) {
               var mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
               sourceBuffer = mediaSource.addSourceBuffer(mime);
  
               var file = new Blob([mediaChunkBuffer], {type: type});
               var reader = new FileReader();
  
                reader.onload = function(e) {
                  sourceBuffer.addEventListener('onupdate', function() { // Note: Have tried 'updateend'
                      if (mediaQueue.length &gt; 0 &amp;&amp; !sourceBuffer.updating) {
  
                        sourceBuffer.appendBuffer(new Uint8Array(mediaQueue.shift()));
                      }
                  });
                  sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
                }
  
                reader.readAsArrayBuffer(file);
  
            }, false);
           let videoElement = $("#" + loadVideoFileName).find('video');
           videoElement.attr("src",window.URL.createObjectURL(mediaSource));
  
         }
  }
  </code></pre>