WebRTCのgetUserMediaの映像をサーバに保存する

WebRTCのgetUserMediaでWebカメラの画像をとって、

TomcatのJavaServletに送信して保存してみました。

f:id:MoggFanatic:20130616235240p:plain

Java 1.7.0_21

Chrome 28.0.1500.44 beta-m

で動かしました。

記事書いてて気づいたのですが、突貫工事だったためにコードぼろぼろです。

突貫じゃなくても知識浅いので、間違ってたり無駄があったら教えてくれたら嬉しいです。

ブラウザ f:id:MoggFanatic:20130616235240p:plain

コンソール f:id:MoggFanatic:20130616235013p:plain

画像を保存したディレクトリ f:id:MoggFanatic:20130616235016p:plain

html

WebCameraの映像を出すvideo要素と、サーバに送信するコマを取り出すcanvas要素を用意します。

video要素にWebCameraの映像を表示します。

canvas要素と、canvasの描画API にアクセスするオブジェクトを取得します。

video要素の画像をcanvas要素に取り出し、

toDataURL()でpng画像としてBase64 エンコードします。

今回はpng画像しか扱わないので、エンコード後のデータの頭の"data:image/png;base64,"は不要なので取っちゃいます。

エンコードした画像データをServletにpostします。

サーバサイド

受け取ったパラメータをBase64デコードして、

FileOutputStreamクラスのwriteで書き出します。

Base64のデコードには、org.apache.commons.codec.binary.Base64を使ってます。

Chromeの場合、WebCameraの画像を取ろうとすると、

～がカメラへのアクセスを求めています。[許可][拒否]って出ますよね。

あれで許可するとこのプログラム動いちゃいます。

そんなことする人いないでしょうけど、他のサンプルに見せかけてこっそりユーザの画像撮れちゃうなと思ったのがちょっと気になりました。