Photo Booth on the Web - $ cat /var/log/shin

今更ながら、WebRTCというHTML5の新規格を先日知りまして、思わず作ってしまいました。
見切り発車気味ですが公開します。

f:id:s-shin:20120419215059p:plain

PhotoBoothはMacやiOSにデフォルトで入っているアプリで、カメラからの映像にリアルタイムでエフェクトを掛けることができるユニークなアプリです。
WebRTCにエフェクトを掛けるアプリは既にちらほら話題になっていたようですが、ちょうど同時期に顔認識のJavaScriptライブラリであるccv.js&face.jsを知ったので、勉強を兼ねて欲望に忠実に作ってみたというわけです。

動作環境

MacBook Air (13-inch, Mid 2011)
Google Chrome 18.0.1025.163 (-enable-media-stream)

の環境でしか確認していません。
Google Chromeは[chrome://flags/]から「MediaStream を有効にする」の部分を有効にできます。

技術的なお話

使用しているのはHTML, CSS, JavaScriptのみです。
流れは大雑把に言えば

HTML5のWebRTCでカメラから映像を取得
- getUserMedia
videoに流しこむ
- video.src = webkitURL.createObjectURL(stream)
canvasに変換
- ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
ccv.js, face.jsで顔認識
- ccv.detect_objects
各種フィルタ処理
- glfx.js, JSManipulate

という感じです。

ToDo

もうちょっとまともなサービスにするためにはやるべきことは

リファクタリング
- OOP化
オリジナルのようにカメラ画面を作る
保存できるようにする
- FileAPI: Writerで一括とかやってみたい
コンフィグの実装
UIの改善
- なるべく改悪にならないように
カクカクしないようにする（顔認識のWebWorkers化）
- カクカクするのは顔認識部分が重いからです。精度も微妙*1なのでやはり顔認識については、今の性能では難しいのかもしれません。
- ccv.js, face.jsはWebWorkersをサポートしていますが、どうも上手く行きませんでした*2。また、workersを2以上にしたらエラーが出たのでそこら辺も問題ですね。

ということで見切り発車気味なわけですが、技術の限界は分かった気もするので今後アップデートするかはわかりません。

getUserMediaの仕様変更に対応（2012/7/27）

いつの間にかWebRTCの方でgetUserMediaの仕様が変わったようで、久々にGoogle Chromeで実行したらエラーになりました。
というわけで微修正しました。
参考：http://null.ly/post/23856101696/getusermedia-webrtc

動作環境

技術的なお話

ToDo

getUserMediaの仕様変更に対応（2012/7/27）

関連