【個人開発】Live2DでWeb会議できるChrome拡張(アイデア)

趣味の個人開発の紹介記事です。

Live2D ＋仮想カメラで、顔出しせずにボタン制御でWeb会議にアバター参加できるChrome拡張を作りました。

まつよう

ライトニングトークでネタにしました。

Contents

1 (きっかけ)日々のWeb会議で感じること
2 じゃあアバターはどうか
3 完成イメージ
4 開発：Chrome拡張で仮想カメラ
- 4.1 Chrome拡張開発参考記事
5 開発：Live2D Cubism SDK for Webで2Dモデル
- 5.1 2Dモデル開発参考記事
6 最終成果物

(きっかけ)日々のWeb会議で感じること

・急に顔出しを求められると困る。

・顔出しをしてもマスクをしていて表情が見えない。

・顔が見えても別に表情が豊かでない。どんな顔していいかわからない。

・ちょっとしたリアクションでマイクオンにするのも迷う。

→カメラON/OFF以外の新しい選択肢が欲しい。

じゃあアバターはどうか

・よくあるアバターも、結局カメラをオンにして顔を動かさないといけない。

・素顔が見えない意味で負担は減るけど、「リアクションする」「表情を見せる」だけが目的ならもっと楽な方法がある気がする。

→アバターのボタン制御を思いつく

完成イメージ

・仮想カメラを使って、カメラをオンにしなくても2Dモデルが表示される。

・ボタン制御することで、自分の顔を動かさなくても表情が切り替わる。

・セリフを入力することで、喋らなくてもさりげなく言葉でリアクションできる。

・仕事でも使えるような落ち着いたイラスト。(フリーイラスト：ソコスト)

・OBSのインストールは不要。Chrome拡張さえ追加すれば利用可能。

・ブラウザから参加すれば、Zoom/Teams/GoogleMeetに対応可能。

職場でも気軽に違和感なく使えることを目標に開発しました。

開発：Chrome拡張で仮想カメラ

↓開発したソースコード

主にTypescriptでChrome拡張を実装し、以下の処理を行うようにしました。

・Zoom/Teams/GoogleMeetの会議ページを開いた際、Javascriptのソースコードを挿入する。

・MediaDevicesのAPIを呼び出すことで、画面キャプチャの情報を仮想カメラとして扱えるようにする。

・Web会議の画面上にボタンを表示させる。このボタンを押すことで、2Dモデル表示用のブラウザ、表情制御用のブラウザが表示されるようにする。

{
  "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
}