電気メガネをかけながら動画を見ていると、再生/一時停止のたびにいちいちキーボードやマウスに手を伸ばすのが面倒くさい…せや、ハンドサインで操作できたらラクチンやんけってワケ
はじめに
XREALさん頼むからツルをトントンしたら一時停止するとかメディアコントロールできるようにしてくだされ～って5年ぐらい言ってるんですがちっとも実現しないので業を煮やしたというわけでもないんですが、自分でChrome拡張を作ることにしましたよ。
GitHub Copilot CLIの勉強もかねてClaude Opus 4.6さんに活躍してもらってたくさんのプレミアム要求を消費した結果です。
NyandSignとは
NyandSign は、PCに接続されたWebカメラでハンドサインを検出してYouTubeやSpotifyなどのメディア再生をハンズフリーで操作するChrome拡張機能です。
使い方はシンプルで、拡張機能のサイドパネルを開いてカメラを起動し、ハンドサインを見せるだけ。手を動かすだけで再生・一時停止・音量調整・シークができます。
処理はすべてブラウザ内のオンデバイスAI（Google MediaPipe）でリアルタイムに完結しており、カメラ映像が外部サーバーに送信されることは一切ありません。アカウント登録も不要。
実際の動作風景はこちら
認識できるハンドサイン
現在ウェイクサインと別に11種類のハンドサインを認識できます。
| ハンドサイン | デフォルト操作 |
|---|---|
| 🖐️ パー | ウェイクサイン |
| ✊ グー | 一時停止 |
| ✌️ ピース | 再生 / 一時停止 |
| 3️⃣ 3本指 | 次のトラック |
| 4️⃣ 4本指 | 前のトラック |
| 👌 オーケー | ミュート切替 |
| 🤙 アロハ | 再生 |
| 🤘 ロック | 速度リセット |
| 👉 右 | 10秒進む |
| 👈 左 | 10秒戻る |
| 👍 サムズアップ | 速度アップ |
| 👎 サムズダウン | 速度ダウン |
これらのマッピングはサイドパネルから自由に変更できます。サムズダウンは周りに人がいない場所でやりましょう。命の危険があるかもしれません。
これとは別にハンドサインでメディア操作を実行するかどうかトグルするハンドサインもあります。オフにするとハンドサインをしても操作が伝わりません。
| ハンドサイン |
|---|
| 🖼️ frame（両手で四角を作る） |
| ✌️✌️ both peace（ダブルピース） |
| ✌️✊ peace & fist（ピースとグー） |
どのハンドサインでトグルさせるか設定で変更できます。
ノートPCの内蔵カメラでも普通に動く
ノートPCをソファやベッドから操作するとき、キーボードまで手が届かない状況があります。そういうシーンではNyandSignが効果的です。
追加のハードウェアは不要で、内蔵カメラがあればそのまま使えます。明るさが確保できていれば認識精度は十分実用的です。
カメラ起動中はGoogle MediaPipeが手の形を認識するために計算を行うので無負荷というわけにはいきませんが、Intel N100のChuwi MiniBook X N100でも現実的な負荷で動いてました。設定で推論の頻度を調節できるので負荷が高い場合は数値を減らしてみてください。GPUが使える場合はそちらで動くようなのでCPUの負荷は減ります。
電気メガネとの組み合わせ（開発の発端）
そもそものきっかけは電気メガネ（ARスマートグラス）で動画を見ながら操作したかったというものです。
XREAL One / 1S 等をかけながら動画を見ているとき、キーボードが手元にない状況でも手をかざすだけで操作できます。XREAL Eyeが接続されていれば新規開発した外部サービス EyeCon でWebカメラとして認識させることで対応できます。Air / Air 2 / Air 2 Pro はカメラ非搭載なので残念ながら使えません。Air 2 Ultraは持ってないので分かりません。その他メーカーのメガネ付きモデルはカメラの扱いがどうなってるかさっぱり分からないので知りません。
メーカーには内緒ですが、表からでもどうにかこうにかすることでUVCを有効にできるということを発見できたのがハンドサインでどうにかできるんじゃね？って出発点です。最初はハンドトラッキングでもっと違った操作も試みたんですが誤判定でイライラしたのでやめました。
XREAL Eyeを普通のUSBカメラとして扱えるようになるというのはたぶん世界初情報。XREAL Beam Pro限定で可能だった機能をPCでも使えるようにしましょうねって頑張りました。ものすごく注意深く動作を研究した結果なのでみんなもXREAL Eyeを買うと良いよ。UVCカメラとして使うとLEDが光るので屋外や第三者のいる場所で使用する際はご注意ください。
おまけと言ってはアレですが、Nreal LightのRGBカメラも1分で切断されないような工夫をすることでUVCカメラとして使えることも発見したので対応できます。
メガネについているカメラというのは元々ハンドトラッキングなどで使えるように設計されていることが多いので自然な感じに動きます。
誤操作防止のウェイクサインモード
ずっとカメラが手を監視していると、普通に手を動かすだけで意図せず操作が発動してしまいます。
それを防ぐために「ウェイクサインモード」があります。デフォルトでは 🖐️パーをウェイクサインとして使用しており、これを認識してからコマンドを受け付けます。しばらく手サインの検出がなければ自動でスリープ状態に戻ります。
「最初はパー」です。グーよりパーの方が出しやすいし次のハンドサインにも繋げやすいかなと。
ウェイク状態で次に出したハンドサインがアクションとしてメディアをコントロールします。1回認識したら次のウェイクサイン待ちになるので連続して誤動作することを防止しています。
両手サインによるメディア操作のON/OFFトグルも設定できるので、使用シーンに合わせて調整できます。
設定項目について
サイドパネルの「設定」セクションにいくつか調整できる項目があります。
左右反転
フロントカメラ使用時は通常オンにしておくと自然に使えます。デフォルトON。
骨格のみ表示
カメラ映像を非表示にして骨格線だけ表示するモード。プライバシーが気になる場合や、自分の顔を見たくない方、サイドパネルをすっきりさせたい場合に。
ウェイクサイン
コマンドを受け付ける前に行うサイン。デフォルトは🖐️ パー。なし(常時) に変更すると常時受け付けモードになります。
待機時間
ウェイク後にコマンドを受け付ける時間。デフォルト5秒。短くすると誤操作を減らせますが、操作できる時間も短くなります。
操作トグル
両手サインで操作のON/OFFを切り替える方法。デフォルトは🖼️ フレーム（両手でフレームを作る）。両手ピースやピース＋グーにも変更できます。なしにするとサイドパネルの「メディア操作」トグルスイッチでのみ変更になります。
優先する手
両手が検出されたときにどちらを優先するか。デフォルトはどちらでも。最初に写った手を優先します。「右手」にすると両手が写った状態で左手を別のサインにしても判定されません。
待機時間
同じサインをこの時間以上キープして初めてアクションが発火します。デフォルト0.3秒。短くすると素早く反応しますが誤操作も増えます。
🔁 間隔
音量変更やシークなど継続的なアクションの繰り返し間隔。デフォルト1.0秒。後ろに🔁がついているのがリピート対象。連続で音量を上げたり10秒スキップし続けたりできます。
推論FPS
ハンドサイン認識の頻度。デフォルト15fps。下げるとCPU負荷が下がります。0.2秒内のフレームで認識されたハンドサインを多数決で採用するのであんまり下げちゃうと誤認識の原因になります。
通知音量
ウェイク起動・トグル時のビープ音の音量。0にすると無音になります。
表示サイズ
サイドパネル全体の表示倍率。80〜150%の範囲で調整できます。
PiP文字サイズ
PiPやポップアップウィンドウ内の文字サイズ。
設定はChrome拡張の同期エリアに保存されるので同じアカウントでは同じ設定が引き継がれます。
PiPモードとターゲットタブ指定
フルスクリーンで動画を見ているとき、サイドパネルが邪魔になるケースがあります。そういうときはPiP（ピクチャーインピクチャー）モードに切り替えると、コンパクトなポップアップウィンドウでハンドサイン操作の状態を確認できます。
また、サイドパネルの「ターゲットタブ指定」機能により、BGMを別タブで流しながら他のページを閲覧しているときでも、特定のタブのメディアを操作できます。Spotifyのタブを固定しておいて、他のページを見ながら手でBGMをコントロールする、みたいな使い方ですね。
インストール
Chrome Web Storeで公開中です。無料。アカウントの登録に5ドルかかりましたが弊者には1円も入りませんので安心してインストールしてください。
NyandSignはChrome側で設定の同期をする以外にはどこにも通信もしていないし利用情報の収集やアカウントの登録など作るのが面倒なことは一切していません！
使って便利だったら評価やらレビューやらしていただけるとモチベーションになります。
Chrome Web Storeで承認前の最新版はGitHubで公開されているレポジトリからどうぞ。開発者モードでのローカルインストールで使えます。
- GitHubのリポジトリ からZIPをダウンロードして展開
chrome://extensions/を開く- 「デベロッパーモード」を有効化
- 「パッケージ化されていない拡張機能を読み込む」で展開したフォルダを選択
あとはツールバーのアイコンをクリックしてサイドパネルを開き、カメラを選んで「▶ カメラ開始」を押せば動き始めます。
チュートリアルもあるよ
ウェイクサインのあとに操作とか初見では分かりにくい流れが体験できるようになってます。
そういや初回起動でカメラ使えないから権限設定からだなあってリリースしてから気がつきました。
要望などありましたら
もし要望やバグっぽい挙動がありましたらGitHubでissueなりプルリクなりいただければと存じます。対応できそうなら対応します。
おしまいに
MediaPipeのHandLandmarkerがブラウザ内でここまで動くのはなかなかすごいなという感想です。遅延もほとんどなく、明るさが確保できていれば普通のウェブカメラでもわりとちゃんと認識します。
暗い部屋でやると認識精度がガクッと下がるので、その点は注意が必要です。
電気メガネユーザーにはもちろん、ノートPCで寝転がりながら動画を見る人にもぜひ試してみてほしいところ。デスクトップPCでもWebカメラを用意すれば使えるよ！
開発はGitHub Copilot CLIでおこなっております。最近はVS CodeのGitHub Copilotチャットを活用していたことが多いのですが、今回は勉強がてらCLIです。
今月はGitHub Copilotの課金をPro +(40ドル)にしたのですがもう使い果たしてしまいました…
次はClaude Codeの勉強中です。AI課金で破産しそうなのでAmazonアソシエイツリンクからお買い物してください！！
現場からは以上です。