3

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 URL.createObjectUrl and set to the src attribute in the HTML video tag. In this case, the video plays back just fine.

However...

If I store this videoBlob in MongoDB, it's converted into a BSON document which contains an ArrayBuffer element in the following format.

    ArrayBuffer {
  [Uint8Contents]: <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>,
  byteLength: 86833
}

Here's how the same ArrayBuffer appears when console.logged in the browser:

    (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

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:

var returnedArrayBuffer = video.data;//extracting the ArrayBuffer element from BSON document
  console.log(returnedArrayBuffer);
  var newVideoBlob = new Blob([returnedArrayBuffer], { type: 'video/webm;codecs="vp8,opus"' });//have also tried with a type of just "video/webm", original videoBlob MIME type is exactly as defined here as well
  console.log(newVideoBlob);
  var url = URL.createObjectURL(newVideoBlob);

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.

Omar Haqqani
  • 41
  • 1
  • 3
  • It should be `newVideoBlob = new Blob(returnedArrayBuffer, { type: 'video/webm;codecs="vp8,opus"' })` without the brackets – hackape Aug 23 '20 at 16:14
  • I get the following error when I remove the brackets: `Failed to construct 'Blob': The provided value cannot be converted to a sequence.` With the brackets, I don't get an error. I get a grayed-out video window appears on the screen and looks like it's attempting to load, but it eventually just stops loading. – Omar Haqqani Aug 24 '20 at 15:49
  • you're right @omar-haqqani ! thankfully, i've tried your code and it worked well on my live system! – MX-Qulin Feb 07 '21 at 09:03

0 Answers0