ライブ会場のステージに複数の視聴者を投影するサンプル

コロナの影響で、無観客ライブ配信の開催が多く見られるようになってきました。
この場合は基本的に1方向での配信になり、演者と視聴者の一体感が生まれません。

その代替として、ライブの視聴者の映像をステージ上の壁に投影するケースが生まれてきました。
この記事ではそのシステムを簡易に実現できるサンプルコードについて解説します。
このシステム名”FanWall”と呼んだりしています。

SDKv3系のサンプルはこちら
SDKv4系のサンプルはこちら

##構成イメージ
###ライブ会場のイメージ

###視聴者が見ている画面

###FanWallの画面

##システム構成

視聴者は同時に２つのチャンネルに接続します。
会場からのライブ映像を受け取る専用のチャンネルと、FanWallに対して映像を送るチャンネルになります。運営者から選択された視聴者はライブ配信用のチャンネルに音声が流れます。

配信者は一方的にライブ映像を配信するチャンネルに接続します。

FanWallは視聴者の映像を受け取って表示をしています。
また、サンプルでは視聴者をクリックする事で、ライブ配信のチャンネルに音声を流す事が可能です。

##実装の解説
視聴者のチャンネル接続は[２箇所になります。
L54
L112
ライブ配信用にはマイクだけ取得、FanWall用にはカメラだけ取得しておきます
又、初期の段階では音声は配信しません。
運営者側からの操作で音声が配信されます。
L142

配信側のチャンネル接続は１箇所になります。
L48
又、全体的に複雑な実装はなく、単純なライブ配信のロジックになります。

FanWallのチャンネル接続も１箇所になります。
L48
視聴者の映像をクリックする事で該当者の音声をライブ側のチャンネルに流します。
L144

##実運用で出てきた課題
FanWallの各チャンネルに視聴者をランダムに振り分けた際、すべての枠が視聴者の映像で埋まらないケースがでてきます。
そこで、FanWallの操作で、映像を送ってきてくれているユーザを特定のチャンネルに移動させるサンプルを追加しました。
(こちらはSDKv4のサンプルに実装しています）
Fanwall側
視聴者側
FanWall側で特定の視聴者を特定のチャンネル(mainチャンネルへ移動も可能）できる処理を追加しています。
（実際には、裏側のオペレータ専用の画面で操作することになるかと思います。）

##最後に
agora.ioに関するお問い合わせはこちらから