新コロ対策の手で顔を触ったら通知するツール

概要

f:id:hassaku-labs:20200706003536p:plain:w300
顔を触るいらすとや画像

仕事中などに、結構無意識に顔をペタペタ触ってしまう癖がある。この度の新型コロナ禍において、結構リスキーな行動だということもあり、対策するためのツールを作ってた(拡大時期の3月頃)。

PCのカメラ画像から、顔認識及び手認識結果を得て、顔を触っている場合に、通知を出す。これで、徐々に無意識の悪癖を直していければ嬉しい。

こちらにデプロイしてあるので、簡単に試せる。 face-touch-alert.netlify.com

顔を触ってしまったときの通知はこんな感じ。

f:id:hassaku-labs:20200705234942p:plain
顔を触った旨を知らせるブラウザの通知

仕組み

プログラムはこちら。 github.com

利用した各JSライブラリ

  1. 顔認識
  2. 手認識
  3. 通知

基本動作は、setIntervalで100msec毎に、顔と手の認識を行い、顔の範囲内に手が近づいていたら、顔を触ったと判定して、push通知を行うだけ。

既知の問題としては、違うタブやアプリに切り替えたときに、setIntervalだと、バックグラウンド動作が不定になり、顔を触ったタイミングを逃してしまうことがある。こういうときに、web workerを使うのかと思って色々調べてみたものの、web workerからDOMにアクセスしたりする方法が分からず、そのまま放置してしまった...が、書いてて思ったのだが、認識位置等の表示を無視して、通知を出すだけなら、DOMへのアクセス関係なく出来たかもしれない。