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

1.3K Views

September 21, 22

スライド概要

PWA Night 2022/09/21 発表資料

profile-image

Frontend engineer @lapras_inc / TypeScript / Vue.js / Firebase / 元消防士

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

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

2.

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

3.

今日話すこと 💬

4.

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

5.

Sync Raise Hand とは?✋

8.

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

9.

DEMO 📺

10.

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

11.

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

12.

トラッキング開始

13.

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

14.

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

15.

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

16.

ボタン操作

17.

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

18.

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

19.

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

20.

トラッキング停止

21.

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

22.

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

23.

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

24.

HandTrack.js のコードを読む 👀

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

工夫したポイントは?💡

37.

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

38.

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

39.

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

40.

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

41.

おわりに 🏁

42.

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

43.

We Are Hiring !!

44.

選考課題も公開中 !! 💯