Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

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

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

目次

  • 使用技術
  • 構成
  • 中身

使用技術

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

構成

スクリーンショット 2018-12-10 20.04.16.png

ビデオチャット自体は通常と同じように、skywayを通してWebRTCの通信を可能にしています
それによって音声や映像の送受信をしています

中身

アバターの動き

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

手順としては以下
1. (自分の場合は自分の映像を、相手は送られてきた映像を元に)映像からclmtrackrを用いてトラッキングを行う
2. トラッキングした結果が配列として得られる
3. live2Dの各パラメータに先ほど得られた配列の対応する値を代入する

このような手順でアバターの動きを実現しています
↓のGIFは左が元の映像、真ん中がclmtrackrによる結果、右が値を反映したlive2Dのアバターです
00.gif

アバターの変更

今回は複数のアバターを用意したためユーザーが任意に変更でき、それが受信側でも変更されるようにしました
この機能を実現するためにもWebRTCのチャット機能を使用しました

スクリーンショット 2018-12-10 20.19.04.png

  1. ユーザーが使用するアバターを変更する
  2. 選択したアバターのIDがwebRTC経由で相手に送信される(テキストチャットと同じ機能)
  3. 受信側は受信したアバターのIDを元にlive2Dのモデルを再生成&再描画する

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

感想

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

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

mooriii
React/Rails/Swift/Kotlin/Python
https://mooriii.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした