MediaRecorder

MediaStream Recording API の MediaRecorder インターフェイスは、メディアを簡単に記録するための機能を提供します。 これは、MediaRecorder() コンストラクタを使用して作成します。

コンストラクタ

MediaRecorder()

記録する MediaStream を指定して、新しい MediaRecorder オブジェクトを作成します。 コンテナの MIME タイプ（ "video/webm" や "video/mp4" など）、音声トラックと動画トラックのビットレート、または単一の全体的なビットレートの設定などを行うためのオプションがあります。

Properties

MediaRecorder.mimeType 読取専用

MediaRecorder オブジェクトの作成時にその記録コンテナとして選択した MIME タイプを返します。

MediaRecorder.state 読取専用

MediaRecorder オブジェクトの現在の状態（inactive（非活動）、recording（記録中）、paused（一時停止中））を返します。

MediaRecorder.stream 読取専用

MediaRecorder を作成したときにコンストラクタに渡したストリームを返します。

MediaRecorder.ignoreMutedMedia

入力 MediaStreamTrack がミュートされたときに MediaRecorder インスタンスが入力を記録するかどうかを示します。 この属性が false の場合、MediaRecorder は音声には無音を、動画には黒のフレームを記録します。 デフォルトは false です。

MediaRecorder.videoBitsPerSecond 読取専用

使用中の動画エンコードビットレートを返します。 これは、コンストラクタで指定したビットレートとは異なる場合があります（指定した場合）。

MediaRecorder.audioBitsPerSecond 読取専用

使用中の音声エンコードビットレートを返します。 これは、コンストラクタで指定したビットレートとは異なる場合があります（指定した場合）。

メソッド

MediaRecorder.isTypeSupported()

       与えられた MIME タイプを現在のユーザーエージェントがサポートしているかどうかを示す Boolean 値を返します。

MediaRecorder.pause()

メディアの記録を一時停止します。

MediaRecorder.requestData()

 これまでに受信した保存データを含む Blob を要求します（または最後に requestData() が呼び出されてから受信した）。 このメソッドを呼び出した後、記録は続行されますが、新しい Blob に格納されます。

MediaRecorder.resume()

一時停止したメディアの記録を再開します。

MediaRecorder.start()

メディアの記録を開始します。 このメソッドには、オプションで、ミリ秒単位の値を指定して timeslice 引数を渡すことができます。 これが指定されている場合、メディアは単一の大きなチャンクにメディアを記録するというデフォルトのふるまいではなく、その期間の別々のチャンクにキャプチャされます。

MediaRecorder.stop()

記録を停止します。 この時点で、保存したデータの最後の Blob を含む dataavailable イベントが発生します。 これ以上記録は行われません。

イベントハンドラ

MediaRecorder.ondataavailable

timeslice のミリ秒単位のメディアが記録されるたびに（または timeslice が指定されていない場合はメディア全体が記録されると）定期的にトリガされる dataavailable イベントを処理するために呼び出されます。 BlobEvent 型のイベントには、data プロパティに記録済みメディアが含まれています。 その後、このイベントハンドラを使用して、その記録済みメディアのデータを収集して操作することができます。

MediaRecorder.onerror

メディアの記録で発生したエラーの報告など、error イベントを処理するために呼び出される EventHandler です。 これらは記録を停止する致命的なエラーです。 受信したイベントは MediaRecorderErrorEvent インターフェイスに基づいていて、その error プロパティには、発生した実際のエラーを説明する DOMException が含まれています。

MediaRecorder.onpause

メディアの記録が一時停止したときに発生する pause イベントを処理するために呼び出される EventHandler です。

MediaRecorder.onresume

メディアの記録が一時停止後に再開したときに発生する resume イベントを処理するために呼び出される EventHandler です。

MediaRecorder.onstart

メディアの記録を開始したときに発生する start イベントを処理するために呼び出される EventHandler です。

MediaRecorder.onstop

MediaStream の終了時、または MediaRecorder.stop() メソッドの呼び出し後のいずれかに、メディアの記録が終了したときに発生する stop イベントを処理するために呼び出される EventHandler です。

イベント

addEventListener() を使用するか、このインタフェースの oneventname プロパティにイベントリスナを割り当てることによって、これらのイベントを監視します。

error

エラーが発生したときに発生します。 例えば、記録が許可されていないか、サポートされていないコーデックを使用して試行したためです。
onerror プロパティからも入手できます。

例

if (navigator.mediaDevices) {
  console.log('getUserMedia supported.');

  var constraints = { audio: true };
  var chunks = [];

  navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {

    var mediaRecorder = new MediaRecorder(stream);

    visualize(stream);

    record.onclick = function() {
      mediaRecorder.start();
      console.log(mediaRecorder.state);
      console.log("recorder started");
      record.style.background = "red";
      record.style.color = "black";
    }

    stop.onclick = function() {
      mediaRecorder.stop();
      console.log(mediaRecorder.state);
      console.log("recorder stopped");
      record.style.background = "";
      record.style.color = "";
    }

    mediaRecorder.onstop = function(e) {
      console.log("data available after MediaRecorder.stop() called.");

      var clipName = prompt('Enter a name for your sound clip');

      var clipContainer = document.createElement('article');
      var clipLabel = document.createElement('p');
      var audio = document.createElement('audio');
      var deleteButton = document.createElement('button');
     
      clipContainer.classList.add('clip');
      audio.setAttribute('controls', '');
      deleteButton.innerHTML = "Delete";
      clipLabel.innerHTML = clipName;

      clipContainer.appendChild(audio);
      clipContainer.appendChild(clipLabel);
      clipContainer.appendChild(deleteButton);
      soundClips.appendChild(clipContainer);

      audio.controls = true;
      var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
      chunks = [];
      var audioURL = URL.createObjectURL(blob);
      audio.src = audioURL;
      console.log("recorder stopped");

      deleteButton.onclick = function(e) {
        evtTgt = e.target;
        evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
      }
    }

    mediaRecorder.ondataavailable = function(e) {
      chunks.push(e.data);
    }
  })
  .catch(function(err) {
    console.log('The following error occurred: ' + err);
  })
}

仕様

ブラウザーの互換性

関連情報

• Media​Stream Recording API の使用
• ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著（Github のソース）。（英語）
• メディア要素の記録
• simpl.info の MediaStream Recording のデモ、Sam Dutton　著。（英語）
• navigator.mediaDevices.getUserMedia()
• OpenLang: MediaDevices と MediaStream Recording API を動画の録画に使用する HTML5 動画言語ラボウェブアプリ（GitHub のソース）（英語）