title: How to use MediaRecorder as MediaSource
body: <p>As an exercise in learning WebRTC I am trying to to show the local webcam and side by side with a delayed playback of the webcam. In order to achieve this I am trying to pass recorded blobs to a BufferSource and use the corresponding MediaSource as source for a video element.</p>
  
  <pre class="lang-js prettyprint-override"><code>// the ondataavailable callback for the MediaRecorder
  async function handleDataAvailable(event) {
    // console.log("handleDataAvailable", event);
    if (event.data &amp;&amp; event.data.size &gt; 0) {
      recordedBlobs.push(event.data);
    }
  
    if (recordedBlobs.length &gt; 5) {
      if (recordedBlobs.length === 5)
        console.log("buffered enough for delayed playback");
      if (!updatingBuffer) {
        updatingBuffer = true;
        const bufferedBlob = recordedBlobs.shift();
        const bufferedAsArrayBuffer = await bufferedBlob.arrayBuffer();
        if (!sourceBuffer.updating) {
          console.log("appending to buffer");
          sourceBuffer.appendBuffer(bufferedAsArrayBuffer);
        } else {
          console.warn("Buffer still updating... ");
          recordedBlobs.unshift(bufferedBlob);
        }
      }
    }
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// connecting the media source to the video element
  recordedVideo.src = null;
  recordedVideo.srcObject = null;
  recordedVideo.src = window.URL.createObjectURL(mediaSource);
  recordedVideo.controls = true;
  try {
    await recordedVideo.play();
  } catch (e) {
    console.error(`Play failed: ${e}`);
  }
  </code></pre>
  
  <p>All code: <a href="https://jsfiddle.net/43rm7258/1/" rel="noreferrer">https://jsfiddle.net/43rm7258/1/</a></p>
  
  <p>When I run this in Chromium 78 I get an <code>NotSupportedError: Failed to load because no supported source was found.</code> from the <code>play</code> element of the video element.</p>
  
  <p>I have no clue what I am doing wrong or how to proceed at this point.</p>
  
  <p>This is about something similar, but does not help me: <a href="https://stackoverflow.com/questions/37665469/mediasource-randomly-stops-video?noredirect=1#comment62899304_37665469">MediaSource randomly stops video</a></p>
  
  <p>This example was my starting point: <a href="https://webrtc.github.io/samples/src/content/getusermedia/record/" rel="noreferrer">https://webrtc.github.io/samples/src/content/getusermedia/record/</a></p>