37207

Saving Huge Files

Question:

I need to save a file of unknown size, potentially multiple gigabytes, in JS. The data source is a mediastream captured using mediarecorder.

In Chrome, this can be accomplished using the filesystem and filewriter apis with filesystem: urls by writing blob chunks to a fileentry as they are received, then setting a download link to the file url.

However, I cannot find a way to do this in Firefox or Edge (whenever it gets mediarecorder).

Answer1:

This works for me in Firefox:

<pre class="snippet-code-js lang-js prettyprint-override">navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => record(stream, 5000) .then(recording => { stop(stream); video.src = link.href = URL.createObjectURL(new Blob(recording)); link.download = "recording.webm"; link.innerHTML = "Download blob"; log("Playing "+ recording[0].type +" recording."); }) .catch(log).then(() => stop(stream))) .catch(log); var record = (stream, ms) => { var rec = new MediaRecorder(stream), data = []; rec.ondataavailable = e => data.push(e.data); rec.start(); log(rec.state + " for "+ (ms / 1000) +" seconds..."); var stopped = new Promise((r, e) => (rec.onstop = r, rec.onerror = e)); return Promise.all([stopped, wait(ms).then(() => rec.stop())]) .then(() => data); }; var stop = stream => stream.getTracks().forEach(track => track.stop()); var wait = ms => new Promise(resolve => setTimeout(resolve, ms)); var log = msg => div.innerHTML += "<br>" + msg; <pre class="snippet-code-html lang-html prettyprint-override"><video id="video" height="120" width="160" autoplay></video> <a id="link"></a><br> <div id="div"></div>

A user still has to click the download link. I haven't experimented with how large the file can get.

Recommend

  • Phonegap fileTransfer.Download is not working on ios phonegap 3.0
  • Where is the file sandbox for a Chrome app?
  • Saving image to SD Card in a Worklight application
  • Loading resources from html5 filesystem api
  • How do you download a image/png data URI in Edge?
  • Controlling tab space in a using CSS?
  • Remove border around the color in an input[type=color] in Firefox?
  • Overriding window.location on Webbrowser Control
  • Problems with toDataURL HTML5 other ways to get canvas data?
  • saving file generated by TCPDF
  • Button text different than value submitted in query string
  • Odoo 10 - Overriding unlink method
  • Webgrid not refreshing after delete MVC
  • WPF - CanExecute dosn't fire when raising Commands from a UserControl
  • Content-Length header not returned from Pylons response
  • Python urlparse: small issue
  • Jquery UI tool tip close icon
  • Chrome doesn't support silverlight anymore? How to solve this?
  • Display issues when we change from one jquery mobile page to another in firefox
  • Ajax jQuery multiple calls at the same time - long wait for answer and not able to cancel
  • How to recover from a Spring Social ExpiredAuthorizationException
  • Updating server-side rendering client-side
  • ILMerge & Keep Assembly Name
  • Can I make an Android app that runs a web view in Chrome 39?
  • 'TypeError' while using NSGA2 to solve Multi-objective prob. from pyopt-sparse in OpenMDAO
  • Large data - storage and query
  • WOWZA + RTMP + HTML5 Playback?
  • Circular dependency while pushing http interceptor
  • Traverse Array and Display in markup
  • AngularJs get employee from factory
  • Proper way to use connect-multiparty with express.js?
  • How to set the response of a form post action to a iframe source?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Change div Background jquery
  • Qt: Run a script BEFORE make
  • Linking SubReports Without LinkChild/LinkMaster
  • How can I remove ASP.NET Designer.cs files?
  • python draw pie shapes with colour filled
  • Is there any way to bind data to data.frame by some index?
  • How can i traverse a binary tree from right to left in java?