ペッパー警部 邪魔をしないで
というわけで、clmtrackr.jsで顔認識してへのへのもへじを描画してみました。
はい。完全にお遊びです。
https://github.com/shimabox/henohenomohe-js
Demo
https://shimabox.github.io/henohenomohe-js/
工夫したところ
こんなお遊びでも、この2点は工夫(努力)をしました。
- transform: scaleX(-1); を意識する
- Webカメラの映像をcanvasに描画するところを分ける
以降、この2点について軽く説明していきます。
transform: scaleX(-1); を意識する
- Webカメラの映像を読み込んで描画する videoタグ
- videoタグの映像を読み込んで描画する canvasタグ
これらの要素は前面カメラ(フロントカメラ)を使う場合、鏡のように映さないとならないという謎の暗黙ルールがあります。
※ ルールというかそれが自然
※ 普段カメラを使う場合そうなっていますよね？
となると、Webカメラの映像を描画する要素に対しては
transform: scaleX(-1);
を設定する必要があります。
で、こうすると何が起こるかというと transform: scaleX(-1); している要素 に対して、transform: scaleX(-1); していない要素 で何かを表現する場合、座標を意識する必要が出てきます。
このプログラムは、
- 顔を認識して顔の座標を返す … A
transform: scaleX(-1);されている
- Aの座標を使ってへのへのもへじを描画する … B
transform: scaleX(-1);されていない
というざっくりいうと2つのレイヤーを持っていますが、前面カメラを使っている場合、Bのところで Aの座標(transform: scaleX(-1); されている)を求めて描画しないとうまくいきません。と書いても何言ってんだこいつみたいな状態なので図で見てみます。
transform: scaleX(-1); を意識しないとうまくいかない例
本来の顔座標
Reference にある通り、本来の顔座標は以下の位置で返ってきます。
transform: scaleX(-1); されていると
それが、transform: scaleX(-1); されている場合、このような位置になります。
この座標をそのまま使って描画してみると、こうなります。
鏡のようになる という言葉がしっくりきますね。
座標を入れ替えて対応する
じゃあどうしたかというと自分は前面カメラを使っている場合、座標を入れ替えるようにしました。
henohenomohe-js/henohenomohe.js at master · shimabox/henohenomohe-js
0番目の座標は、14番目。1番目の座標は、13番目。。
のように扱えるようになったので、本来の顔座標を意識したまま描画することができるようになります。
描画
座標の対応が済み、いざ描画するぞ！！と、単純にその座標をそのまま使っても、まだうまくいきません(なぜかというと、その座標は入れ替わっているので) 。
transform: scaleX(-1); 後のx座標を求めて描画する必要があります。
で、このへん以下のプログラムを書いてサクッと確認してみました。
transform: scaleX(-1) されている要素のx座標を求める
結果、transform: scaleX(-1) されている要素のx座標は以下のザックリとした式で求められることがわかったので
transform: scaleX(-1) されている要素のx座標 = canvas幅 – x座標 – 文字の幅;
無事、描画が完了です。
Webカメラの映像をcanvasに描画するところを分けた
もう一つ工夫したところは、Webカメラの映像をcanvasに描画するところを分けたところです。
分けた部分は別ライブラリーとして出してみたので、こちらもよろしくお願いします。
https://github.com/shimabox/v2c/
これはこれで上手く使うと面白いものが書ける気がします。
ポイント
このプログラムのポイントはぶっちゃけ、へのへのもへじではなくて、顔認識している要素に対してレイヤーを１つ噛ましている部分にあると思っています。
カメラの認証さえ済ましておけば、リロードされない限りは裏で顔認識し続けることができます。
つまり、被せるレイヤーが素朴なコンテンツなどであれば、ユーザーに気づかれず個人情報が取り放題というわけです。
昨今タブレットやデジタルサイネージなど溢れていますが、その裏で何が行われているか想像しないといけないかもしれません。
もちろん、出す側としてはこういった注意喚起をユーザーに対して行うべきだと思います。
つまり何が言いたいかというと、良い子のみんなは悪いことに使っちゃダメだぞ！っていうことです。
おわりに
最初お遊びではじめた時はサクッと終わるかなぁと思ったのですが、上にある通り色々とめんどくさいことが重なってかなり時間がかかりました。(座標が絡んでくるとマジわからんから時間かかる。。)
