MediaRecorder

MediaStream Recording APIMediaRecorder インターフェイスは、メディアを簡単に記録するための機能を提供します。 これは、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 草案 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
MediaRecorderChrome 完全対応 47Edge 未対応 なしFirefox 完全対応 25
補足
完全対応 25
補足
補足 Prior to Firefox 58, using MediaStream.addTrack() on a stream obtained using getUserMedia(), then attempting to record the resulting stream would result in only recording the original stream without the added tracks (severe bug).
IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 47Chrome Android 完全対応 47Firefox Android 完全対応 25
補足
完全対応 25
補足
補足 Prior to Firefox 58, using MediaStream.addTrack() on a stream obtained using getUserMedia(), then attempting to record the resulting stream would result in only recording the original stream without the added tracks (severe bug).
Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 5.0
MediaRecorder() constructorChrome 完全対応 47Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 47Chrome Android 完全対応 47Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 5.0
audioBitsPerSecond
実験的
Chrome 完全対応 49Edge 未対応 なしFirefox ? IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android ? Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 5.0
error eventChrome 完全対応 49Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android ?
ignoreMutedMedia
実験的
Chrome 未対応 49 — 57Edge 未対応 なしFirefox ? IE ? Opera 完全対応 36Safari ? WebView Android 未対応 49 — 57Chrome Android 未対応 49 — 57Firefox Android ? Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 5.0
isTypeSupportedChrome 完全対応 47Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 47Chrome Android 完全対応 47Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 5.0
mimeTypeChrome 完全対応 49
完全対応 49
未対応 47 — 49
補足
補足 Prior to Chrome 49, only video is supported, not audio.
Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49
完全対応 49
未対応 47 — 49
補足
補足 Prior to Chrome 49, only video is supported, not audio.
Chrome Android 完全対応 49
完全対応 49
未対応 47 — 49
補足
補足 Prior to Chrome 49, only video is supported, not audio.
Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 未対応 なし
ondataavailableChrome 完全対応 49Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 あり
onerrorChrome 完全対応 49Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 あり
onpauseChrome 完全対応 49Edge 未対応 なしFirefox 完全対応 65IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 65Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 あり
onresumeChrome 完全対応 49Edge 未対応 なしFirefox 完全対応 65IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 65Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 あり
onstartChrome 完全対応 49Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 あり
onstopChrome 完全対応 49Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 あり
onwarning
非推奨
Chrome 完全対応 49Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android ?
pauseChrome 完全対応 49Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 あり
requestDataChrome 完全対応 49Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 あり
resumeChrome 完全対応 49Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 あり
startChrome 完全対応 47Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 47Chrome Android 完全対応 47Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 5.0
stateChrome 完全対応 49
完全対応 49
未対応 47 — 49
補足
補足 Prior to Chrome 49, only video is supported, not audio.
Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49
完全対応 49
未対応 47 — 49
補足
補足 Prior to Chrome 49, only video is supported, not audio.
Chrome Android 完全対応 49
完全対応 49
未対応 47 — 49
補足
補足 Prior to Chrome 49, only video is supported, not audio.
Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 未対応 なし
stopChrome 完全対応 49Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 あり
streamChrome 完全対応 49
完全対応 49
未対応 47 — 49
補足
補足 Prior to Chrome 49, only video is supported, not audio.
Edge 未対応 なしFirefox 完全対応 25IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49
完全対応 49
未対応 47 — 49
補足
補足 Prior to Chrome 49, only video is supported, not audio.
Firefox Android 完全対応 25Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 未対応 なし
videoBitsPerSecond
実験的
Chrome 完全対応 49Edge 未対応 なしFirefox ? IE ? Opera 完全対応 36Safari ? WebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android ? Opera Android 完全対応 36Safari iOS ? Samsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報