1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptの顔検出ライブラリ「clmtrackr」は video タグの width と height を属性として指定しないと顔検出しない

Last updated at Posted at 2021-06-17

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?