Chrome Vritual Camera

navigator.mediaDevices.getUserMedia()をフックし、ダミーの時計や動画ファイルを流すことができるChrome Extensionです。 tfjs/body-pixを利用した人物の検出、背景マスクができます。

Chrome extention for virtual camera, using hook of navigator.mediaDevices.getUserMedia()

Reference / 参考にしたもの

https://techblog.securesky-tech.com/entry/2020/04/30/
https://github.com/hasegawayosuke/vitamin-meeeeet (MIT LICENSE)
https://github.com/tensorflow/tfjs-models/tree/master/body-pix (Apache 2.0 LICENSE)
https://qiita.com/knok/items/b3eb87769151ac04efeb

リポジトリ

https://github.com/mganeko/chrome_virtual_camera

使い方

インストール

リポジトリをダウンロード or クローン
必要に応じて、manifest.jsonを編集する
- content_scripts, permissions のセクションを編集し、使いたいサイトを追加する
- 同様に、使いたくないサイトを除外する
Chrome の [その他のツール]-[拡張機能] の設定ページを開く
「デベロッパーモード」を有効にする
ダウンロードしたリポジトリのフォルダーを選択し、読み込む
拡張機能のページで、読み込んだ「Chrome Virtual Camera」が表示、有効なのを確認

実行

対象サイトをChromeで開く（現在の対象は次の通り）
- http://localhost:*/* ... ローカルホスト環境
- http://127.0.0.1:*/* ... ローカルホスト環境
- https://mganeko.github.io/* ... mganeko の Github Pages
- https://sora-labo.shiguredo.jp/* ... Sora Labo の検証ページ
- https://meet.google.com/* ... Google Meet （使い方には注意が必要）
拡張機能が読み込まれる
- mediaDevices.getUserMedia() をフックする
左上に小さなパネルが表示される
- [+]ボタン ... クリックすると、パネルの中身を表示
- [-]ボタン ... クリックすると、パネルを最小化
- [_]ボタン ... クリックすると、パネルが左下に移動
- [^]ボタン ... クリックすると、パネルが左上に移動
[+]ボタンをクリックして、パネルの中身を表示
ドロップダウンリストで、種類を選択
- デバイス ... マシンのカメラ/マイクを利用
- ファイル ... 動画ファイルを選択し、その映像/音声を利用
- 時計 ... Canvas/WebAudioを利用した、デジタル時計
- 画面キャプチャー ... getDisplayMedia()を利用した、画面キャプチャーを利用（全画面/アプリ画面）
- 背景を塗りつぶし ... body-pixを利用して人物を検出、背景をグレーで塗りつぶす
- 背景を画像で隠す ... body-pixを利用して人物を検出、背景を画像ファイルで隠す
- 人物を塗りつぶし ... body-pixを利用して人物を検出、人物をグレーで塗りつぶす
- 画面に人物を合成 ... カメラ映像から人物を切り抜き、画面キャプチャーの右下に合成して表示
動画ファイルや背景の画像ファイルを選ぶ
- 種類が「ファイル」の場合、動画ファイルを選択
- 種類が「背景を画像で隠す」の場合、背景の画像ファイルを選択
対象サイトで、カメラ映像/マイク音声の取得を開始、通信を開始
- mediaDevices.getUserMedia()が呼び出されると、フックした処理が動く　- 選択した方式の映像、音声が取得される

パネルの中身を表示したところ

注意点

対象サイトがロードと同時にカメラ/マイクを取得する場合 (mediaDevices.getUserMedia()を呼び出す場合)、フックが有効にならず本来のデバイスのカメラ映像/マイク音声が取得される
- そのページをリロードせずに再度カメラ/マイクの取得を行うと、フックが有効になる
Google Meet もロードと同時にカメラ/マイクを取得するので、これに該当する
- パネルで方式を選択後、カメラオフ →　カメラオンに切り替えると、フックが有効になる
対象サイトの表示されるウィンドウ/タブが完全に隠れると requestAnimationFrame()の更新が止まるため、カメラ映像から取得した人物が停止します

LICENSE / ライセンス

MIT LICENSE / MITライセンス
tfjs ... Apache 2.0 LICENSE

mganeko/chrome_virtual_camera

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 2

Uh oh!

Languages

Packages