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

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

凡例

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

関連情報