agora.io Voice、Real-time Messaging SDKを利用した実装例（オンラインカラオケ）

#agora.io SDKを利用したマイクON/OFFの実装例
本サンプルは、agora.ioのVoice SDK、Real-time Messaging SDKで実装しています。
概要は、マイクコントロール役のホスト側、マイクをリクエストするオーディエンス側に分かれ、
リクエストごとにマイクのON/OFFをコントロールするサンプルです。
(オンラインカラオケ向け)

[Githubに公開しています](https://github.com/fu-jimoto/AgoraIO-OnlineKaraoke)

##実装イメージ
![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/7e3d2381-b8e9-50ca-ec8e-d51eeb5fa691.png)
マイクのリクエスト時メッセージ処理は、agora.io Real-time Messaging SDKで実装します。
マイクのON/OFFは、agora.io VoiceSDKで実装します。

##機能一覧
[ホスト側/オーディエンス側共通]
・ログインとログアウト
・チャネルへの入室と退室
・ホストとオーディエンスの選択
・音質の設定
[ホスト側]
・オーディエンス拠点からのマイクリクエストの取得
・オーディエンス拠点へのマイク許可
・自拠点（ホスト）のマイクON/OFF
[オーディエンス側]
・ホスト側へのマイクリクエスト送信
・ホスト側から許可された場合のマイクON/OFF

##開発環境
・Android Studio（Java）
・agora.io VoiceSDK
・Real-time Messaging SDK

##RTM SDKの実装例（メッセージ処理）

agora.io Real-time Messaging SDKでログインし、メッセージをやりとり(マイクのリクエスト時メッセージ処理)するサンプルです。


本サンプルでのメッセージのやりとり(マイクのリクエスト時メッセージ処理)は、下図のようなイメージです。
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/eb5dbb51-0e9d-0894-05a3-f7e316c3d8b5.png)

###インスタンスの生成

```java
mRtmClient = RtmClient.createInstance(getBaseContext(), getString(R.string.agora_app_id), new RtmClientListener(){
```

###サービスへの接続

```java
mRtmClient.login(null, login_name + mUid, new ResultCallback<Void>() {
```

###Channelへの入室

```java
mRtmChannel = mRtmClient.createChannel(channel, new MyChannelListener());
mRtmChannel.join(new ResultCallback<Void>() {
```

###メッセージの送信

```java
RtmMessage message = mRtmClient.createMessage();
message.setText(”Please unmute”);
mRtmChannel.sendMessage(message, new ResultCallback<Void>() {
```

###メッセージの受信

```java
class MyChannelListener implements RtmChannelListener {
   @Override
   public void onMessageReceived(final RtmMessage message, final RtmChannelMember fromMember) {

       String account = fromMember.getUserId();
       String msg = message.getText();
       //Please unmute//
       if (getString(R.string.msg_unmute).equals(arrMsg[0])) {
           //リクエスト文字を画面に表示
           txReq =  (TextView) findViewById(R.id.textReq3);
           txReq.setText(getString(R.string.msg_unmute));
       }

       //You can unmute
       if (getString(R.string.msg_can_unmute).equals(arrMsg[0])) {
           //マイクをON
           doVoiceLocalMute(false);
       }
   }
}
```

※メッセージが受信されるとonMessageReceivedがコールバックされます。
fromMemberには送信元のメンバー情報、messageには受信メッセージが入っています。

※メッセージの内容を受けて処理を切り分けます。


##Voice SDKの実装例（音質・マイクON/OFF）
agora.io voice SDKでログインし、音質設定、マイクをON/OFFするサンプルです

###インスタンスの生成

```java
mRtcEngine = RtcEngine.create(getBaseContext(), appId, mRtcEventHandler);
```

###チャネルプロファイルの設定

```java
mRtcEngine.setChannelProfile(Constants.CHANNEL_PROFILE_COMMUNICATION);
```

###オーディオプロファイルの設定

```java
mRtcEngine.setAudioProfile(Constants.AUDIO_PROFILE_MUSIC_STANDARD,Constants.AUDIO_SCENARIO_SHOWROOM);
```

※第1引数にprofile、第2引数にscenarioを選択します。

###Channelへの入室

```java
mRtcEngine.joinChannel(null, channel, null, HOST_UID);
```

###マイクのON・OFF

```java
mRtcEngine.muteLocalAudioStream(true);
```

※マイクOFFの時はtrue、マイクONの時はfalseを指定します。 


##動作確認
動作を確認してみます。
###１．初期表示
PCとAndroidデバイスをUSB接続し、AndroidStudioから実行ボタンをクリックし開始します。ビルドが完了すると、Androidデバイス上に画面が表示されます。

（ホスト側、オーディエンス側）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/44d5750c-b3c1-bfdf-668e-d3107ef5058e.png" width=50% alt="image7.png">

###２．ログイン

####2-1. ホスト側
1.（ホスト側）「host」チェックONの状態で「LOGIN」ボタンをクリックします。
2.（ホスト側）「オーディオプロファイル」は、プロファイル：”MUSIC_STANDARD”、シナリオ：”SHORWROOM”をそれぞれ選択します。
3.（ホスト側）「JOIN」ボタンをクリックします。

（ホスト側）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/c02a7be3-6c05-c766-93d4-3346b2bef4b6.png" width=50% alt="image8.png">

####2-2. オーディエンス側
1.（オーディエンス側）「host」チェックOFFにした状態にして、ホスト側と同じ手順で入室します。
※同様に2拠点のオーディエンスが入室しています。

（オーディエンス側）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/778541af-30b9-9f32-78b2-8641c3c358bd.png" width=50% alt="image2.png">

※この時点ではホスト側のみマイクON、オーディエンス側はマイクOFFになっています。

###３．マイクをリクエスト

####3-1.オーディエンス側
1. (オーディエンス側)マイクをリクエストするため、「SENDMESSAGE(UNMUTE)」ボタンをクリックします。

（オーディエンス側）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/8ba6f60c-e919-ecfa-8d22-a9ba4da7117e.png" width=50% alt="image2.png">

####3-2.ホスト側
1.(ホスト側)オーディエンス側からのマイクリクエストを受け取ります。
ホスト側に”Please unmute”が表示されてます。

（ホスト側）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/78bce208-05a0-85fb-839f-76b5cbbf36eb.png" width=50%>

###４．マイクを許可

####4-1.ホスト側
1. (ホスト側)オーディエンス側のマイクを許可するため、「UNMUTE」ボタンをクリックします。
2. (ホスト側)オーディエンス側からの完了メッセージ（unMuted）が届き、”unMuted”が表示されます。
※この時点ではホスト側、オーディエンス側（58841）の2拠点がマイクONになります。

3. (ホスト側)必要に応じてホストは自分のマイクをOFFにします。
※オーディエンス側（58841）のみがマイクONになります。

（ホスト側）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/bdf20ed9-a11e-9cc6-16a8-72db92100728.png" width=50% alt="image6.png">

####4-2.オーディエンス側
1. (オーディエンス側)ホスト側から許可メッセージ（You can unmute）が届き、自拠点のマイクをONにします。

（オーディエンス側）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/cd0f8116-909c-6041-efe2-c85566353abf.png" width=50% alt="image3.png">

###５．退室とログアウト
（ホスト側、オーディエンス側）「LEAVE」ボタンをクリックし退室します。（同時にログアウトもされます）


#最後に
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=4d643412496ce814bc37)
[<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=4d643412496ce814bc37)