MediaStream Recording API

MediaStream Recording API は、単に Media Recording API または MediaRecorder API と呼ばれることもありますが、Media Capture and Streams API および WebRTC API と密接に関係しています。 MediaStream Recording API を使用すると、MediaStream オブジェクトまたは HTMLMediaElement オブジェクトによって生成されたデータを分析、処理、またはディスクへの保存のためにキャプチャすることができます。 また、驚くほど簡単に作業できます。

基本概念

MediaStream Recording API は、MediaRecorder という1つの主要なインターフェイスで構成されています。 MediaRecorder は、MediaStream からデータを取得して処理のためにユーザーに配信するというすべての作業を行います。 データは、MediaRecorder の作成時にすでに指定した形式で、一連の dataavailable イベントによって配信されます。 その後、データをさらに処理するか、必要に応じてファイルに書き込むことができます。

記録プロセスの概要

ストリームを記録（recording、録音、録画）するプロセスは簡単です。

1. メディアデータのソースとして機能する MediaStream または HTMLMediaElement（<audio> 要素または <video> 要素の形式）を設定します。
2. ソースストリームと必要なオプション（コンテナの MIME タイプやトラックの必要なビットレートなど）を指定して、MediaRecorder オブジェクトを作成します。
3. MediaRecorder.ondataavailable に dataavailable イベントのイベントハンドラを設定します。 データが利用可能になるたびにこれが呼び出されます。
4. ソースメディアが再生され、動画を録画する準備が整ったら、MediaRecorder.start() を呼び出して録画を開始します。
5. dataavailable イベントハンドラは準備ができたデータがあるたびに呼ばれます。 イベントは、data 属性を持ち、その値はメディアデータを含む Blob です。 あなたは dataavailable イベントを発生させることができ、それによって最新のサウンドをあなたに届けるので、それをフィルターにかけたり、それを保存したりすることができます。
6. ソースメディアの再生が停止すると、録画は自動的に停止します。
7. MediaRecorder.stop() を呼び出すことで、いつでも録画を停止できます。

記録中に問題が発生した場合は、error イベントが MediaRecorder に送られます。 onerror イベントハンドラを設定することで error イベントを監視できます。

ここでの例では、MediaStreamのソースとしてHTML Canvasを利用し、9秒後に録画を停止します。

var canvas = document.querySelector("canvas");

// Optional frames per second argument.
var stream = canvas.captureStream(25);
var recordedChunks = [];

console.log(stream);
var options = { mimeType: "video/webm; codecs=vp9" };
mediaRecorder = new MediaRecorder(stream, options);

mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
  console.log("data-available");
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
    console.log(recordedChunks);
    download();
  } else {
    // ...
  }
}
function download() {
  var blob = new Blob(recordedChunks, {
    type: "video/webm"
  });
  var url = URL.createObjectURL(blob);
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = "test.webm";
  a.click();
  window.URL.revokeObjectURL(url);
}

// demo: to download after 9sec
setTimeout(event => {
  console.log("stopping");
  mediaRecorder.stop();
}, 9000);

レコーダーの状態を調べて制御する

MediaRecorder オブジェクトのプロパティを使用して記録プロセスの状態を決定したり、pause() および resume() メソッドを使用してソースメディアの記録を一時停止したり再開したりすることもできます。

特定の MIME タイプがサポートされているかどうかを確認する必要がある場合は、それも可能です。 MediaRecorder.isTypeSupported() を呼び出すだけです。

見込みがある入力ソースの調査

カメラやマイクの入力を記録することが目的の場合は、MediaRecorder の構築プロセスを開始する前に、使用可能な入力デバイスを調べてください。 そのためには、navigator.mediaDevices.enumerateDevices() を呼び出して利用可能なメディアデバイスのリストを取得する必要があります。 その後、そのリストを調べて見込みがある入力ソースを特定し、さらに必要な基準に基づいてリストをフィルタリングすることもできます。

このコードスニペットでは、enumerateDevices() を使用して使用可能な入力デバイスを調べ、音声入力デバイスであるものを見つけて、<option> 要素を作成し、それを入力ソースピッカーを表す <select> 要素に追加します。

navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
  devices.forEach(function(device) {
    let menu = document.getElementById("inputdevices");
    if (device.kind == "audioinput") {
      let item = document.createElement("option");
      item.innerHTML = device.label;
      item.value = device.deviceId;
      menu.appendChild(item);
    }
  });
});

これと同じようなコードを使用して、ユーザーが使用したいデバイスのセットを制限することができます。

詳細については

MediaStream Recording API の使用方法の詳細については、MediaStream Recording API の使用を参照してください。 これは、API を使用してオーディオクリップを記録する方法を示します。 2番目の記事のメディア要素の記録では、<audio> 要素または <video> 要素からストリームを受信してキャプチャしたストリームを使用する方法（この場合は記録してローカルディスクに保存する方法）について説明します。

参照

BlobEvent

メディアデータのチャンク（chunk、大きな塊）が記録され終えるたびに、dataavailable 型の BlobEvent を使用して Blob 形式で消費者に配信されます。

MediaRecorder

MediaStream Recording API を実装する主要インタフェース。

MediaRecorderErrorEvent

MediaStream Recording API によって投げられたエラーを表すインターフェース。 その error プロパティは、エラーが発生したことを示す DOMException です。

仕様

ブラウザー実装状況

MediaRecorder

関連情報

• MediaStream Recording API の使用
• メディア要素の記録
• simpl.info の MediaStream Recording のデモ、Sam Dutton 著（英語）
• navigator.mediaDevices.getUserMedia()
• Chrome および Firefox で動作中の HTML5 の Media Recorder API（英語）
• Safari および Edge 用の MediaRecorder ポリフィル（英語）
• TutorRoom: getUserMedia および MediaRecorder APIを使用した HTML5 動画のキャプチャ/再生/ダウンロード（GitHub のソース）（英語）
• 簡単な動画録画デモ
• 高度なメディアストリームレコーダーのサンプル（英語）
• OpenLang: MediaDevices と MediaStream Recording API を動画の録画に使用する HTML5 動画言語ラボウェブアプリ（GitHub のソース）（英語）
• Safari 技術プレビュー 73 で MediaStream Recorder API が利用可能に（英語）