TL;DR
clmtrackr に読み込ませる video タグには width と height をスタイルではなく属性として指定するんだ!
解決方法
顔検出が成功する例と失敗する例を挙げておきます。
成功例
<video id="video" width="400" height="300"></video>
失敗例
<video id="video" width="100%" height="auto"></video>
<video id="video" style="min-width: 100%"></video>
どうやら Element が作成されたタイミングで width と height が指定されていないといけないようです。
JavaScript で後付けで width プロパティと height プロパティに値を代入してみましたが、成功するようにはなりませんでした。
ライブラリ紹介(clmtrackr)
auduno/clmtrackr: Javascript library for precise tracking of facial features via Constrained Local Models
https://github.com/auduno/clmtrackr
JavaScript だけでブラウザ上で顔検出ができる。誰の顔かを特定することはできませんが、顔の向きや表情などが検出できます。
Web 会議ツールなどで見かけるようになったリアルタイムに猫耳を生やしたりするのに使えます。3D アバターと組み合わせて VR 的に利用されている方もいるようです。
どのように使用するかは GitHub のリポジトリの REAMDME が詳しいのでそちらをご確認ください。
顛末
このたび、JavaScript で顔検出ができるライブラリ「clmtrackr」を使っていたのですが、プロトタイプやサンプルコードではうまく顔検出するのに、個人開発作品に組み込んだとたん顔検出をしなくなりました。
原因究明のために徹夜することになったので、二の轍を踏まないように記事にしておきます。
応用
video タグのサイズが決まっていればよいので、大きな画面に映したいときは video タグのサイズを小さくしておいて、video タグの内容を描画する canvas に書き込む際に拡大して書き込み、video タグの映像はdispley: none
などにするのもよいかもしれません。(未確認)
要調査
minify 版(clmtrackr.mini.js
)だと動作しないことがある?
参考サイト
表情認識で SNOW 的なアプリ - こくぶん研究室
https://kkblab.com/make/javascript/face.html