title: MediaSource error: This SourceBuffer has been removed from the parent media source
body: <p>I'm experimenting with the new MediaSource API available in Chrome.</p>
  
  <p>I'm trying to append binary data on the fly from a WebSocket to the video media source.</p>
  
  <p>Starting with the example at <a href="https://html5-demos.appspot.com/static/media-source.html">https://html5-demos.appspot.com/static/media-source.html</a>, my code is currently:</p>
  
  <pre><code>var websocket = new WebSocket('ws://localhost:8080');
  websocket.binaryType = 'arraybuffer';
  
  var mediaSource = new MediaSource();
  var buffer;
  var queue = [];
  
  var video = $('.video')[0];
  video.src = window.URL.createObjectURL(mediaSource);
  
  mediaSource.addEventListener('sourceopen', function(e) {
    video.play();
  
    buffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001E"');
  
    buffer.addEventListener('updatestart', function(e) { console.log('updatestart: ' + mediaSource.readyState); });
    buffer.addEventListener('update', function(e) { console.log('update: ' + mediaSource.readyState); });
    buffer.addEventListener('updateend', function(e) { console.log('updateend: ' + mediaSource.readyState); });
    buffer.addEventListener('error', function(e) { console.log('error: ' + mediaSource.readyState); });
    buffer.addEventListener('abort', function(e) { console.log('abort: ' + mediaSource.readyState); });
  
    buffer.addEventListener('update', function() { // Note: Have tried 'updateend'
      if (queue.length &gt; 0 &amp;&amp; !buffer.updating) {
        buffer.appendBuffer(queue.shift());
      }
    });
  }, false);
  
  mediaSource.addEventListener('sourceopen', function(e) { console.log('sourceopen: ' + mediaSource.readyState); });
  mediaSource.addEventListener('sourceended', function(e) { console.log('sourceended: ' + mediaSource.readyState); });
  mediaSource.addEventListener('sourceclose', function(e) { console.log('sourceclose: ' + mediaSource.readyState); });
  mediaSource.addEventListener('error', function(e) { console.log('error: ' + mediaSource.readyState); });
  
  websocket.addEventListener('message', function(e) {
    if (typeof e.data !== 'string') {
      if (buffer.updating || queue.length &gt; 0) {
        queue.push(e.data);
      } else {
        buffer.appendBuffer(e.data);
      }
    }
  }, false);
  </code></pre>
  
  <p>I consistently get the error message: <code>InvalidStateError: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.</code> after one append. It looks like the MediaSource is closing immediately after the call to <code>buffer.appendData()</code>.</p>
  
  <p>Any way to do this elegantly?</p>
  
  <p>Note: chrome://media-internals/ doesn't return any useful information.</p>