LoginSignup
1
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-09-19

agora.io SDKを利用したマイクON/OFFの実装例

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

Githubに公開しています

実装イメージ

image4.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

インスタンスの生成

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

サービスへの接続

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

Channelへの入室

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

メッセージの送信

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

メッセージの受信

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するサンプルです

インスタンスの生成

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

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

mRtcEngine.setChannelProfile(Constants.CHANNEL_PROFILE_COMMUNICATION);

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

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

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

Channelへの入室

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

マイクのON・OFF

mRtcEngine.muteLocalAudioStream(true);

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

動作確認

動作を確認してみます。

1.初期表示

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

(ホスト側、オーディエンス側)
image7.png

2.ログイン

2-1. ホスト側

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

(ホスト側)
image8.png

2-2. オーディエンス側

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

(オーディエンス側)
image2.png

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

3.マイクをリクエスト

3-1.オーディエンス側

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

(オーディエンス側)
image2.png

3-2.ホスト側

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

(ホスト側)

4.マイクを許可

4-1.ホスト側

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

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

(ホスト側)
image6.png

4-2.オーディエンス側

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

(オーディエンス側)
image3.png

5.退室とログアウト

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

最後に

agora.ioに関するお問い合わせはこちらから
スクリーンショット 0001-08-15 13.41.56.png

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2