MediaStream 収録 API
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 秒後に録画を停止します。
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>
要素に追加します。
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>
要素からストリームを受信してキャプチャしたストリームを使用する方法(この場合は収録してローカルディスクに保存する方法)について説明します。
リファレンス
BlobEvent
-
メディアデータのチャンク(chunk、大きな塊)が収録され終えるたびに、
dataavailable
型のBlobEvent
を使用してBlob
形式で消費者に配信されます。 MediaRecorder
-
MediaStream 収録 API を実装する主要インターフェイス。
MediaRecorderErrorEvent
-
MediaStream 収録 API によって投げられたエラーを表すインターフェイス。 その
error
プロパティは、エラーが発生したことを示すDOMException
です。
仕様書
Specification |
---|
MediaStream Recording |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- MediaStream 収録 API の使用
- メディア要素の収録
- simpl.info の MediaStream Recording のデモ、Sam Dutton 著(英語)
navigator.mediaDevices.getUserMedia()
- Chrome および Firefox で動作中の HTML5 の Media Recorder API(英語)
- Safari および Edge 用の MediaRecorder ポリフィル(英語)
- TutorRoom: getUserMedia および MediaRecorder API を使用した HTML 動画のキャプチャ/再生/ダウンロード(GitHub のソース)(英語)
- 簡単な動画録画デモ
- 高度なメディアストリームレコーダーのサンプル(英語)
- OpenLang: MediaDevices と MediaStream 収録 API を動画の録画に使用する HTML5 動画言語ラボウェブアプリ(GitHub のソース)(英語)
- Safari 技術プレビュー 73 で MediaStream 収録 API が利用可能に(英語)