1. MediaPipe on the webとは?

MediaPipeは,クロスプラットフォームのフレームワークです。Webカメラがあればブラウザ上で実行することが出来,顔の検出や手の検出など様々なことをすることが出来るようです。

google/mediapipe

2. Face meshとは?

顔の表面形状を486個のランドマークの3次元座標で予測する,軽量モデルです。1つのカメラだけで顔認識が出来ます。具体的に何が出来るかは以下のページをご参照ください。

Face Mesh

3. lab.js Builderで使うには?

早速,本題です。lab.js BuilderでFace meshを使う方法を説明していきます。具体的には,上のページの「JavaScript Solution API」の節の指示に従っていきます。

まずは,デモページを用意しましたので以下で体験してみてください。レンタルサーバー上では動かなかったのでpavloviaにアップロードしました。JATOSでも動作することを確認しています。

Experiment

カメラの使用許可を求められますので許可をしてください。少し認識に時間がかかりますが数秒待つとカメラの映像とともに顔に右図のようにポリゴンが張り付きます。

顔を動かしてみたり,表情を変えたりしてみてください。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2ba5dfd2-6bea-454f-b272-fa10faaccad6/Untitled.png

2. lab.js Builderに環境をセットアップする

セットアップの方法は他のライブラリを使用するときと同じです。lab.js Builderの設定アイコン(右端)をクリックします。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b3425e4c-2e06-4e12-986b-a8dfbe147740/Untitled.png

HTMLタグを選び,使用するライブラリのリンクを貼り付けます。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/179de2fd-6c0a-493a-bd09-0b8084cb98a7/Untitled.png

具体的には以下のような感じです。