Vライバー配信を Media over QUIC で実現するデモ

WebRTC の時もだったんですが、デモを見せる際に超低遅延で高解像度かつ高フレームレートみたいなのを実感して貰う方法が難しいなと思っていたのだが、ふと思い立ち V ライバーをブラウザで実現して Media over QUIC Transport (以降 MOQT)で配信してみたら、これは思ったデモとして最適なのでは？？となりある程度作り込んでみることにした。

実装

Three.js を使えばできるというのと、モデルデータは VRM という規格があるというのは知っていたのでこの辺りを利用すれば実現できるだろうと考えた。

Canvas へのレンダリングさえしてしまえば後は WebCodecs API でエンコードして MOQT に乗っけるだけになる。Peact など UI 周りを除けば以下だけで実現できた。

"@mediapipe/tasks-vision": "0.10.22-rc.20250304",
"@pixiv/three-vrm": "3.4.4",
"moqt-js": "2026.1.0",
"three": "0.182.0",

MediaPipe で顔認識させてうまいことやる。あとはその情報をモデルデータにマッピングしてレンダリングする。ちなみに moqt-js は自社で開発してる MOQT のブラウザ向けライブラリ。

モデルデータは pixiv さんが公開してくれているモデルデータである AvatarSample_A を利用。利法人利用: OK / クレジット表記: 不要 利用規約が緩くてありがたい。B さんと C さんも一応テスト用に利用してますが、まぁ A さんでいいだろう。

結果

普通にうまくいった。モデルデータは毎回読み込むのめんどくさいので OPFS に保存して選択するだけにした。

手の動きを付けるとかの知識がまったくないので、あくまで顔の表情と首の動きだけ。あとはうまいことを肩が少しだけ動くように調整した。角度が確認したいので、マウスでモデルをいろいろな位置から見れるようにした

動きが多ければ超低遅延だったり、高フレームレートをアピールしやすい。

雑感

思った以上に WebRTC や MOQT といった超低遅延で高画質な映像を配信するデモとしてはとてもいいように思える。特にリアルタイムコミュニケーションでは lipsync が重要なこともあり、これだと lipsync も確認できてとても良い。

それにしてもブラウザでここまでできるなんてイイ時代になった、色々作り込んで誰もが気軽に使える状態に持って行きたい。