エンタメライブ配信＋グループビデオ通話による無観客ライブ

コロナの影響でエンタメ系のライブが開催が難しくなってきています。                                                                                                    
また、コロナ収束後も、遠隔地のライブ視聴を自宅でしたいというニーズもあるかと思います。
代替としては、単純なライブストリーミング配信機能で遠隔で視聴するという事になるかと思います。  
                                                                                                  
                                                                                                    
##ライブストリーミングでの課題                                                                                                    
オーソドックスな配信では以下の課題が出てきます。                                                                                                    
1.映像音声の遅延                                                                                                    
2.観客同士のコミュニケーションが取れない                                                                                                    
3.観客の様子が配信側に伝わらない                                                                                                    
                                                                                                    
##agora.ioで課題解決                                                                                                    
###1.映像音声の遅延に対して                                                                                                    
一般的なHLSでの配信は5秒から15秒の遅延が発生します。最近ではこの遅延を縮める技術も出てきていますが、それなりの開発コストや配信コストがかかってきます。                                                                                                    
                                                                                                    
###2.観客同士のコミュニケーションに対して                                                                                                    
現実のライブ会場では、仲間通しのコミュニケーションが可能ですが、オンラインでは別途グループ通話ができるアプリを用意する必要があります。                                                                                                    
                                                                                                    
###3.観客の様子が配信側に伝わらない                                                                                                    
こちらも2.の課題と同様に一方向の配信では観客の反応が見えません。仮に観客同士がグループ通話で会話していれば、こっそりと様子を伺いたい場合もあるかと思います。                                                                                                    
                                                                                                    
                                                                                                    
##画面構成例               

                                                                                     
![LiveViewWithVideoCall-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/4f3d70db-ee21-4dd4-19fb-977d0af2aef1.jpeg)                                                                                                    
                                                                                                    
1つのアプリ上で、ライブ配信を視聴しつつ、ビデオ通話を備えた構成になっています。                                                                                                    
                                                                                                    
###配信側                                                                                                    
配信側は以下のような方法があります。                                                                                                    
(1)既存のHLS配信システムを利用                                                                                                    
(2)agora.ioのSDKを利用した配信アプリを利用                                                                                                    
(3)既存のHLS配信システムからagora.ioのネットワークに映像を引き込む                                                                                                    
                                                                                                    
                                                                                                    
(1)については既存のシステム利用するイメージです。Youtubeのライブを貼り付けるといった方法も考えられます。                                                                                                    
このパターンの問題点としてはエコーキャンセルが効かず、配信の音がビデオ通話に流れ込む可能性があります。(2)と(3)については発生しません。                                                                                                    
(2)についてはWebブラウザアプリや、Windows/Macのアプリを独自で実装し、配信を行います。Windows/MacアプリについてはElectron用のSDKもあるので対応可能なエンジニアも確保しやすいかと思います。                                                                                                    
又、OBSにSDKを組み込んで実装する事も可能です。                                                                                                    
https://github.com/AgoraIO/OBS                                                                                                    
(3)については、既存のRTMPやHLSの出力するインターフェースがあれば、そこからagora.ioのネットワークへ映像を引き込む事が可能です。データフローの例は以下です。                                                                                                    
エンコーダー→rtmp→AWS Elemental Live→HLS→agora server→視聴者                                                                                                    
                                                                                                    
###視聴側                                                                                                    
視聴側については、HLS方式ですと遅延が大きすぎ会話が成立しない為、WebRTCを用いた実装が基本となります。agora.ioやSkyway、Twilio等のVideoSDKを利用することで工数短縮が可能になります。                                                                                                    
**尚、配信側とビデオ通話側の要素技術を統一しないとエコーが発生する場合があります。**                                                                                                    
                                                                                                    
                                                                                                    
###最終的な構成例                                                                                                    
**(1)既存のHLS配信システムを利用+ビデオ通話SDK組み込み**
                                                                                                    
![LiveViewWithVideoCall-HLS+Agora.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/6707026e-93da-a929-f72d-3bf80c98c634.jpeg)                                                                                                    
1つのページに２つの映像音声サービスをミックスした形になります。ライブ映像部分は各種サービスの貼り付けタグや、ビデオプレイヤーをレンダリングします。                                                                                                    
ビデオ通話の部分についてはWebRTC等の技術を独自で実装するか、PaaS等を利用して組み込みます。                                                                                                    
このケースの場合は、視聴者がイヤフォンマイクをつけていないとPCから出力される音をマイクが拾ってビデオ通話へ流れ、エコーが発生する可能性があります。                                                                                                    
またライブ映像部分は数秒の遅延が発生します。                                                                                                    
                                                                                                    
**(2)agora.ioのSDKを利用した配信アプリを利用**       
                                                                                             
![LiveViewWithVideoCall-AgoraOnly-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/50a394ce-7a83-f7ab-0e22-348e1c48ce20.jpeg)                                                                                                    
ライブ映像、ビデオ通話ともにAgoraSDKを利用した形になります。大人数のライブ視聴とビデオ通話を１つのSDKで対応が可能です。                                                                                                    
どちらの映像も低遅延で実現が可能で、同一システムを利用するのでエコーの心配がありません。                                                                                                    
                                                                                                    
                                                                                                    
**(3)既存のHLS配信システムからagora.ioのネットワークに映像を引き込む**                                                                                                    
![LiveViewWithVideoCall-AgoraOnly-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/c51dc499-b60c-5cd6-cdd8-bdc24f4b41e4.jpeg)                                                                                                    
ライブ映像のエンコードやHLS化は既存のシステムを流用する形になります。再生部分についてをAgoraSDKがカバーします。                                                                                                    
このパターンでも同一システムを利用するのでエコーの心配がありません。                                                                                                    
                                                                                                    
###実装例                                                                                                    
agora.ioを利用した場合の実装は以下のイメージです。                                                                                                    
[サンプルはこちら](https://github.com/fu-jimoto/AgoraIO-LiveViewing-With-VideoChat)                                                                                                    
(1)配信側はChannel Aに配信                                                                                                    
(2)視聴者側はライブ視聴としてChannel Aに接続。このChannelに対しては映像音声は送信しません。                                                                                                    
(3)更に視聴者側はビデオ通話用にChannel Bに接続。このChannelに対しては映像音声を送受信します。                                                                                                    
                                                                                                    
知り合いのみでビデオ通話したい場合では、グループ毎にChannel C,Channel Dを作っていき(3)の処理をするイメージになります。                                                                                                    
                                                                                                    
###観客の様子が配信側に伝わらない課題に対して                                                                                                    
配信側も視聴者側と同じ仕組みで、各グループ通話に参加する事が可能です。例えばChannel Bでの会話の様子を見たい場合は、Channel Bに対して、視聴のみの接続をする事で様子を伺う事が可能です。                                                                                                    
![LiveViewWithVideoCall-AgoraOnly-etc.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/1aa7e0da-1863-35d7-5ec2-b5956c248cda.jpeg)                                                                                                    
                                                                                                    
                                                                                                    
ライブ配信機能とビデオ通話機能を備えたagora.io SDKを利用すれば、このようにエンタメ系ライブの進化した体験を提供する事が可能になります。                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
##最後に                                                                                                    
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=c2c5e833c83d2e06d7e5)   
[**agoraがよくわかる！無料セミナー実施中！**](https://jp.vcube.com/service/agora#seminar)                                                                                                
[<img width="912" alt="スクリーンショット 0001-08-15 13.41.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5d815376-9b89-08fa-9434-6fa7e8e67bcf.png">](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=c2c5e833c83d2e06d7e5)