これはなに
先日参加したハッカソンにて作成したchrome拡張について語る記事。
ちなみに、chromeストアでの公開はしていません。
何を作ったのか
笑顔の間はGoogle Meetへの接続が継続され、笑顔が消えると切断されるchrome拡張。
技術構成
- chrome拡張
- JavaScript
- 笑顔判定API
- （Docker）
- ローカル環境汚したくなかった&ローカルでしか動かせない状態
- Flask
- OpenCV
- （Docker）
ちなみに、自分がchrome拡張を担当し、APIは友人にお任せ状態。
以下、アイコン取得元。
（各アイコン毎にライセンス定められている系アイコン素材サイト）
思い出
どうやってchrome拡張で笑顔判定するか
chrome拡張単体というかjs単体で、顔検出して笑顔判定までできれば楽そうだし、face-api.jsという良さげなものあった。
しかし、Node.js使う必要性があり、Node.jsで作ったモノをchrome拡張に変換した際に上手く動くのかパッと予想できなかったため、不採用。
（変換さえできればNode.jsモジュールは全てchrome拡張で使えるのだろうか…？）
そのため、笑顔判定用APIを別途自作し、chrome拡張からはそのAPIを叩く方針に決定。
Google MeetのAPIが存在しない
笑顔判定すべき画像をいかに入手するか問題。
Google MeetにAPIが用意されていて通話中の動画を取得できれば楽だったが、そのようなものは見つけられず。
結局、ブラウザの画面をキャプチャし、キャプチャした内容を<video>タグに書き出し、動画を一時停止して<canvas>タグに画像を書き出す形を採用。
以下、参考にした記事。
笑顔判定の精度調整
笑顔判定API自体は友人が作ってくれたので、そのデバッグ要員として良さげに笑顔がされるまで笑顔と真顔を繰り返して数値調整。
エッジ検出して判定しているそうで、メガネなしで笑った方が精度良かった。
以下、参考にした記事。
しれっとchrome拡張manifest.jsonのv3が登場していた
情報追いかけてなかった自分に非があるが、chrome拡張の公式Docs見たら2021年1月からManifest V3がChromeストアでも利用可能になったらしい。
しかし、日本語の良さげな参考記事はv2を用いた内容のものが多かったので、v2を採用。
公式Docs読む際もv2のものを閲覧するように注意した。
chrome拡張での実装方法を検索しにくい
画面キャプチャの実装方法をググる際、「chrome拡張 画面キャプチャ」と検索すると画面キャプチャ用のchrome拡張が引っかかる。
そのため、chrome拡張はjsで書くことから、基本的にググる時は「js 画面キャプチャ」とするのが良さそう。
さいごに
今回初めてchrome拡張作ったが、想像以上にお手軽かつ色々とできそうなので、今後はchromeストアでの公開目指して何か作りたい。
今回作ったものを公開するかどうかは検討中…