ビデオ会議で使う2Dアニメキャラ作成と顔認識

ビデオ会議で使う2Dアニメキャラクターの作り方 顔認識をトレースしてアバターに反映する仕組み Webのビデオ会議では、カメラ映像をそのまま相手に送るのではなく、2Dアニメキャラクターを表示したいケースがある。 たとえば、次のような目的がある。 自分の顔や部屋をそのまま見せたくない 顔の向きや表情は相手に伝えたい アバ...

ビデオ会議で使う2Dアニメキャラクターの作り方 顔認識をトレースしてアバターに反映する仕組み Webのビデオ会議では、カメラ映像をそのまま相手に送るのではなく、2Dアニメキャラクターを表示したいケースがある。 たとえば、次のような目的がある。 自分の顔や部屋をそのまま見せたくない 顔の向きや表情は相手に伝えたい アバター越しに自然な会話感を出したい 専用の高機能ランタイムを使わず、Web技術だけで軽く動かしたい ビデオ会議の映像トラックとして、そのまま送信したい この記事では、ブラウザ上で顔認識を行い、その結果を2Dアニメキャラクターに反映し、Canvasで描画した映像をビデオ会議に送る仕組みを整理する。 実際に顔認証で動く2Dのアニメキャラ機能は、当サイトにログイン後、ヘッダにある「ビデオ通話」からお試しください。 --- 全体の仕組み 基本構成はシンプルである。 重要なのは、相手へ送るのは実写映像ではなく、Canvasで生成したアバター映像 という点である。 カメラ映像は顔認識の入力として使うが、そのまま相手へ送らない。 送信用の映像は、アバターを描画したCanvasから生成する。 --- なぜCanvasで作るのか 2DアニメキャラクターをWeb会議で使う場合、Canvasを使うと構成が扱いやすい。 理由は次のとおり。 理由 内容 ------------- ----------------------------- ブラウザだけで動く 専用アプリを入れずにWeb上で完結できる 画像パーツを重ねやすい 顔、目、口、髪などをレイヤーとして描ける 表情を毎フレーム更新できる 顔認識結果に応じて目・口・眉を動かせる 映像トラック化できる captureStream() でWebRTCに送れる 実写映像を送らずに済む プライバシー保護に向いている Canvasは単なる描画領域だが、captureStream() を使うことで、描画結果をビデオ映像として扱える。 この avatarVideoTrack をWebRTCの送信映像として使えば、相手にはアバター映像だけが届く。...