WebRTCを使ってWebカメラから顔認識+画像効果

ChromeのDevチャンネル版でWebRTCが使えるようになったそうなので早速試してみた。
DevChannelからChromeを落として、「chrome://flags」から有効にできます。

WebRTC(Web Real-Time Communications)は、ブラウザからカメラやマイクを利用できるようにしたり、P2Pで通信できるようにしたりといったこれまでと違ったユーザー体験をJavaScriptから簡単に使えるようにするための仕様です。
SWFやFlash Media Serverとかで出来ることがJSで出来るようになるイメージ？
詳しい仕様は、https://sites.google.com/site/webrtc/homeとかhttp://dev.w3.org/2011/webrtc/editor/webrtc.htmlを見るとよいです。

試しに、Webカメラから顔認識して切り取れればプロフィール画像とか作りやすくなっていいかなーと思ったのでやってみた。素の画像だとちょっと恥ずかしいので効果もつけれるようにしてみた。

デモの置き場所に初めてGitHub Pagesを使ってみました。静的なコンテンツ置くのに超便利！
Webカメラデモ（Chrome Dev版じゃないと動きません＞＜）

流れはこんな感じ。
1. WebカメラをCanvasに書き出し
2. Canvasのビットマップデータで顔認識
3. 顔周辺を切り取り
4. 切り取った画像に効果つける
5. 保存！

JavaScriptからはStreamAPIで定義されている、navigator.getUserMedia(media, successCallback, errorCallback)でWebカメラを取得できるようになるみたいだけど、今はブラウザごとにベンダプレフィクス付ける必要があるらしい。Webkit系だったらnavigator.webkitGetUserMedia。
参考

navigator.getUserMediaはOpera Labs版でも使えるみたいだけど、ccv.jsでエラーになったので断念＞＜

顔認識部分にはccv.js、画像のエフェクトにはCamanJSを使ってみた。ccv.jsの早さにびっくり。
エフェクト処理も画像サイズを200x200と小さめにしてるので結構早い。
最初500x500にしてたのだけど、それだとかなり時間かかりました。
Canvasから直接DataURL使ってダウンロードするときファイル名を付けられるようになるといいんだけど。。。
あと、StreamからgetImageDataとかできるとよりCanvasで扱いやすくなっていいなと思った。

っていうかこういうのがサクッとHTMLとJavaScriptで作れるなんて進化早すぎ。
ブラウザの性能がもう少し上がってCanvasがもっとサクサク動いたら本当に実プロダクトで使える日も近いかも。