テレワークで日本を変える|Web会議・テレビ会議(TV会議)のブイキューブ

テレワークで日本を変える|テレビ会議(TV会議)・Web会議・電話会議のブイキューブ

オンラインカラオケバトルの実装 (Androidアプリ版)

  • Android
  • Agora.io

オンラインカラオケバトルとは

タイトルのままです。オンラインでカラオケを行い、オーディエンスが投票をするアプリです。
配信者x2名、オーディエンスx複数名という基本的な構成になります。

必要とされる技術

配信側

・低遅延でのカメラ/マイクのデータ送受信
・音楽ファイルの再生と送受信

オーディエンス側

・低遅延での映像/音声/音楽の受信
・投票
オーディエンス側は要件次第では低遅延が不要になる場合もあります。

agora.ioを利用した実装方法

構成図

オーディエンス多数が多数で、既に利用しているCDNをそのままに活用したいという場合の構成図になります。既存CDNなどの利用がない場合はRTMP変換不要でCDNを介さずに直接SDKで受信も可能です。
また、RTMP変換機能の利用には設定が必要になります。

HostA - B 間ではagora.io独自のNativeSDKを利用してカメラ/マイクデータの送受信をします。
また、音楽ファイルはHostAからNativeSDKのAPIを利用して送受信します。

nginx-rtmp-moduleはRTMPでデータ受信できるインタフェースがありますので、APIを利用してagora.ioネットワークからストリームをpushします。

具体的な実装

サンプルはこちらに公開しています。
元ネタはagora.ioが公開しているサンプルになります。

ホスト側の実装

カメラ/マイクデータの送受信

公式ドキュメントからシーケンス図を抜粋しました。

超低遅延のオプション

特殊APIをコールすることで超低遅延が実現できます。

VideoActivity.java
  mRtcEngine.setParameters("{\"che.audio.enable.androidlowlatencymode\": true}");
  mRtcEngine.setParameters("{\"che.audio.lowlatency\":true}");
  mRtcEngine.setParameters("{\"rtc.lowlatency\":1}");

実際のコードはこちら

音声ファイルの読み込みと配信

1行で実現可能です。

VideoActivity.java
    mRtcEngine.startAudioMixing("/storage/emulated/0/Download/foo.mp3", false,false,-1);

実際のコードはこちら

RTMPでデータのpush

レイアウトや画質等を設定して配信します。

レイアウト設定はGithubを参照ください。
レイアウト/画質設定
設定の反映

pushの実行

VideoActivity.java
mRtcEngine.addPublishStreamUrl("rtmp://URL/app/stream", true);

実際のコードはこちら

オーディエンス側の動作確認

オーディエンス側はHLSで再生させます。
RTMPからのHLS変換についてはこちらを参考にnginx-rtmp-moduleを利用しました。
HLS再生は一般的な技術なので今回は実装せずにwowzaのサンプルプレイヤーで簡易的に検証します。

レイアウトについてもAPIを利用して自由にカスタマイズする事が可能です。

agora.io SDK イメージ
agora.io SDK

大規模・安価・すぐに使える
ライブ配信・ビデオ通話・音声通話SDK

 

先頭へ戻る