シャンパンとドーナツを試食しましょう！Chrome 史上最もスター付きの機能が実装されました。
たとえば、動画を GeoLocation データと同期させるスキーラン レコーダー、非常にシンプルなボイスメモ アプリ、動画を録画して YouTube にアップロードできるウィジェットなどが考えられます。これらはすべてプラグインは不要です。
MediaRecorder API を使用すると、ウェブアプリから音声と動画を記録できます。この機能は現在 Firefox と、Android 版とパソコン版の Chrome でご利用いただけます。
こちらでお試しください。
API は単純で、ここでは WebRTC サンプル リポジトリのデモにあるコードを使用して説明します。API は、安全なオリジン（HTTPS または localhost）からのみ使用できることに注意してください。
まず、MediaStream を使用して MediaRecorder をインスタンス化します。必要に応じて、options パラメータを使用して目的の出力形式を指定します。
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
MediaStream は以下のいずれかから取得できます。
getUserMedia()呼び出し。- WebRTC 呼び出しの受信側。
- 画面の録画。
- ウェブ オーディオ（この問題の実装後）。
options には、MIME タイプを指定できます。将来的には、音声と動画のビットレートも指定できます。
MIME タイプには、コンテナとコーデックを組み合わせた個別の値があります。次に例を示します。
- 音声 / webm
- 動画/WebM
- video/webm;codecs=vp8
- video/webm;codecs=vp9
MediaRecorder をインスタンス化する場合など、MIME タイプがサポートされているかどうかを確認するには、静的メソッド MediaRecorder.isTypeSupported() を使用します。
var options;
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
options = {mimeType: 'video/webm; codecs=vp9'};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
options = {mimeType: 'video/webm; codecs=vp8'};
} else {
// ...
}
Chrome の MediaRecorder でサポートされている MIME タイプの一覧については、こちらをご覧ください。
次に、データハンドラを追加し、start() メソッドを呼び出して記録を開始します。
var recordedChunks = [];
var options = {mimeType: 'video/webm;codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();
function handleDataAvailable(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);
} else {
// ...
}
}
この例では、データが使用可能になるたびに recordedChunks 配列に Blob を追加します。start() メソッドには、必要に応じて timeSlice 引数を指定して、各 blob でキャプチャするメディアの長さを指定できます。
録画が終了したら、MediaRecorder に次のように伝えます。
mediaRecorder.stop();
記録された blob の配列から「super-Blob」を作成して、動画要素で記録された blob を再生します。
function play() {
var superBuffer = new Blob(recordedChunks);
videoElement.src =
window.URL.createObjectURL(superBuffer);
}
または、XHR を介してサーバーにアップロードしたり、YouTube などの API を使用したりすることもできます（以下の試験運用版のデモをご覧ください）。
ダウンロードするには、次のようなリンクのハッキングを使用します。
function download() {
var blob = new Blob(recordedChunks, {
type: 'video/webm'
});
var url = URL.createObjectURL(blob);
var 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);
}
API とデモに関するフィードバック
プラグインなしで音声と動画を録画する機能はウェブアプリでは比較的新しいため、API に関するフィードバックをお待ちしています。
- MediaRecorder の実装バグ: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- デモ: github.com/webrtc/samples
また、お客様にとって最も重要な利用シナリオや優先してほしい機能についてもお聞かせください。この記事にコメントするか、crbug.com/262211 で進捗状況をご確認ください。
デモ
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr（同じコード、モバイルでもわかりやすい URL）
- 試験運用版のカスタム
<google-youtube-upload>要素を使用して動画を撮影し、YouTube にアップロードする
アプリ
- Paul Lewis の Voice Memos アプリが MediaRecorder をサポートするようになりました。MediaRecorder の音声をサポートしていないブラウザ向けにポリフィルされています。
ポリフィル
- Muaz Khan 氏の MediaStreamRecorder は、音声と動画を記録するための JavaScript ライブラリで、MediaRecorder と互換性があります。
- Recorderjs は、ウェブ オーディオ API ノードからの録音を有効にします。Paul Lewis の Voice Memos アプリでこれを実際に確認できます。
ブラウザ サポート
- Chrome 49 以降（デフォルト）
- Chrome デスクトップ 47、48（chrome://flags から試験運用版ウェブ プラットフォームの機能が有効になっている）
- Firefox（バージョン 25 以降）
- エッジ: 「検討中」
仕様
w3c.github.io/mediacapture-record/MediaRecorder.html