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?

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

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