MediaRecorder.ondataavailable

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

関連情報