MediaRecorder

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

EventTarget 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() メソッドが呼び出された後に発行されます。

js
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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaRecorder
MediaRecorder() constructor
options parameter
audioBitrateMode
Experimental
audioBitsPerSecond
dataavailable event
error event
isTypeSupported() static method
mimeType
pause
pause event
requestData
resume
resume event
start
start event
state
stop
stop event
stream
videoBitsPerSecond

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Has more compatibility info.

関連情報