MediaRecorder
MediaStream Recording API の MediaRecorder
インターフェイスは、メディアを簡単に記録するための機能を提供します。 これは、MediaRecorder()
コンストラクタを使用して作成します。
コンストラクタ
MediaRecorder()
- 記録する
MediaStream
を指定して、新しいMediaRecorder
オブジェクトを作成します。 コンテナの MIME タイプ("video/webm"
や"video/mp4"
など)、音声トラックと動画トラックのビットレート、または単一の全体的なビットレートの設定などを行うためのオプションがあります。
Properties
MediaRecorder.mimeType
読取専用MediaRecorder
オブジェクトの作成時にその記録コンテナとして選択した MIME タイプを返します。MediaRecorder.state
読取専用MediaRecorder
オブジェクトの現在の状態(inactive
(非活動)、recording
(記録中)、paused
(一時停止中))を返します。MediaRecorder.stream
読取専用MediaRecorder
を作成したときにコンストラクタに渡したストリームを返します。MediaRecorder.ignoreMutedMedia
- 入力
MediaStreamTrack
がミュートされたときにMediaRecorder
インスタンスが入力を記録するかどうかを示します。 この属性がfalse
の場合、MediaRecorder
は音声には無音を、動画には黒のフレームを記録します。 デフォルトはfalse
です。 MediaRecorder.videoBitsPerSecond
(en-US) 読取専用- 使用中の動画エンコードビットレートを返します。 これは、コンストラクタで指定したビットレートとは異なる場合があります(指定した場合)。
MediaRecorder.audioBitsPerSecond
(en-US) 読取専用- 使用中の音声エンコードビットレートを返します。 これは、コンストラクタで指定したビットレートとは異なる場合があります(指定した場合)。
メソッド
MediaRecorder.isTypeSupported()
(en-US)- 与えられた MIME タイプを現在のユーザーエージェントがサポートしているかどうかを示す
Boolean
値を返します。 MediaRecorder.pause()
- メディアの記録を一時停止します。
MediaRecorder.requestData()
- これまでに受信した保存データを含む
Blob
を要求します(または最後にrequestData()
が呼び出されてから受信した)。 このメソッドを呼び出した後、記録は続行されますが、新しいBlob
に格納されます。 MediaRecorder.resume()
- 一時停止したメディアの記録を再開します。
MediaRecorder.start()
- メディアの記録を開始します。 このメソッドには、オプションで、ミリ秒単位の値を指定して
timeslice
引数を渡すことができます。 これが指定されている場合、メディアは単一の大きなチャンクにメディアを記録するというデフォルトのふるまいではなく、その期間の別々のチャンクにキャプチャされます。 MediaRecorder.stop()
- 記録を停止します。 この時点で、保存したデータの最後の
Blob
を含むdataavailable
イベントが発生します。 これ以上記録は行われません。
イベントハンドラ
MediaRecorder.ondataavailable
timeslice
のミリ秒単位のメディアが記録されるたびに(またはtimeslice
が指定されていない場合はメディア全体が記録されると)定期的にトリガされるdataavailable
イベントを処理するために呼び出されます。BlobEvent
型のイベントには、data
プロパティに記録済みメディアが含まれています。 その後、このイベントハンドラを使用して、その記録済みメディアのデータを収集して操作することができます。MediaRecorder.onerror
- メディアの記録で発生したエラーの報告など、
error
イベントを処理するために呼び出されるevent handler
です。 これらは記録を停止する致命的なエラーです。 受信したイベントはMediaRecorderErrorEvent
インターフェイスに基づいていて、そのerror
プロパティには、発生した実際のエラーを説明するDOMException
が含まれています。 MediaRecorder.onpause
- メディアの記録が一時停止したときに発生する
pause (en-US)
イベントを処理するために呼び出されるevent handler
です。 MediaRecorder.onresume
- メディアの記録が一時停止後に再開したときに発生する
resume
イベントを処理するために呼び出されるevent handler
です。 MediaRecorder.onstart
- メディアの記録を開始したときに発生する
start
イベントを処理するために呼び出されるevent handler
です。 MediaRecorder.onstop
MediaStream
の終了時、またはMediaRecorder.stop()
メソッドの呼び出し後のいずれかに、メディアの記録が終了したときに発生するstop
イベントを処理するために呼び出されるevent handler
です。
イベント
例
if (navigator.mediaDevices) {
console.log('getUserMedia supported.');
var constraints = { audio: true };
var chunks = [];
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var mediaRecorder = new MediaRecorder(stream);
visualize(stream);
record.onclick = function() {
mediaRecorder.start();
console.log(mediaRecorder.state);
console.log("recorder started");
record.style.background = "red";
record.style.color = "black";
}
stop.onclick = function() {
mediaRecorder.stop();
console.log(mediaRecorder.state);
console.log("recorder stopped");
record.style.background = "";
record.style.color = "";
}
mediaRecorder.onstop = function(e) {
console.log("data available after MediaRecorder.stop() called.");
var clipName = prompt('Enter a name for your sound clip');
var clipContainer = document.createElement('article');
var clipLabel = document.createElement('p');
var audio = document.createElement('audio');
var deleteButton = document.createElement('button');
clipContainer.classList.add('clip');
audio.setAttribute('controls', '');
deleteButton.innerHTML = "Delete";
clipLabel.innerHTML = clipName;
clipContainer.appendChild(audio);
clipContainer.appendChild(clipLabel);
clipContainer.appendChild(deleteButton);
soundClips.appendChild(clipContainer);
audio.controls = true;
var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
chunks = [];
var audioURL = URL.createObjectURL(blob);
audio.src = audioURL;
console.log("recorder stopped");
deleteButton.onclick = function(e) {
evtTgt = e.target;
evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
}
}
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
}
})
.catch(function(err) {
console.log('The following error occurred: ' + err);
})
}
このコードサンプルは、ウェブディクタフォン(Web Dictaphone)のデモから着想を得たものです。 簡潔にするために一部の行は省略されています。 完全なコードについてはソースを参照してください。
仕様
仕様 | 状態 | コメント |
---|---|---|
MediaStream Recording | 草案 | 初期定義 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- MediaStream Recording API の使用
- ウェブディクタフォン: MediaRecorder + getUserMedia + Web Audio API 可視化デモ、Chris Mills 著(Github のソース)。(英語)
- メディア要素の記録
- simpl.info の MediaStream Recording のデモ、Sam Dutton 著。(英語)
navigator.mediaDevices.getUserMedia()
- OpenLang: MediaDevices と MediaStream Recording API を動画の録画に使用する HTML5 動画言語ラボウェブアプリ(GitHub のソース)(英語)