2016-03-30 26 views
2

JSに潜在的に複数のギガバイトのファイルを保存する必要があります。データソースは、メディアコードを使用してキャプチャされたメディアストリームです。巨大なファイルを保存する

Chromeでは、fileystem:urlsでファイルシステムとファイルライターのapisを使用して、受け取ったファイルエントリにBLOBチャンクを書き込んだ後、ファイルURLへのダウンロードリンクを設定することで達成できます。

しかし、私はFirefoxやEdge(mediarecorderを取得するたびに)でこれを行う方法を見つけることができません。

答えて

2

これは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>

ユーザーは、ダウンロードリンクをクリックする必要があります。私は、ファイルがどれくらい大きくなるか実験していません。

+0

ファイル名を 'recording.blob'に設定しましたが、これはビデオファイルです。ファイルタイプとは何ですか?どのように再生しますか? – styfle

+2

@styfle OSXでこのスニペットを実行すると、ダウンロードされたファイルは、内部にvp8、yuv420p、640x480のビデオトラックを持つ "matroska webm"メディア形式のファイルと表示されます。この例の拡張子を '.blob'から' .webm'に変更しました。これはFirefoxとChromeのファイルURLとして私にとってうまくいきます。 * file:///Users/Foo/recording.webm*。 – jib

関連する問題