ブラウザ上でリアルタイムに顔の位置を検出して「自動スクワット・カウンター」を作る
Makoto Ishidaface-api.jsを使ってブラウザ上のカメラ画像からリアルタイムで検出しているサンプル。
Makoto Ishida
pico.jsを使ってブラウザ上のカメラ画像からリアルタイムで検出しているサンプル。
Makoto Ishidaとりあえず作りたかったものが出来た！
自動スクワット・カウンター
Makoto IshidaNetlifyで公開したものとReplitで公開したものとで動きが若干異なることに気がついた。コードは全く同じなのに。 （後ほどコードが違っていたことが判明して解決。）
どちらもSafariでは画像が止まったままになってしまってダメなのだけど、ChromeやFireFoxでは問題なく動く。ただしNetlifyの場合のみカメラ画像のサイズが少し小さくなって、Canvasの下80ピクセル分ぐらいが空白になってしまう。
よく見ると返って来るレスポンスヘッダーの内容が少し違うので、原因はその辺にありそう…と思って小一時間調べたりいろいろ試したが、結局原因は解明できず。
ブラウザ上でカメラ画像を表示するには「Content-Security-Policy」や「Permissions-Policy」などを適切に設定する必要があるっぽい（？） けど、決定的なところはよく分からない。
Netlifyで公開したもの
Replitで公開したもの
Makoto Ishida気になるので Firebase Hosting にもデプロイしてみた。するとこちらもNetlifyと同じ結果になった。
ということはつまりむしろReplitが特別なのかも。一体何が違うんだろ。う〜ん。
Firebase Hostingで公開したもの
Makoto Ishida原因が分かりました！
同じコードなのに動きが違うのはデプロイ先のプラットフォームの挙動に違いがあるためではないか、と疑っていたのですが、よ〜く調べた結果、、、
Replitだけ最新のコードが反映されていませんでした。。。！
ローカルでソースコードを編集して GitHub経由でReplitに反映していたのですが、ReplitではGitHubからPullした直後に開発環境内では最新のソースコードが表示されてはいるのですが、そのままでは既に公開済みのサイトには反映されないようです。公開済みのサイトに反映するには、Replit側で一度「保存」しないといけないようです。
Makoto Ishida顔検出の精度の高さでいうとこれがもっとも良さそう。
デモを実行してみたかぎり、顔の角度が90度回転していてもちゃんと検出される。
Makoto Ishida話が変わるけど、顔が動かないバーベル上げなどの動作を検出するにはこちらが使えるかも。