MediaRecorder - Web API

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);
  })
}

このコードサンプルは、ウェブディクタフォン（Web Dictaphone）のデモから着想を得たものです。簡潔にするために一部の行は省略されています。完全なコードについてはソースを参照してください。

仕様

仕様	状態	コメント
MediaStream Recording	草案	初期定義

ブラウザーの互換性

BCD tables only load in the browser