title: Unable to stream video over a websocket to Firefox
body: <p>I have written some code stream video over a websocket so a <code>sourcebuffer</code> which works in Chrome and Edge.</p>
  
  <p>However, when I run this in Firefox, the video never plays back, just a spinning wheel animation is displayed. When I check the <code>&lt;video&gt;</code> statistics, It reads <code>HAVE_METADATA</code> as the ready state and <code>NETWORK_LOADING</code> as the network state.</p>
  
  <p>The code looks follows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;video controls&gt;&lt;/video&gt;
      &lt;script&gt;
        var mime = 'video/mp4; codecs="avc1.4D401E,mp4a.40.2"';
        var address = 'ws://localhost:54132'
  
        /* Media Source */
  
        var source = new MediaSource();
        var video = document.querySelector('video');
        video.src = URL.createObjectURL(source);
        source.addEventListener('sourceopen', sourceOpen);
  
        /* Buffer */
  
        var buffer;
        var socket;
        var queue = [];
        var offset = -1;
        var timescale;
  
        // When the media source opens:
        function sourceOpen() {
          buffer = source.addSourceBuffer(mime);
          buffer.addEventListener('updateend', processQueue);
  
          socket = new WebSocket(address);
          socket.binaryType = 'arraybuffer';
          socket.onmessage = onMessage; 
        }
  
        // When more data is received.
        function onMessage(event) {
          queue.push(event.data);
          processQueue();
        }
  
        // Process queue if possible.
        function processQueue() {
          if ((queue.length == 0) || (buffer.updating)) {
            return;
          }
  
          var data = queue.shift();
          if (offset === -1) {
            var parsed = parseMP4(data);
            if (parsed.hasOwnProperty('moov')) {
              timescale = parsed.moov.mvhd.timescale;
            } else if (parsed.hasOwnProperty('moof')) {
              offset = 0 - (parsed.moof.traf[0].tfdt.baseMediaDecodeTime / this.timescale - 0.4);
              buffer.timestampOffset = offset;
            }
          }
  
          // console.log('appending ' + data.byteLength + ' bytes');
          buffer.appendBuffer(data);
        }
  
        // Parse out the offset.
        function parseMP4(data) {
          // SNIP for brevity
        }
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>