MediaRecorder

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

コンストラクター

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

インスタンスプロパティ

MediaRecorder.mimeType 読取専用: MediaRecorder オブジェクトの作成時にその収録コンテナーとして選択した MIME タイプを返します。
MediaRecorder.state 読取専用: MediaRecorder オブジェクトの現在の状態（非活動 (inactive)、収録中 (recording)、一時停止中 (paused)）を返します。
MediaRecorder.stream 読取専用: MediaRecorder を作成したときにコンストラクターに渡したストリームを返します。
MediaRecorder.videoBitsPerSecond 読取専用: 使用中の動画エンコードビットレートを返します。これは、コンストラクターで指定したビットレートとは異なる場合があります（指定した場合）。
MediaRecorder.audioBitsPerSecond 読取専用: 使用中の音声エンコードビットレートを返します。これは、コンストラクターで指定したビットレートとは異なる場合があります（指定した場合）。

静的メソッド

MediaRecorder.isTypeSupported(): 静的メソッドで、指定された MIME メディア種別が現在のユーザーエージェントで対応しているかどうかを示す true または false 値を返します。

インスタンスメソッド

MediaRecorder.pause(): メディアの収録を一時停止します。
MediaRecorder.requestData(): これまでに受信した保存データを含む Blob を要求します（または最後に requestData() が呼び出されてから受信した）。このメソッドを呼び出した後、収録は続行されますが、新しい Blob に格納されます。
MediaRecorder.resume(): 一時停止したメディアの収録を再開します。
MediaRecorder.start(): メディアの収録を開始します。このメソッドには、オプションで、ミリ秒単位の値を指定して timeslice 引数を渡すことができます。これが指定されている場合、メディアは単一の大きなチャンクにメディアを収録するというデフォルトのふるまいではなく、その期間の別々のチャンクにキャプチャされます。
MediaRecorder.stop(): 収録を停止します。この時点で、保存したデータの最後の Blob を含む dataavailable イベントが発生します。これ以上収録は行われません。

イベント

これらのイベントを待ち受けするには、 addEventListener() を使用するか、このインターフェイスの onイベント名 プロパティにイベントリスナーを割り当てるかしてください。

dataavailable: timeslice のミリ秒単位のメディアが収録されるたびに（または timeslice が指定されていない場合はメディア全体が収録されると）定期的に起動されます。このイベントは BlobEvent 型であり、収録されたメディアを data プロパティに保持しています。
error: 録画を停止させる致命的なエラーがあったときに発行されます。このイベントは MediaRecorderErrorEvent インターフェイスに基づいており、その error プロパティには、実際に発生したエラーを説明する DOMException が含まれています。
pause: メディアの収録が一時停止したときに発生します。
resume: メディアの収録が一時停止後に再開したときに発生します。
start: メディアの収録を開始したときに発生します。
stop: MediaStream が終了したか、または MediaRecorder.stop() メソッドが呼び出された場合のいずれかでメディアの収録が終了したときに発生します。
warning 非推奨: メディアの収録に致命的でないエラーが発生したとき、または MediaRecorder.onwarning() メソッドが呼び出された後に発行されます。

例

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

  const constraints = { audio: true };
  let chunks = [];

  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
      const mediaRecorder = new MediaRecorder(stream);

      visualize(stream);

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

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

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

        const clipName = prompt("Enter a name for your sound clip");

        const clipContainer = document.createElement("article");
        const clipLabel = document.createElement("p");
        const audio = document.createElement("audio");
        const deleteButton = document.createElement("button");

        clipContainer.classList.add("clip");
        audio.setAttribute("controls", "");
        deleteButton.textContent = "Delete";
        clipLabel.textContent = clipName;

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

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

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

      mediaRecorder.ondataavailable = (e) => {
        chunks.push(e.data);
      };
    })
    .catch((err) => {
      console.error(`The following error occurred: ${err}`);
    });
}

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

仕様書

Specification
MediaStream Recording # mediarecorder-api

ブラウザーの互換性

BCD tables only load in the browser