title: How to download (or get as a blob) a MediaSource used for streaming HTML5 video?
body: <p>I'm streaming a dynamically-generated MP4 into a webpage over a WebSocket. I assemble a MediaSource (<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaSource" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/MediaSource</a>) as the fragments come in, use that for the HTML5 video element, and my video plays fine in all major browsers.</p>
  
  <p>What I'd like to do is add the ability for a user to download this video. My first attempt was to see if I could get access to it through the <code>video.src</code> property, which I set with <code>window.URL.createObjectURL(my_media_source)</code>. This URL is a blob URL of the form "blob:null/abb348e0-3459-8344-bf1e-063dd001f09a". I don't know why there is a null in that url, but it is consistently there. An XMLHttpRequest to get this blob fails.</p>
  
  <p>So, what is the <em>right</em> way to take my streaming video that plays fine and download it as a single file? The MediaSource seems to contain the entire video stream -- can I get access to that as an arraybuffer or a blob or whatever? </p>