clmtrackrによる顔検出の導入編

1. Javascriptで
FaceTrackerを使う
勉強会@スタジオアルカナ
スタジオアルカナ
遠藤勝也
2016/05/12
1

2. FaceTrackerとは？
2

3. • 顔検出ライブラリ
• Constrained Local Model という手法を用いる
• C++, Python などの実装が存在する
3

4. 4

5. “Face Substitution” Kyle McDonald
5

6. Webを使ってやってみよう
6

7. 当初の予定
• クライアント側は，ブラウザから画像を送る
• サーバ側は，C++もしくはPythonから
FaceTrackerを使い，顔の頂点情報を取得する
• クライアント側は，帰ってきた頂点情報に基づいて，
テクスチャを貼り表示する
7

8. clmtrackr
• Javascript実装のFaceTracker
• canvasやvideoを使い画像を処理する
• MIT License
• https://github.com/auduno/clmtrackr
8

9. clm_video.html
9

10. サンプル
• example.html
<video>から動画を再生し，取得した幾つかの頂点を表示する
• clm_video.html
<video>でWebカメラから取得した映像に，頂点を描画する
• clm_image.html
<canvas>に画像を表示し頂点を描画する
• face_deformation_video.html
<video>でWebカメラから頂点を取得し，生成したテクスチャの頂点をGUIで変化させる
• face_mask.html
<video>でWebカメラから取得した頂点情報により，取得した映像に
テクスチャを貼り付ける
10

11. 主な使い方
• clm.js内のclm.tracker()により，
頂点検出用のオブジェクトを生成する
• models/model_pca_20_svm.js内のpModelを，
生成したオブジェクトのinit()に渡して初期化する
• <video>のエレメントを初期化した，オブジェクトのstart()に渡す
• getCurrentPosition()により，頂点情報が二次元配列で返ってくる
• draw()に<canvas>のエレメントを渡すと頂点が描画される
• 画像と頂点情報を渡すことで，マスクを生成し，
変形もできるfaceDeformerが用意されている
11

12. 現在
• クライアント側は，JavascriptでFaceTrackerを使い，
サーバに顔の頂点情報と，画像を送る
• サーバ側は，DBに格納する
• クライアント側は，サーバから帰ってきた頂点情報と
画像を基に，テクスチャを貼り表示する
12

13. ご静聴ありがとうございました
13