【個人開発】Live2DでWeb会議できるChrome拡張

シェアする

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

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

Virtual Camera for Virtual Reaction
Extensions for using virtual cameras in web meeting
まつよう
ライトニングトークでネタにしました。

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

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

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

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

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

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

じゃあアバターはどうか

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

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

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

完成イメージ

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

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

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

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

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

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

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

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

↓開発したソースコード

GitHub - matsuyou/VirtualCameraForVirtualReaction: 仮想カメラでリモート会議に参加するためのChrome拡張
仮想カメラでリモート会議に参加するためのChrome拡張. Contribute to matsuyou/VirtualCameraForVirtualReaction development by creating an account on GitHub.

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

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

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

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

Chrome拡張開発参考記事

画面キャプチャを仮想カメラとして扱えるようにするChrome拡張を作ってみる
とほほのChrome拡張機能開発入門 - とほほのWWW入門
Migrating to Manifest V3 - Chrome Developers
A high-level guide to how you can migrate your Manifest V2 extensions to Manifest V3.

開発:Live2D Cubism SDK for Webで2Dモデル

↓開発したソースコード

GitHub - matsuyou/VirtualReaction: リモート会議の仮想カメラに投影するための2Dモデル
リモート会議の仮想カメラに投影するための2Dモデル. Contribute to matsuyou/VirtualReaction development by creating an account on GitHub.

以下の流れで開発しています。

・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:ダウンロードページ

Live2D Cubism SDK - Live2D Cubism
Live2D Cubism SDKとはCubism Editorで制作・作成したモデルを、ユーザーアプリケーション上で扱うためのソフトウェア開発キットです。

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

サンプルプロジェクトにモデルを追加する | Live2D Manuals & Tutorials

【JavaScript】PostMessageを使ったクロスドメインでのデータ通信 | LaunchCart | 越境EC専用カート
【JavaScript】PostMessageを使ったクロスドメインでのデータ通信|アジア向け越境ECカート実績No1。中国、台湾、香港、マレーシア、シンガポール、タイ、ベトナム、インドネシア他160通貨対応。
Hello WorldをHerokuでデプロイ - Qiita
はじめに 前回の記事 Spring Initializerを使ってHello World で作成したアプリケーションを公開します。 Herokuを利用したいので、公式サイト Git を使用したデプロイ に沿って進めます。 準...

最終成果物

Virtual Camera for Virtual Reaction
Extensions for using virtual cameras in web meeting

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

まつよう
アバターでの会議参加、普及してほしい!
スポンサーリンク

シェアする

スポンサーリンク