MediaStream 収録 API

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年4月.

* Some parts of this feature may have varying levels of support.

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

基本概念

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

収録プロセスの概要

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

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

メモ: 収録されたメディアのスライスを含む個々の Blob は、必ずしも個別に再生できるわけではありません。再生する前にメディアを組み立て直す必要があります。

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

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

js
const canvas = document.querySelector("canvas");

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

console.log(stream);
const options = { mimeType: "video/webm; codecs=vp9" };
const 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() {
  const blob = new Blob(recordedChunks, {
    type: "video/webm",
  });
  const url = URL.createObjectURL(blob);
  const 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> 要素に追加します。

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

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

詳細については

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