Photo Booth on the Web

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

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


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

動作環境

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

技術的なお話

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

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

という感じです。

ToDo

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

  • リファクタリング
  • オリジナルのようにカメラ画面を作る
  • 保存できるようにする
    • 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

関連

他にも髭をつけるものなど色々あったのですが、リンクを見つけられませんでした。

*1:学習のサンプリングの問題なようです。精度と速度はトレードオフだと思うので微妙な問題ですが。

*2:むしろひどくなる

広告を非表示にする