Edited at
SkyWayDay 10

Vtuberみたいなビデオチャットアプリ作ってみた


概要

先日参加させていただいたWebRTCハッカソンでLive2Dを使ったアバタービデオチャットを作成しました

firebaseでデプロイしてるのでぜひ試してみてください!

ゆる〜む


目次


  • 使用技術

  • 構成

  • 中身


使用技術


  • WebRTC

  • live2D

  • clmtrackr.js (トラッキングのライブラリ)


構成

ビデオチャット自体は通常と同じように、skywayを通してWebRTCの通信を可能にしています

それによって音声や映像の送受信をしています


中身


アバターの動き

アバターにはlive2Dを使用しています

また、jsのライブラリであるclmtrackr.jsを使用して送られてきた映像から顔のトラッキングをしています

手順としては以下

1. (自分の場合は自分の映像を、相手は送られてきた映像を元に)映像からclmtrackrを用いてトラッキングを行う

2. トラッキングした結果が配列として得られる

3. live2Dの各パラメータに先ほど得られた配列の対応する値を代入する

このような手順でアバターの動きを実現しています

↓のGIFは左が元の映像、真ん中がclmtrackrによる結果、右が値を反映したlive2Dのアバターです


アバターの変更

今回は複数のアバターを用意したためユーザーが任意に変更でき、それが受信側でも変更されるようにしました

この機能を実現するためにもWebRTCのチャット機能を使用しました


  1. ユーザーが使用するアバターを変更する

  2. 選択したアバターのIDがwebRTC経由で相手に送信される(テキストチャットと同じ機能)

  3. 受信側は受信したアバターのIDを元にlive2Dのモデルを再生成&再描画する

このような手順でホスト側ゲスト側の使用しているモデルの同期を行なっています


感想

ハッカソンの結果は最優秀賞+NTTコミュニケーションズ賞のW受賞でした!(嬉しい!!)

Skywayのおかげでほんとに簡単にWebRTCの機能を実装できちゃうのでぜひ使ってみてください!