Agoraを使った音声ライブ配信アプリの作り方


## はじめに
プレミアム音声サービスNowVoiceのAndroidアプリ開発を担当しているkiyoです。
NowVoiceアプリでは、音声ライブ配信機能を提供しています。
この記事では、ライブ機能を実装するまでの導入手順や実装ポイントについてまとめました。

## NowVoiceライブ配信機能

<img src="https://i.imgur.com/85KBzAm.png" width=25%>

NowVoiceアプリのライブ配信機能では、単純なライブ配信機能の他にも以下のような機能を備えています。
そしてその機能のほとんどがAgoraSDKを介して実装されています。

```
## ライブ配信機能
 - MAX4人の対談機能
 - ホストがユーザを対談に招待する機能（招待機能）
 - リスナー側がホストに対談をリクエストする機能（挙手機能）
 - コメント投稿機能
 - 課金型コメント投稿機能（スーパーチャット）
```


この記事では、AgoraSDKを用いた音声ライブ配信機能を実現するためのポイントについてご説明します。

## 目次
1. Agoraとは
2. 事前準備
3. 実装について


## 1. Agoraとは

https://jp.vcube.com/service/agora

「Agora（agora io sdk）は、自社開発のスマートフォン・PCアプリやWebサイトに、カスタマイズしたビデオ・音声通話やライブ配信機能をかんたんに実装できるSDK*です。 動画や音声配信の可能性を広げて、新感覚のユーザー体験を実現できるようなAPIと開発ツール群を提供しています」

SDKはAndroid , iOS , Unity , Flutterなど様々な種類があります。
ドキュメントが充実しているため、非常にスピーディーにアプリに組み込むことができます。

ご自身のアプリの要件にあったSDKを組み合わせて使用することができます。

```
Voice SDK : 音声通話、音声のみのライブ配信サービスなど
Video SDK : 講義配信、テレビ会議サービスなど
Real-time Messaging SDK : チャット、コメント、画像の送信など
```


他にもライブ配信を実現するSDKはあるかと思いますが、
私たちがAgoraを選定したポイントは以下の3点です。

```
1.システム実装の時間や手間は抑制できるか？
→AgoraはAPIやサンプルコードが豊富なので容易に実装することができ、アプリ・WEB共に開発の負荷を低減できる

2.音声の遅延を少なくできるか？
→Agoraは独自のプロトコルにより、平均0.3秒の超低遅延を実現している

3.1対nだけでなくn対nの配信がデュアルストリームで可能か？
→ライブ双方向通話の様子を「コラボ配信」として100万人の視聴者へ届けることが可能。デュアルストリーミングにも対応している
```



## 2. 事前準備
Agoraを使用してアプリを実装する場合、Agoraアカウントが必要になります。
Agora DevPortalにアクセスしてサインアップしましょう。

https://sso.agora.io/en/signup/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275576/80a074b3-554a-d747-280a-26e964be67e5.png)


サインアップが完了すると、Agoraコンソールにリダイレクトされます。
「New Project」をクリックして、プロジェクトを作成しましょう。
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275576/afb92afa-0456-afa4-4be7-b85ea4df3020.png)


プロジェクト作成の際は以下の項目が必要になります。

```
Project Name : 任意の名前でOK。ダッシュボードで表示される
UseCase : Education , SmartDevices など適切なものを選択する
APP ID : 調査実装の段階では(2)でも問題ないが、リリースする場合にはよりセキュリティレベルが高い(1)を選択する
ここで作成したAPP IDはアプリの実装時に使用します。
```

![image5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275576/a30cb1f2-9a32-844b-8695-c64c987a8db4.png)


最後に、該当のSDKをダウンロードすれば事前準備は完了です。
![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275576/5dbecd64-04cb-2a54-1b7b-209d7fd531cc.png)


## 3. 実装について
* AgoraSDKのRTC (Real-time Communication) 技術使って音声ライブ配信機能を実現します
* NowVoiceでは、配信用アカウントでログインしたホスト(著名人)が、「ライブ配信を開始」ボタンを選択することにより、Agoraのライブ開始処理が走ります
* その他のユーザーはアプリTOPのカルーセルをタップすることにより、ライブ配信に参加することができます

<img src="https://i.imgur.com/whBXAjr.png" width=25%> <img src="https://i.imgur.com/J6WKLjW.png" width=25%>

今回はライブ配信の開始までに使用するAgoraSDKの処理についてまとめました。

![image6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275576/56584752-98f1-a7e8-f155-359d3c2e984b.png)



### ① AgoraRtcEngineのインスタンスを作成
Java

```Live.java
rtcEngine = RtcEngine.create(NVApplication.getInstance(), 用意したAppID, new IRtcEngineEventHandler()
```

Swift

```Live.swift
mRtcEngine = AgoraRtcEngineKit.sharedEngine(withAppId: "用意したAppID", delegate: self)
```


### ② チャンネル情報をライブに設定

Java

```Live.java

rtcEngine.setChannelProfile(Constants.CHANNEL_PROFILE_LIVE_BROADCASTING);

```

Swift

```Live.swift
mRtcEngine.setChannelProfile(.liveBroadcasting)
```


### ③ 自身のLive内の役割を設定

Java

```Live.java
// ライブ作成時
rtcEngine.setRtcClientRole(ClientRole.CLIENT_ROLE_BROADCASTER);

// ライブ参加時
rtcEngine.setChannelProfile(ClientRole.CLIENT_ROLE_AUDIENCE);

```

Swift

```Live.swift
// ライブ作成時
mRtcEngine.setClientRole(.broadcaster)

// ライブ参加時
mRtcEngine.setChannelProfile(.audience)
```


### ④ チャンネルに入室

Java

```Live.java
rtcEngine.joinChannel(
   rtcToken: "取得したRTC Token",
   channelName: "チャンネルを特定できるName",
   info: null,
   uid: "ユーザ一意のID"
)
```

Swift

```Live.swift
mRtcEngine.joinChannel(
    byToken: "取得したRTC Token", 
    channelId: "チャンネルを特定できるID", 
    info: nil, 
    uid: "ユーザ一意のID", 
    joinSuccess: { (channel, uid, elapsed) in
 
})
```


以上がライブ配信を開始するまでの処理の流れになります。


ライブ配信の開始も参加も非常に簡単に実装することができます。
agoraのサンプルコードもありますので、是非お試しください。

https://docs.agora.io/en/Voice/run_demo_voice_call_ios?platform=iOS

https://docs.agora.io/en/Voice/run_demo_voice_call_ios?platform=Android
 

## 参考

https://ichi.pro/agora-io-no-shiyo-o-kaishisuru-hoho-219048511843115

https://caretllc.biz/2020/12/14/post-781/#outline__3

https://jp.vcube.com/service/agora/developer/implementation/1906.html

https://jp.vcube.com/service/agora