ライブ会場のステージに複数の視聴者を投影するサンプル
- Agora.io
- webrt
コロナの影響で、無観客ライブ配信の開催が多く見られるようになってきました。
この場合は基本的に1方向での配信になり、演者と視聴者の一体感が生まれません。
その代替として、ライブの視聴者の映像をステージ上の壁に投影するケースが生まれてきました。
この記事ではそのシステムを簡易に実現できるサンプルコードについて解説します。
このシステム名”FanWall”と呼んだりしています。
構成イメージ
ライブ会場のイメージ

視聴者が見ている画面

FanWallの画面

システム構成

- 聴者は同時に2つのチャンネルに接続します。
会場からのライブ映像を受け取る専用のチャンネルと、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
実装の解説
- 視聴者のチャンネル接続は2箇所になります。
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
- 配信側のチャンネル接続は1箇所になります。
https://github.com/fu-jimoto/AgoraIO-FanWall/blob/main/host.html#L48
又、全体的に複雑な実装はなく、単純なライブ配信のロジックになります。
- FanWallのチャンネル接続も1箇所になります。
https://github.com/fu-jimoto/AgoraIO-FanWall/blob/main/operator.html#L48
視聴者の映像をクリックする事で該当者の音声をライブ側のチャンネルに流します。
https://github.com/fu-jimoto/AgoraIO-FanWall/blob/main/operator.html#L144
開催予定のセミナー
開催予定のセミナーをご紹介します。
Agoraに関するお問い合わせ
03-4405-2688
受付時間:平日10:00〜18:00