趣味の個人開発の紹介記事です。
Live2D + 仮想カメラで、顔出しせずにボタン制御でWeb会議にアバター参加できるChrome拡張を作りました。
Contents
(きっかけ)日々のWeb会議で感じること
・急に顔出しを求められると困る。
・顔出しをしてもマスクをしていて表情が見えない。
・顔が見えても別に表情が豊かでない。どんな顔していいかわからない。
・ちょっとしたリアクションでマイクオンにするのも迷う。
→カメラON/OFF以外の新しい選択肢が欲しい。
じゃあアバターはどうか
・よくあるアバターも、結局カメラをオンにして顔を動かさないといけない。
・素顔が見えない意味で負担は減るけど、「リアクションする」「表情を見せる」だけが目的ならもっと楽な方法がある気がする。
→アバターのボタン制御を思いつく
完成イメージ
・仮想カメラを使って、カメラをオンにしなくても2Dモデルが表示される。
・ボタン制御することで、自分の顔を動かさなくても表情が切り替わる。
・セリフを入力することで、喋らなくてもさりげなく言葉でリアクションできる。
・仕事でも使えるような落ち着いたイラスト。(フリーイラスト:ソコスト)
・OBSのインストールは不要。Chrome拡張さえ追加すれば利用可能。
・ブラウザから参加すれば、Zoom/Teams/GoogleMeetに対応可能。
職場でも気軽に違和感なく使えることを目標に開発しました。
開発:Chrome拡張で仮想カメラ
↓開発したソースコード
主にTypescriptでChrome拡張を実装し、以下の処理を行うようにしました。
・Zoom/Teams/GoogleMeetの会議ページを開いた際、Javascriptのソースコードを挿入する。
・MediaDevicesのAPIを呼び出すことで、画面キャプチャの情報を仮想カメラとして扱えるようにする。
・Web会議の画面上にボタンを表示させる。このボタンを押すことで、2Dモデル表示用のブラウザ、表情制御用のブラウザが表示されるようにする。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{ "name": "Virtual Camera for Virtual Reaction", "description": "Extensions for using virtual cameras in web meeting", "version": "1.1", "content_scripts":[ { "matches":["https://zoom.us/*", "https://us04web.zoom.us/*", "https://teams.live.com/*", "https://teams.microsoft.com/*", "https://meet.google.com/*"], "js":["index.js"], "all_frames": true } ], "web_accessible_resources": [{ "resources": ["camera.js","gui.js","gui.css"], "matches":["https://zoom.us/*", "https://us04web.zoom.us/*", "https://teams.live.com/*", "https://teams.microsoft.com/*", "https://meet.google.com/*"] }], "manifest_version": 3 } |
Chrome拡張開発参考記事


開発:Live2D Cubism SDK for Webで2Dモデル
↓開発したソースコード
以下の流れで開発しています。
・GIMPでイラスト修正
・Live2D Cubism Editorでイラストを2Dモデル化
・TypeScript (Cubism SDK for Web )で2Dモデル制御プログラム実装
・HTML/CSSで制御/表示ページ作成
・Herokuの無料プランにデプロイ
2Dモデルと制御ボタンのブラウザ間はJavascriptのPostMessageでデータ通信を行っています。
2Dモデル、モデル制御ボタンを会議用ブラウザとは別で表示するようにしていますが、本当は全て1つのブラウザにまとめたかったです。が、実現できませんでした。
Web会議用ブラウザに2Dモデルや制御ボタンを埋め込んだ場合、クロスドメインの制約に、なぜかZoomでだけ引っかかってしまいました。
ブラウザを分けたのは苦肉の策です。
2Dモデル開発参考記事
↓Live2D Cubism SDK for Web:ダウンロードページ

↓SDKダウンロード時に同梱されていたサンプルプロジェクトをベースに開発しました。



最終成果物
限定公開しているのでよければ使用してみてください。