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、録音、録画)するプロセスは簡単です。
- メディアデータのソースとして機能する
MediaStream
またはHTMLMediaElement
(<audio>
要素または<video>
要素の形式)を設定します。 MediaRecorder.ondataavailable
にdataavailable
イベントのイベントハンドラを設定します。 データが利用可能になるたびにこれが呼び出されます。- ソースストリームと必要なオプション(コンテナの MIME タイプやトラックの必要なビットレートなど)を指定して、
MediaRecorder
オブジェクトを作成します。 - ソースメディアが再生され、動画を録画する準備が整ったら、
MediaRecorder.start()
を呼び出して録画を開始します。 dataavailable
イベントハンドラは準備ができたデータがあるたびに呼ばれます。 イベントは、data
属性を持ち、その値はメディアデータを含むBlob
です。 あなたはdataavailable
イベントを発生させることができ、それによって最新のサウンドをあなたに届けるので、それをフィルターにかけたり、それを保存したりすることができます。- ソースメディアの再生が停止すると、録画は自動的に停止します。
MediaRecorder.stop()
を呼び出すことで、いつでも録画を停止できます。
注: 記録されたメディアのスライスを含む個々の Blob
は、必ずしも個別に再生できるわけではありません。 再生する前にメディアを組み立て直す必要があります。
記録中に問題が発生した場合は、error
イベントが MediaRecorder
に送られます。 onerror
イベントハンドラを設定することで error
イベントを監視できます。
レコーダーの状態を調べて制御する
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
です。
仕様
仕様 | 状態 | コメント |
---|---|---|
MediaStream Recording | 草案 | 初期定義 |
ブラウザー実装状況
MediaRecorder
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
MediaRecorder | Chrome 完全対応 47 | Edge 未対応 なし | Firefox
完全対応
25
| IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 47 | Chrome Android 完全対応 47 | Firefox Android
完全対応
25
| Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 5.0 |
MediaRecorder() constructor | Chrome 完全対応 47 | Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 47 | Chrome Android 完全対応 47 | Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 5.0 |
audioBitsPerSecond | Chrome 完全対応 49 | Edge 未対応 なし | Firefox ? | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Firefox Android ? | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 5.0 |
error event | Chrome 完全対応 49 | Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android ? |
ignoreMutedMedia | Chrome 未対応 49 — 57 | Edge 未対応 なし | Firefox ? | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 未対応 49 — 57 | Chrome Android 未対応 49 — 57 | Firefox Android ? | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 5.0 |
isTypeSupported | Chrome 完全対応 47 | Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 47 | Chrome Android 完全対応 47 | Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 5.0 |
mimeType | Chrome
完全対応
49
| Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android
完全対応
49
| Chrome Android
完全対応
49
| Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 未対応 なし |
ondataavailable | Chrome 完全対応 49 | Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 あり |
onerror | Chrome 完全対応 49 | Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 あり |
onpause | Chrome 完全対応 49 | Edge 未対応 なし | Firefox 完全対応 65 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Firefox Android 完全対応 65 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 あり |
onresume | Chrome 完全対応 49 | Edge 未対応 なし | Firefox 完全対応 65 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Firefox Android 完全対応 65 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 あり |
onstart | Chrome 完全対応 49 | Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 あり |
onstop | Chrome 完全対応 49 | Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 あり |
onwarning | Chrome 完全対応 49 | Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android ? |
pause | Chrome 完全対応 49 | Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 あり |
requestData | Chrome 完全対応 49 | Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 あり |
resume | Chrome 完全対応 49 | Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 あり |
start | Chrome 完全対応 47 | Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 47 | Chrome Android 完全対応 47 | Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 5.0 |
state | Chrome
完全対応
49
| Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android
完全対応
49
| Chrome Android
完全対応
49
| Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 未対応 なし |
stop | Chrome 完全対応 49 | Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 あり |
stream | Chrome
完全対応
49
| Edge 未対応 なし | Firefox 完全対応 25 | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android
完全対応
49
| Firefox Android 完全対応 25 | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 未対応 なし |
videoBitsPerSecond | Chrome 完全対応 49 | Edge 未対応 なし | Firefox ? | IE ? | Opera 完全対応 36 | Safari ? | WebView Android 完全対応 49 | Chrome Android 完全対応 49 | Firefox Android ? | Opera Android 完全対応 36 | Safari iOS ? | Samsung Internet Android 完全対応 5.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
関連情報
- 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 が利用可能に(英語)