MediaRecorder.ondataavailable
イベントハンドラ(MediaStream Recording API の一部)は dataavailable
イベントを処理します。 これにより、Blob
データが使用可能になったことに応じてコードを実行できます。
dataavailable
イベントは、MediaRecorder
がメディアデータをアプリで使用するために引き渡すときに発生します。 データはデータを含む Blob
オブジェクトで提供されます。 これは次の4つの状況で発生します。
- メディアストリームが終了すると、
ondataavailable
ハンドラにまだ引き渡されていないメディアデータはすべて単一のBlob
で渡されます。 MediaRecorder.stop()
を呼び出すと、記録を開始してから、または最後にdataavailable
イベントが発生してからキャプチャされたすべてのメディアデータがBlob
で引き渡されます。 この後、キャプチャは終了します。MediaRecorder.requestData()
を呼び出すと、記録を開始してから、または最後にdataavailable
イベントが発生してからキャプチャされたすべてのメディアデータが引き渡されます。 その後、新しいBlob
が作成され、メディアのキャプチャがその blob に対して続行されます。- メディアキャプチャを開始した
MediaRecorder.start()
メソッドにtimeslice
プロパティを渡した場合は、timeslice
ミリ秒ごとにdataavailable
イベントが発生します。 つまり、各 blob は特定の期間を持つことになります(最後の blob を除いてで、最後のイベント以降に残っているものは何でもということになるので、これはもっと短いかもしれません)。 そのため、メソッド呼び出しが次のようになっていれば —recorder.start(1000);
—dataavailable
イベントはメディアキャプチャの毎秒後に発生し、イベントハンドラは一秒の長さのメディアデータの blob で毎秒呼ばれるでしょう。MediaRecorder.stop()
およびMediaRecorder.requestData()
と共にtimeslice
を使用して、複数の同じ長さの blob と他の短い blob を生成することもできます。
メディアデータを含む Blob
は、dataavailable
イベントの data
プロパティで利用できます。
構文
MediaRecorder.ondataavailable = function(event) { ... }
MediaRecorder.addEventListener('dataavailable', function(event) { ... })
例
...
var chunks = [];
mediaRecorder.onstop = function(e) {
console.log("MediaRecorder.stop() 呼び出し後に利用可能なデータ。");
var audio = document.createElement('audio');
audio.controls = true;
var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
var audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
console.log("レコーダー停止");
}
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
}
...
仕様
仕様 | 状態 | コメント |
---|---|---|
MediaStream Recording MediaRecorder.ondataavailable の定義 |
草案 | 初期定義 |
ブラウザーの互換性
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
関連情報
- Using the MediaStream Recording API
- ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著(Github のソース)。(英語)
- simpl.info の MediaStream Recording のデモ、Sam Dutton 著。(英語)
MediaDevices.getUserMedia