Is it possible to convert a MediaStream to a video blob with html5

Question

I am trying to capture a 5 minute long video from a web cam in a website.

I am currently using an html5 video element to display the getUserMedia result stream.

Is there anyway for me to get the contents of the stream once I finished with the recording?

I am left with a MediaStream object, and I guess it contains the video blob, can I access it somehow?

Prolamine

Answer 1

Saving a blob

const saveBlob = (function() {
  const a = document.createElement('a');
  document.body.appendChild(a);
  a.style.display = 'none';
  return function saveData(blob, fileName) {
     const url = window.URL.createObjectURL(blob);
     a.href = url;
     a.download = fileName;
     a.click();
  };
}());

Usage: saveBlob(someBlob, 'filename');

Note: S.O. snippets blocks downloading so here's a runnable version

https://jsgist.org/?src=fe37a11d207f0f83a877e0c0252539c2

Mahatma

Answer 2

You could encode the video as a data URI and add a download link.

http://appcropolis.com/blog/web-technology/using-html5-canvas-to-capture-frames-from-a-video/ http://www.iandevlin.com/blog/2012/09/html5/html5-media-and-data-uri

Foresail

I actually tried something similar, and encoded the result with Whammy.js. The result was pretty good, but I could only capture about 40-50 seconds. The reason was that the size of each frame was about 1.2 MB, so the RAM usage of the browser rose rapidly, and after that amount of time it hit the 1 GB mark and the browser crashed. That's why I am looking for a more efficient way. – Prolamine

@remoba check the configurate, may be change the frame rate to 10, i am using whammy.js, it works fine for me. – Arabela

also, you can look into this , github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC – Arabela

@mido22 Whammy.js itself isn't taking up a lot of memory, the encoding takes a big image array and compresses it to a very light video blob. The problem isn't with Whammy.js itself, but rather capturing the image array, which takes up a lot of memory – Prolamine

@Prolamine what are the browsers, your code has to support? if only firefox, it gives the option of recording webm directly – Arabela

@mido22 Sadly I also have to support chrome – Prolamine