Speichern riesiger Dateien

Question

Ich muss eine Datei unbekannter Größe, möglicherweise mehrere Gigabyte, in JS speichern. Die Datenquelle ist ein Mediastream, der mit Mediendaten aufgezeichnet wurde.

In Chrome kann dies mithilfe des Dateisystems und der Dateiwriter-API mit Dateisystem: URLs erreicht werden, indem Blob-Chunks in einen Dateieintrag geschrieben werden, sobald sie empfangen werden, und ein Download-Link auf die Datei-URL gesetzt wird.

Allerdings kann ich keinen Weg finden, dies in Firefox oder Edge zu tun (wenn es Mediagerekorder wird). Diese

Answer 1

funktioniert für mich 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>

Ein Benutzer hat immer noch den Download-Link zu klicken. Ich habe nicht mit der Größe der Datei experimentiert.