Recommended
More Related Content
What's hot
What's hot (20)
Similar to Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
Similar to Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online) (20)
More from mganeko
More from mganeko (20)
Recently uploaded
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
- 1. Google Meet でも バーチャル背景を使いたい WebRTC Meetup Online #1 2020.07.16 @massie_g がねこまさし
- 2. バーチャル背景とは Web会議システムZoomで注目された、背景を画像や映像に差し替える機能 Microsoft Teams でも最近サポートされたらしい 残念ながら Google Meet は 未サポート （対応予定、開発中） https://support.google.com/a/table/ 7539891?hl=ja https://support.zoom.us/hc/ja/articles/210707503-バーチャル背景
- 3. Google Meet でバーチャル背景を使う方法 仮想カメラソフトを利用すれば可能 ● Snap Camera ○ Snap Chat が提供する仮想カメラ ○ Lensと呼ばれるエフェクトをダウンロード、利用可能 ○ OSやブラウザからは、外部カメラの 1つとして認識される ○ ※なにやらハードと相性悪いことも ■ 会社のWindows PCで試したら、内臓カメラを認識しなくなった ● OBS Studio + OBS-VirtualCam ● Cam Twist でも、できればブラウザだけで実現したい
- 4. ブラウザで実現するための要素 ● 人物部分と背景部分の判定 ● 映像ストリームの取得 ● 既存Webアプリへの介入 ● 細かい処理 全部通信の手間の話です。あしからず
- 5. 今日の元ネタ 色々な人の取り組みを利用しています。ありがとうございます ● tensorflow.jsとWebRTCを組み合わせて、プライバシー保護のビデオチャットを 作ってみた前編/後編（私の記事） ○ https://qiita.com/massie_g/items/af3f8eb1e2bf5e807ba6 ○ https://qiita.com/massie_g/items/6018861a7d2ca3f3b1de ● Google MeetのWebカメラを加工してみよう！... Chrome Extension ○ https://techblog.securesky-tech.com/entry/2020/04/30/ ● 任意のバーチャル背景を使えるページを作った … body-pix の詳しい処理 ○ https://qiita.com/knok/items/b3eb87769151ac04efeb ● Google Meetでもバーチャル背景を使いたい（私の記事） ○ https://qiita.com/massie_g/items/667627b6d12acc0163af
- 7. tensorflow.js とは？ ● tensorflow … Google が開発したフレームワーク ○ https://github.com/tensorflow/tensorflow ○ 数値解析や機械学習、ディープラーニング向け ○ 複数マシンで分散処理が可能 ○ python と C++ で実装 ○ 色々な言語から呼び出すためのバインディングを備えている ● tensorflow.js … JavaScritpに移植したもの ○ https://github.com/tensorflow/tfjs ○ 学習済みモデルを利用することが主だが、学習も可能（転移学習など）
- 8. body-pix ● body-pix … tensoflow.js 向けの学習済みモデルの1つ ○ https://github.com/tensorflow/tfjs-models/tree/master/body-pix ○ 画像からの人体検出、部位のセグメンテーション
- 9. 使ってみる（準備） JSの読み込み <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.2"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></script> モデルのロード（非同期） let net = null; async function loadModel() { net = await bodyPix.load(); } loadModel();
- 10. 使ってみる（検出） function segmentPerson(img, net) { const option = { flipHorizontal: false, internalResolution: 'medium', segmentationThreshold: 0.7, maxDetections: 4, scoreThreshold: 0.5, nmsRadius: 20, minKeypointScore: 0.3, refineSteps: 10 }; return net.segmentPerson(img, option); // 非同期、Promiseを返す } segmentPerson(img, net).then(segmentation => { /* … */ })
- 11. 使ってみる（背景をグレイでマスク） function maskCanvas(canvas, img, segmentation) { // マスクの作成 const fgColor = { r: 0, g: 0, b: 0, a: 0 }; // 人物部分はマスク透明(alpha=0) const bgColor = { r: 127, g: 127, b: 127, a: 255 }; // 背景部分はグレイ const colorMask = bodyPix.toMask(segmentation, fgColor, bgColor); // マスクを使って描画 const opacity = 1.0; const flipHorizontal = false; const maskBlurAmount = 0; bodyPix.drawMask(canvas, img, colorMask, opacity, maskBlurAmount, flipHorizontal); } 1コマ分の処理 動画ならこれを繰り返す
- 13. 背景の置き換え body-pix が提供する処理では、背景の置き換えはダイレクトにできない maskの中身を走査しながら、自分でピクセル毎に処理 (1)背景をコピー 背景用画像 合成用Canvas カメラ映像 [0,0,0,1,0,0, 0,0,1,1,1,0, 0,0,0,1,0,0, 0,0,1,1,1,0, ....] 人体セグメンテーション (1次元配列） (2)セグメンテーションが「 1」のピクセルを上書き 人物合成後
- 14. セグメント更新と、描画のタイミング バーチャル背景の動画には、2つの処理を継続的に行うことが必要 今回は次の作戦で実行 ● (a) リアルタイム映像から1コマ取り出し、背景と人物を合成して描画 ○ window.requestAnimationFrame() で可能な限り高頻度で呼び出し … 最大 60fps ○ その際に直近の(b)で取得したセグメンテーションを利用 ● (b) 人体セグメンテーションの取得 … 時間がかかる ○ 数十ms～100msかかるので、(a)よりも低頻度で呼び出し ○ 検出時間も一定ではないので、 setInterval()ではなく、毎回setTimeout(10ms) で呼び出し
- 19. これを Google Meet で使うには？ ● ここまでの処理を、自作アプリに組み込むことは可能 ○ tensorflow.js+bodypix → canvas.captureStream() ● これを、既存のGoogle Meetなどの Webアプリで使うには？ ○ Google Meetも内部的にはWebRTC（＋独自拡張）を利用 ○ navigator.mediaDevices.getUserMedia()で、カメラ映像を取得 ○ RTCPeerConnectionで通信 ■ P2Pでなく、SFUサーバーを経由している ○ JavaScriptの処理を改造できれば良いが ... ? → 諦めていたところ、「Chrome Extension を使え」との天啓アリ Google MeetのWebカメラを加工してみよう！ https://techblog.securesky-tech.com/entry/2020/04/30/
- 20. やりたいこと getUserMedia()をフック navigator.mediaDevices .getUserMedia() MediaStream PeerConnection カメラ映像 通信
- 21. やりたいこと getUserMedia()をフック navigator.mediaDevices .getUserMedia() MediaStream PeerConnection navigator.mediaDevices .getUserMedia() <video> <Canvas> MediaStream PeerConnection drawImage canvas .captureStream() 関数をフックして 置き換える カメラ映像 通信
- 22. manifest.json { "manifest_version" : 2, "content_scripts" : [ { "matches": [ "https://meet.google.com/*" , ], "js": [ "loader.js" ], "run_at": "document_start" } ], "permissions": [ "https://meet.google.com/" , ], "web_accessible_resources" : [ "cs.js" ] } 対象ページに、コンテンツを差し込む役割 ※対象となるページとは異なるglobalコンテキスト で動く 対象ページのJSよりも先に動かす 対象ページに差し込まれ、同じコンテ キストで動く 対象となるページに JavaScriptを差し込んだり DOM構造をいじったりできる
- 23. loader.js の流れ async function load() { // 差し込むJSファイルを読み込む const res = await fetch(chrome.runtime.getURL('cs.js'), { method: 'GET' }); const js = await res.text(); // スクリプトタグを作って、差し込む const script = document.createElement('script'); script.textContent = js; document.body.insertBefore(script, document.body.firstChild); }
- 24. cs.js中身：Hookするコード（概略） // 元の処理を取っておく navigator.mediaDevices._getUserMedia = navigator.mediaDevices.getUserMedia; // 新しい処理に置き換える navigator.mediaDevices.getUserMedia = function(constraints) { return new Promise((resolve, reject) => { // プロミスを返す navigator.mediaDevices._getUserMedia(constraints) // 元の処理を呼び出す .then(stream => { video.srcObject = stream; // 一旦Videoに表示 video.play(); requestAnimationFrame(_updateCanvasWithMask); // この関数でCanvas描画 const canvasStream = canvas.captureStream(10); // Canvasから映像取得 resolve(canvasStream); // 映像を返す }) .catch(err => reject(err)); }); }
- 25. Contents Scriptの動くタイミング ● loader.js … 対象ページのJSよりも先に動ける ○ "run_at": "document_start" の場合 ● cs.js … （差し込み方によるが） ○ window.onload(), body.onload()よりも先に動くことができる ○ が、bodyなどに直接書かれたスクリプトの方が先に動く ● → Google Meet は、開いた途端にbodyにあるgetUserMedia()が動くので、フック を仕込むのが間に合わない ...万事休す
- 26. Google Meet の回避策 ● カメラoff → カメラon で、映像を再取得している (getUserMediaを呼ぶ) ● そのため、一度手動で off → on してあげれば、フックした処理が動く → めでたし、めでたし
- 27. 細かい話
- 28. track.stop()の伝搬
- 29. 停止処理の概略 const canvasVideoTrack = canvasStream.getVideoTracks()[0]; // 元の処理を取っておく canvasVideoTrack._stop = canvasVideoTrack.stop; // 処理を置き換える(hook) canvasVideoTrack.stop = function () { keepAnimation = false; // バーチャル背景映像の更新を行うかどうかのフラグ canvasVideoTrack._stop(); // 元の処理を呼び出す userMediaVideoTrack.stop(); // 元々取得していたカメラ映像を停止 };
- 30. スクリーンキャプチャーと同時に使えない件 ● Google Meet の画面共有は ○ mediaDevices.getDisplayMedia()ではなく ○ mediaDevices.getUserMedia({video:{mandatory:{chromeMediaSource:"desktop"}}}) を利用 ● そのため、今回Extensionでフックした getUserMedia() が呼ばれる ○ カメラの代わりに画面キャプチャーを取得 ○ 人物が映っていない →すべて背景と判定→画像に置き換えられてしまう … ● 慌ててバイパス処理を昨日(7/13)追加
- 31. Thank you! ● Google Meetでもバーチャル背景を使いたい（私の記事） ○ https://qiita.com/massie_g/items/667627b6d12acc0163af ● Chrome ウェブストア でも公開中 ○ https://chrome.google.com/webstore/detail/chrome-virtual-camera/dphplfdpilhebmikohheeiblila jfmin/ ○ ※注意：もともとtensorflow.js を使っているページではうまく動かない ○ ※スクリーンキャプチャーのバイパス処理は未反映 ● GitHubでコード公開 ○ https://github.com/mganeko/chrome_virtual_camera ○ Chromeの「拡張機能」ページで、デベロッパーモードをオン ○ ダウンロードした拡張機能を読み込むと使える ○ manifest.jsonを編集すれば、好きなページで利用可能