ライブ会場のステージに複数の視聴者を投影するサンプル
- Agora.io
- webrt
コロナの影響で、無観客ライブ配信の開催が多く見られるようになってきました。
この場合は基本的に1方向での配信になり、演者と視聴者の一体感が生まれません。
その代替として、ライブの視聴者の映像をステージ上の壁に投影するケースが生まれてきました。
この記事ではそのシステムを簡易に実現できるサンプルコードについて解説します。
このシステム名”FanWall”と呼んだりしています。
構成イメージ
ライブ会場のイメージ
視聴者が見ている画面
FanWallの画面
システム構成
- 聴者は同時に２つのチャンネルに接続します。
会場からのライブ映像を受け取る専用のチャンネルと、FanWallに対して映像を送るチャンネルになります。運営者から選択された視聴者はライブ配信用のチャンネルに音声が流れます。
https://github.com/fu-jimoto/AgoraIO-FanWall/blob/main/audience.html
- 配信者は一方的にライブ映像を配信するチャンネルに接続します。
https://github.com/fu-jimoto/AgoraIO-FanWall/blob/main/host.html
- FanWallは視聴者の映像を受け取って表示をしています。
また、サンプルでは視聴者をクリックする事で、ライブ配信のチャンネルに音声を流す事が可能です。
https://github.com/fu-jimoto/AgoraIO-FanWall/blob/main/operator.html
実装の解説
- 視聴者のチャンネル接続は２箇所になります。
https://github.com/fu-jimoto/AgoraIO-FanWall/blob/main/audience.html#L54https://github.com/fu-jimoto/AgoraIO-FanWall/blob/main/audience.html#L112
ライブ配信用にはマイクだけ取得、FanWall用にはカメラだけ取得しておきます。
又、初期の段階では音声は配信しません。
運営者側からの操作で音声が配信されます。
https://github.com/fu-jimoto/AgoraIO-FanWall/blob/main/audience.html#L142
- 配信側のチャンネル接続は１箇所になります。
https://github.com/fu-jimoto/AgoraIO-FanWall/blob/main/host.html#L48
又、全体的に複雑な実装はなく、単純なライブ配信のロジックになります。
- FanWallのチャンネル接続も１箇所になります。
https://github.com/fu-jimoto/AgoraIO-FanWall/blob/main/operator.html#L48
視聴者の映像をクリックする事で該当者の音声をライブ側のチャンネルに流します。
https://github.com/fu-jimoto/AgoraIO-FanWall/blob/main/operator.html#L144
