title: How to convert ArrayBuffer to blob so it can be converted to URL for video playback
body: <p>I'm trying to create a React.js app that can record short video clips, store them in MongoDB, then retrieve those clips from Mongo at another time and playback for the user.  I'm able to record video using the react-video-recorder which returns a videoBlob after recording.  This videoBlob can be converted via <code>URL.createObjectUrl</code> and set to the src attribute in the HTML video tag.  In this case, the video plays back just fine.</p>
  <p>However...</p>
  <p>If I store this videoBlob in MongoDB, it's converted into a BSON document which contains an ArrayBuffer element in the following format.</p>
  <pre><code>    ArrayBuffer {
    [Uint8Contents]: &lt;1a 45 df a3 9f 42 86 81 01 42 f7 81 01 42 f2 81 04 42 f3 81 08 42 82 84 77 65 62 6d 42 87 81 04 42 85 81 02 18 53 80 67 01 ff ff ff ff ff ff ff 15 49 a9 66 99 2a d7 b1 83 0f 42 40 4d 80 86 43 68 72 6f 6d 65 57 41 86 43 68 72 6f 6d 65 16 54 ae 6b ea ae bd d7 81 01 73 c5 87 2a 21 fb 84 af c3 05 83 81 ... 86733 more bytes&gt;,
    byteLength: 86833
  }
  </code></pre>
  <p>Here's how the same ArrayBuffer appears when console.logged in the browser:</p>
  <pre><code>    (86833) [26, 69, 223, 163, 159, 66, 134, 129, 1, 66, 247, 129, 1, 66, 242, 129, 4, 66, 243, 129, 8, 66, 130, 132, 119, 101, 98, 109, 66, 135, 129, 4, 66, 133, 129, 2, 24, 83, 128, 103, 1, 255, 255, 255, 255, 255, 255, 255, 21, 73, 169, 102, 153, 42, 215, 177, 131, 15, 66, 64, 77, 128, 134, 67, 104, 114, 111, 109, 101, 87, 65, 134, 67, 104, 114, 111, 109, 101, 22, 84, 174, 107, 234, 174, 189, 215, 129, 1, 115, 197, 135, 42, 33, 251, 132, 175, 195, 5, 131, 129, …]
  [0 … 9999]
  [10000 … 19999]
  [20000 … 29999]
  [30000 … 39999]
  [40000 … 49999]
  [50000 … 59999]
  [60000 … 69999]
  [70000 … 79999]
  [80000 … 86832]
  length: 86833
  </code></pre>
  <p>I haven't been able to successfully convert this ArrayBuffer back into the original blob which can be used to play back the video.  How would I go about doing this?  Here is what I've already tried:</p>
  <pre><code>var returnedArrayBuffer = video.data;//extracting the ArrayBuffer element from BSON document
    console.log(returnedArrayBuffer);
    var newVideoBlob = new Blob([returnedArrayBuffer], { type: 'video/webm;codecs=&quot;vp8,opus&quot;' });//have also tried with a type of just &quot;video/webm&quot;, original videoBlob MIME type is exactly as defined here as well
    console.log(newVideoBlob);
    var url = URL.createObjectURL(newVideoBlob);
  </code></pre>
  <p>However, this returns a blob that is roughly three times the size of the original blob and fails to playback at all. What am I doing wrong here?  Any assistance is greatly appreciated.</p>