JavascriptでFaceTrackerを使う

勉強会@スタジオアルカナ スタジオアルカナ

遠藤勝也 2016/05/12

1

FaceTrackerとは？

2

• 顔検出ライブラリ

• Constrained Local Model という手法を用いる

• C++, Python などの実装が存在する

3

4

“Face Substitution” Kyle McDonald

5

Webを使ってやってみよう

6

当初の予定

• クライアント側は，ブラウザから画像を送る

• サーバ側は，C++もしくはPythonからFaceTrackerを使い，顔の頂点情報を取得する

• クライアント側は，帰ってきた頂点情報に基づいて，テクスチャを貼り表示する

7

clmtrackr

• Javascript実装のFaceTracker

• canvasやvideoを使い画像を処理する

• MIT License

• https://github.com/auduno/clmtrackr

8

clm_video.html9

サンプル• 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

主な使い方• clm.js内のclm.tracker()により，

頂点検出用のオブジェクトを生成する

• models/model_pca_20_svm.js内のpModelを，生成したオブジェクトのinit()に渡して初期化する

• <video>のエレメントを初期化した，オブジェクトのstart()に渡す

• getCurrentPosition()により，頂点情報が二次元配列で返ってくる

• draw()に<canvas>のエレメントを渡すと頂点が描画される

• 画像と頂点情報を渡すことで，マスクを生成し，変形もできるfaceDeformerが用意されている

11

現在

• クライアント側は，JavascriptでFaceTrackerを使い，サーバに顔の頂点情報と，画像を送る

• サーバ側は，DBに格納する

• クライアント側は，サーバから帰ってきた頂点情報と 画像を基に，テクスチャを貼り表示する

12

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

13