シャンパンとドーナツを用意して、これまでで最もスターを付けられた Chrome 機能が実装されました。
動画を位置情報データと同期するスキー ラン レコーダー、超シンプルなボイスメモ アプリ、動画を録画して YouTube にアップロードできるウィジェットなどを、プラグインなしで作成できるとしたらどうでしょう。
MediaRecorder API を使用すると、ウェブアプリから音声と動画を録画できます。この API は、Firefox、Android 版 Chrome、パソコン版 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
- 動画/webm;codecs=vp8
- video/webm;codecs=vp9
静的メソッド MediaRecorder.isTypeSupported() を使用して、MIME タイプがサポートされているかどうかを確認します（MediaRecorder をインスタンス化するときなど）。
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() メソッドには、必要に応じて、各 blob でキャプチャするメディアの長さを指定する timeSlice 引数を指定できます。
録画が完了したら、MediaRecorder に次のように指示します。
mediaRecorder.stop();
記録された blob の配列から「super-Blob」を作成して、video 要素で記録された 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 の ボイスメモアプリで MediaRecorder がサポートされるようになりました。MediaRecorder 音声をサポートしていないブラウザでは、ポリフィルが使用されます。
ポリフィル
- Muaz Khan の MediaStreamRecorder は、MediaRecorder と互換性のある、音声と動画を録画するための JavaScript ライブラリです。
- Recorderjs を使用すると、Web Audio API ノードからの録音が可能になります。これを実際に確認するには、Paul Lewis の ボイスメモアプリをご覧ください。
ブラウザ サポート
- Chrome 49 以降（デフォルト）
- chrome://flags から試験運用版ウェブ プラットフォーム機能を有効にした Chrome デスクトップ 47 および 48
- Firefox（バージョン 25 以降）
- Edge: 「検討中」
Spec
w3c.github.io/mediacapture-record/MediaRecorder.html