がねこまさし

WebRTCで録画する!MediaRecoderを使ってみよう

こんにちは!がねこまさしです。今回はWebRTCの録画機能を使って、ブラウザ(Firefox)で録画してみましょう。

Media Recorder API

WebRTCでの録画機能はについては、MediaRecorder APIとしてこちらで検討が行われています。

MediaStream Recording

Firefoxではすでに実装が始まっていますので、実際に使ってみることができます。

早速録画してみる

まずはいつものようにgetUserMedia()で localStreamを取得します。それを使って録画するのは、このようになります。簡単ですね!

私が試したところ、60分程度は問題なく録画できました。メモリ使用量が増加することもないので、ディスクのどこかにキャッシュされているのだと思います。(場所は発見できませんでした)

再生するには

録画したものを再生するには、先ほどのrecorder.ondataavaliable()で準備をしておく必要があります。Blobから、URLを生成しておきます。

あとは、videoタグで再生すればOKです。

録画を停止しないとondataavaliable()のイベントが発生しないので、再生はできません。残念ながらいわゆる「追いかけ再生」はできないようです。

保存するには

せっかく録画した映像をファイルに保存するにはどうすればよいのでしょうか? 残念ながらJavaScriptでファイルに直接書き込むAPIは今はFirefoxにはなさそうです。<a>タグを使って、ユーザにファイルを指定して保存してもらいます。

録画されたファイルはwebm形式になります。ビデオコーデックはVP8、オーディオコーデックはVorbis Audioでした。

終わりに

MediaRecorderを使えば、映像を簡単に記録することができます。サーバにポストして保存すれば、映像共有サイトも作れそうです。まだFirefoxでしか利用できませんが、今後の普及が楽しみですね。
こちらにデモページを用意しました。

全体のソース

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Canvas Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js PhoneGap Polymer SkyWay spdy TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket