Webで動画解析 〜Google Meetの挙手とリアルの挙手を連動させるChrome拡張を作った話〜

Webで動画解析 〜Google Meetの挙手とリアルの挙手を連動させる Chrome拡張を作った話〜 2022/09/21 PWA Night

@KawamataRyo 👨💻 Engineer @LAPRAS inc 🔥 元消防士 ❤ TypeScript, Vue, Deno, React 🏄 懸垂, 個人開発

今日話すこと 💬

・Sync Raise Hand の紹介 ・ハンドトラッキングの実装詳細

Sync Raise Hand とは？✋

リアルな挙手とGoogle Meet 上の挙手ボタンを 連動させるChrome 拡張 2021/9 にリリース ユーザー数は1.3万人程

DEMO 📺

どのように挙手を判定している？ 👁

HandTrack.js を使って挙手を判定 🖐 ブラウザ上でWebカメラのデータから、 ハンドサインを判定できる HandTrack.js を使って挙手を判定 https://victordibia.com/handtrack.js

• https://victordibia.com/handtrack.js

トラッキング開始

トラッキング開始 トグルボタンON で呼び出し

トラッキング開始 HandTrack.jsでの トラッキング開始

トラッキング開始 1秒ごとに動画を検証 検証結果を元にボタン操作

ボタン操作

ボタン操作 挙手ボタンのDOMを取得

ボタン操作 手の形がopenと判定されてるかつ 挙手ボタンが押されていない場合は、 挙手ボタンをクリック

ボタン操作 手の形がopenと判定されていない場合かつ、 挙手ボタンがクリックされている場合も、 挙手ボタンをクリックして挙手を戻す

トラッキング停止

トラッキング停止 トグルボタンOFF で呼び出し

トラッキング停止 HandTrack.jsのトラッキングを停止 解析のインターバルを解除

HandTrack.jsは どうやって手の形を判定している？🔎

HandTrack.js のコードを読む 👀

⚠ ここから先は雰囲気で説明してます… TensorFlow.js わからない😇

初期化処理 ① victordibia/handtrack.js/tree/master/src/index.js

• https://github.com/victordibia/handtrack.js/tree/master/src/index.js

初期化処理 ① オブジェクト検出のクラスを初期化し victordibia/handtrack.js/tree/master/src/index.js てモデルのload処理を実行

• https://github.com/victordibia/handtrack.js/tree/master/src/index.js

初期化処理 ② victordibia/handtrack.js/tree/master/src/index.js

• https://github.com/victordibia/handtrack.js/tree/master/src/index.js

初期化処理 ② パラメータに適した 学習済みモデルのパスを設定 victordibia/handtrack.js/tree/master/src/index.js

• https://github.com/victordibia/handtrack.js/tree/master/src/index.js

初期化処理 ② TensorFlow.jsを使って、 学習済みモデルをロード victordibia/handtrack.js/tree/master/src/index.js

• https://github.com/victordibia/handtrack.js/tree/master/src/index.js

トラッキングスタート victordibia/handtrack.js/tree/master/src/index.js

• https://github.com/victordibia/handtrack.js/tree/master/src/index.js

トラッキングスタート navagator.mediaDevicesで 接続されたカメラを取得し videoタグのソースに victordibia/handtrack.js/tree/master/src/index.js

• https://github.com/victordibia/handtrack.js/tree/master/src/index.js

手の形の検出 victordibia/handtrack.js/tree/master/src/index.js

• https://github.com/victordibia/handtrack.js/tree/master/src/index.js

手の形の検出 videoのフレームを Tensorオブジェクトに変換 victordibia/handtrack.js/tree/master/src/index.js

• https://github.com/victordibia/handtrack.js/tree/master/src/index.js

手の形の検出 学習済みモデルに渡して 手の形を検出 victordibia/handtrack.js/tree/master/src/index.js

• https://github.com/victordibia/handtrack.js/tree/master/src/index.js

工夫したポイントは？💡

コントローラーのUI 🎮 Chromeの画面に違和感なく溶け込むよ うにマテリアルデザインでスタイリング 映像の邪魔にならないように任意の箇所 にD&Dで移動可能に

挙手ボタンの拡大アニメーション 🔘 挙手の挙動が分かりやすいように、 挙手ボタンに拡大・縮小アニメーション を追加

Template repository での爆速開発 🏎 Viteを使ったChrome 拡張機能の template repository の vitesse-webext を使い、開発環境構築 を効率化 & メイン機能の実装に注力。 ※ Manifest V3への対応がmainに入っていないのでそこだけ注意 https://github.com/antfu/vitesse-webext

• https://github.com/antfu/vitesse-webext

Product Hant で海外ユーザーへのアピール 🌎 リリース時にProduct Hantに出向。 Product Hant経由で海外ユーザーの ダウンロードが増加 https://www.producthunt.com/products/sync-raise-hand 海外ユーザーの 応援コメントが嬉しかった！

• https://github.com/antfu/vitesse-webext

おわりに 🏁

・HandTrack.js 凄い！ ・TensorFlow.js で Pythonで作ったモデルも利用できる ・Sync Rise Hand 使ってね ✋

We Are Hiring !!

選考課題も公開中 !! 💯