はじめに

tensorflowを勉強したいなと思っていて色々と調べていて簡単なデモがあったので作ってみました。
※深いところまでは全然触っていないのであしからず…

結果

こんなふうになりました。
カメラを起動していただければ顔を検知して、影が移動します。

ソースコード

埋め込みだと動きませんのであしからず…
Codepenに移動していただければ動きます。

See the Pen face detection shadow by hashito (@hashito) on CodePen.

内容

初期化部分

// load...
const net = await posenet.load();
// 人の検出
const pose = await net.estimateSinglePose(video, imageScaleFactor, flipHorizontal, outputStride);
// video:入力元
// imageScaleFactor:イメージの縮小率
// flipHorizontal:映像を反転させるか？
// outputStride:出力ストライド数、高いほど制度が上がる(32,16,8のみ許容)

簡単ですね…
※複数人検出する場合は別の関数になります。

取得されるデータ

こちらの学習済みデータは人のボーンを推定するものですので、各特徴部位がスコアと共に帰ってくる形です。
取得されたデータがこちらになります。

こちらも分かりやすい…
※スコアが低い部位はカメラに入っていないため推定できていないものと思われます。

顔の基準

データは色々ともらえるのですが今回は顔の中心であるnoseだけを利用します。
noseの位置を取得し、画面上の中心点との差分を係数で変換し、CSSを変更するだけ！