Saving huge files

Question

I need to save a file of unknown size, potentially several gigabytes, in JS. A data source is a media stream captured using a mediarecorder.

In Chrome, this can be done using the file system and the apis file manager with the file system: URLs, writing the block fragments to a file when they are received, and then set the download link to the file URL.

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

Answer 1

This works for me in Firefox:

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; 

 <video id="video" height="120" width="160" autoplay></video> <a id="link"></a><br> <div id="div"></div> 

The user still has to click the download link. I have not experimented with how large a file can get.