ボイスサロン(Android)

最終更新日:2021-10-12 09:40:10

    デモンストレーション

    ダウンロードしてAppをインストールすると、ボイスサロンの機能をご体験いただけます。これには、ボイスチャット、マイクのオン・オフ、低遅延音声インタラクションなどのボイスチャットシナリオにおけるTRTCの関連機能が含まれています。

    ボイスサロン機能をすばやくアクセスする必要がある場合、当社が提供するAppをもとに直接変更を加えて適応させるか、または当社が提供するTRTCChatSalonコンポーネントでカスタマイズしたUIを実装することができます。

    AppのUIの再利用

    手順1:アプリケーションの新規作成

    1.TRTCコンソールにログインし、【開発支援】>【Demoクイックスタート】を選択します。
    2. アプリケーション名(例:TestChatSalon)を入力し、【作成】をクリックします。
    3. 【ダウンロードしました。次のステップ】をクリックすると、この手順をスキップします。

    注意:

    本機能はTencent CloudのTRTCIMという2つの基本的なPaaSサービスを同時に使用し、TRTCをアクティブにした後、IMサービスを同期的にアクティブにすることができます。IMは付加価値サービスであり、課金ルールの詳細については、Instant Messagingの料金説明をご参照ください。

    手順2:Appソースコードのダウンロード

    クリックしてTUIChatSalonに進み、ソースコードをCloneまたはダウンロードします。

    手順3:Appプロジェクトファイルの設定

    1. 設定変更ページに進み、ダウンロードしたソースコードパッケージに基づき、対応する開発環境を選択します。

    2. Android/Debug/src/main/java/com/tencent/liteav/debug/GenerateTestUserSig.javaのファイルを見つけて開きます。

    3. GenerateTestUserSig.javaファイル内の関連パラメータを設定します。

      • SDKAPPID:デフォルトはプレースホルダー(PLACEHOLDER)。実際のSDKAppIDを設定してください。
      • SECRETKEY:デフォルトはプレースホルダー(PLACEHOLDER)。実際のキー情報を設定してください。
    4. 貼り付け完了後、【貼り付けました。次のステップ】をクリックすれば、作成が完了します。

    5. コンパイル完了後、【コンソール概要に戻る】をクリックすればOKです。

    注意:

    • ここで言及するUserSigの発行方法は、クライアントコードの中でのSECRETKEY設定となりますが、この手法のSECRETKEYは逆コンパイルによって逆クラッキングされやすく、キーがいったん漏洩すると、攻撃者がお客様のTencent Cloudトラフィックを盗用できるようになります。そのためこの手法は、ローカルのAppクイックスタートおよび機能デバッグにのみ適しています
    • UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供します。UserSigが必要なときは、Appから業務サーバーにリクエストを送信し動的にUserSigを取得します。詳細はサーバーでのUserSig新規作成をご参照ください。

    手順4:Appの実行

    Android Studio(バージョン3.5以降)を使用してソースコードTUIChatSalonプロジェクトを開き、【実行】をクリックすれば、このAppのデバッグが開始されます。

    手順5:Appソースコードの修正

    ソースコードのSourceフォルダは、uiとmodelという2つのサブフォルダを含んでいます。uiフォルダにはインターフェースコードが含まれています。以下の表にファイルまたはフォルダおよび対応するUIをリストアップして、二次調整を行いやすくしています。

    ファイルまたはフォルダ 機能の説明
    base UIに使用される基礎となるクラス。
    list ルームページの作成。
    room メインルームページは、管理者とリスナーという2種類のインターフェースがあります。
    widget 汎用ウィジェット。

    体験アプリケーション

    注意:

    体験アプリケーションには、少なくとも2台のデバイスが必要です。

    ユーザーA

    1. 図のように、ユーザー名を入力し(ユーザー名は一意のものとし、他のユーザーと重複しないようにしてください)、ログインします。
    2. 入った後、下図のように、【ルームの作成】をクリックします。
    3. ルームトピックを入力し、【チャット開始】をクリックします。

    ユーザーB

    1. 図のように、ユーザー名を入力し(ユーザー名は一意のものとし、他のユーザーと重複しないようにしてください)、ログインします。
    2. ユーザーAが作成したルーム番号を入力し、【入室する】をクリックします。
    注意:

    ルーム番号はユーザーAのルーム上部に表示されます。

    カスタムUIの実装

    ソースコードのSourceフォルダには、uiとmodelという2つのサブフォルダがあり、modelフォルダには再利用できるオープンソースコンポーネントTRTCChatSalonがあります。TRTCChatSalon.javaファイルでこのコンポーネントが提供するインターフェース関数を確認し、対応するインターフェースを使用してカスタムUIを実装することができます。

    手順1:SDKへの統合

    ボイスサロンコンポーネントSourceは、TRTC SDKとIM SDKに依存し、次の手順で2つのSDKをプロジェクトに統合することができます。

    方法1:Mavenリポジトリを介する依存

    1. dependenciesにTRTCSDKとIMSDKの依存を追加します。
      dependencies {
      complie "com.tencent.liteav:LiteAVSDK_TRTC:latest.release"
      complie 'com.tencent.imsdk:imsdk:latest.release'
      compile 'com.google.code.gson:gson:2.3.1'
      }
      >?2つのSDKの最新バージョン番号は、[TRTC](https://github.com/tencentyun/TRTCSDK)および[IM](https://github.com/tencentyun/TIMSDK)のGitHubトップページで取得することができます。
    2. defaultConfigでAppが使用するCPUアーキテクチャを指定します。
      defaultConfig {
      ndk {
      abiFilters "armeabi-v7a"
      }
      }
    3. 【Sync Now】をクリックし、自動でSDKをダウンロードし、プロジェクトに統合します。

    方法2:ローカルAARを介する依存

    開発環境でのMavenリポジトリへのアクセスが遅い場合は、ZIPパッケージを直接ダウンロードし、統合ドキュメントに従って手動でプロジェクトに統合することができます。

    SDKダウンロードページ統合ガイド
    TRTC SDK DOWNLOAD 統合ドキュメント
    IM SDK DOWNLOAD 統合ドキュメント

    手順2:権限の設定および難読化ルール

    AndroidManifest.xmlにAppの権限を設定します。SDKには次の権限が必要です(6.0以降のAndroidシステムには、動的な読み取りストレージの権限が必要です)。

    <uses-permission android:name="android.permission.INTERNET">
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE">
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE">
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE">
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE">
    <uses-permission android:name="android.permission.RECORD_AUDIO">
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS">
    <uses-permission android:name="android.permission.BLUETOOTH">
    <uses-permission android:name="android.permission.READ_PHONE_STATE">

    proguard-rules.proファイルでは、SDK関連を非難読化リストに追加します。

    -keep class com.tencent.** { *; }

    手順3:TRTCChatSalonコンポーネントのインポート

    次のディレクトリ内のすべてのファイルをプロジェクトにコピーします。

    Source/src/main/java/com/tencent/liteav/trtcchatsalon/model

    手順4:コンポーネントの作成およびログイン

    1. sharedInstanceインターフェースを呼び出すと、TRTCChatSalonコンポーネントのインスタンスオブジェクトを作成できます。
    2. setDelegate関数を呼び出してコンポーネントのイベント通知を登録します。
    3. login関数を呼び出してコンポーネントのログインを完了します。下表を参考にキーパラメータを入力してください。
      パラメータ名作用
      sdkAppId TRTCコンソール でSDKAppIDを表示できます。
      userId 現在のユーザーID。文字列タイプでは、英語のアルファベット(a-zとA-Z)、数字(0-9)、ハイフン(-)とアンダーライン(_)のみ使用できます。
      userSig Tencent Cloudによって設計されたセキュリティ保護署名。取得方法については、UserSigの計算方法をご参照ください。
      callback ログインのコールバック。成功時にcodeは0になります。
      TRTCChatSalon mTRTCChatSalon = TRTCChatSalon.sharedInstance(this);
      mTRTCChatSalon.setDelegate(this);
      mTRTCChatSalon.login(SDKAPPID, userId, userSig, new TRTCChatSalonCallback.ActionCallback() {
      @Override
      public void onCallback(int code, String msg) {
      if (code == 0)
      {
      //ログイン成功
      }
      }
      });

    手順5:管理者側での配信開始

    1. 管理者は、手順4でログイン後、setSelfProfileを呼び出して自身のニックネームおよびプロフィール画像を設定することができます。
    2. 管理者は、createRoomを呼び出して新しいボイスサロンを作成します。この時、ルームID、マイク・オンにすることの管理者の確認の要否、ルームタイプなどルームの属性情報を渡します。
    3. 管理者は、メンバーが参加したonAnchorEnterSeatというイベント通知を受信します。この時、マイク集音は自動的に開始されます。

    // 1.管理者は、ニックネームおよびプロフィール画像を設定します
    mTRTCChatSalon.setSelfProfile("my_name", "my_face_url", null);

    // 2.管理者は、createRoomを呼び出してルームを作成します
    final TRTCChatSalonDef.RoomParam roomParam = new TRTCChatSalonDef.RoomParam();
    roomParam.roomName = 「ルーム名」;
    roomParam.needRequest = true; // マイク・オンの管理者による確認の要否
    roomParam.coverUrl = 「ルームカバー図のURL」;
    mTRTCChatSalon.createRoom(mRoomId, roomParam, new TRTCChatSalonCallback.ActionCallback() {
    @Override
    public void onCallback(int code, String msg) {
    if (code == 0)
    {
    // 3.座席を占有します
    mTRTCChatSalon.enterSeat(new TRTCChatSalonCallback.ActionCallback() {
    @Override
    public void onCallback(int code, String msg) {
    if (code == 0)
    {
    }
    }
    });
    }
    }
    });

    // 4.席の占有成功後、onAnchorEnterSeatイベント通知を受信します
    @Override
    public void onAnchorEnterSeat(TRTCChatSalonDef.UserInfo userInfo) {
    }

    手順6:リスナー側の視聴

    1. リスナー側は、手順4でログイン後、setSelfProfileを呼び出して自身のニックネームおよびプロフィール画像を設定することができます。
    2. リスナー側は、業務バックエンドから最新のボイスサロンのルームリストを取得します。
      説明:

      Appのボイスサロンリストは、デモンストレーション用のためだけのものです。ボイスサロンリストのビジネスロジックは様々です。Tencent Cloudでは現在ボイスサロンリストの管理サービスを提供していません。ご自身でボイスサロンリストを管理してください。

    3. リスナー側はgetRoomInfoListを呼び出して、ルームの詳細情報を取得します。この情報は、管理者側がcreateRoomを呼び出してボイスサロンを作成するときに設定する簡単な説明情報です。
      注意:

      ボイスサロンリストに十分に包括的な情報がある場合は、getRoomInfoListの呼び出しに関する手順をスキップできます。

    4. リスナーはボイスサロンの1つを選択し、enterRoomを呼び出してルームナンバーを渡すと、そのルームに参加できます。
    5. 入室後、コンポーネントのonRoomInfoChange ルーム属性変更イベント通知を受信します。この時、ルーム属性を記録し、それに応じた修正を行うことができます。例:UIに表示するルーム名、発言者にする際の管理者への同意リクエストの要否の記録など。
    6. 入室後にマイクリストにキャスターが参加したonAnchorEnterSeatというイベント通知も受信します。

    // 1.リスナーは、ニックネームおよびプロフィール画像を設定します
    mTRTCChatSalon.setSelfProfile("my_name", "my_face_url", null);

    // 2.業務バックエンドから取得したルームリストをroomListと仮定します
    List<integer> roomList = GetRoomList();

    // 3.getRoomInfoListを呼び出すことによって、ルームの詳細情報を取得します
    mTRTCChatSalon.getRoomInfoList(roomList, new TRTCChatSalonCallback.RoomInfoCallback() {

    @Override
    public void onCallback(int code, String msg, List<trtcchatsalondef.roominfo> list) {
    if (code == 0)
    {
    // この時、自分のUIルームリストを更新することができます
    }
    }

    });

    // 4.roomIdを渡してルームに参加します
    mTRTCChatSalon.enterRoom(roomId, new TRTCChatSalonCallback.ActionCallback() {
    @Override
    public void onCallback(int code, String msg) {
    if (code == 0)
    {
    //入室に成功
    }
    }
    });

    // 5.入室に成功後、onRoomInfoChangeイベント通知を受信します
    @Override
    public void onRoomInfoChange(TRTCChatSalonDef.RoomInfo roomInfo) {
    mNeedRequest = roomInfo.needRequest;
    mRoomName = roomInfo.roomName;
    // UIはタイトルなどを表示することができます
    }

    // 6. onAnchorEnterSeatイベント通知を受信します
    @Override
    public void onAnchorEnterSeat(TRTCChatSalonDef.UserInfo userInfo) {
    }

    手順7:マイクのオン・オフ

    1. pickSeatは、リスナーのuserIdを渡し、発言できるように視聴者を招待できます。ルーム内の全メンバーはonAnchorEnterSeatというイベント通知を受信します。
    2. kickSeatで該当するユーザーのuserIdを渡すと、その人をキックアウトしてマイク・オフにできます。ルーム内の全メンバーがonAnchorLeaveSeatというイベント通知を受信します。


    マイク操作後のイベント通知の順番は次のとおりです。callback > onAnchorEnterSeatなど独立したイベント。

    // 1.管理者が、視聴者を発言できるように招待できます
    mTRTCChatSalon.pickSeat("123", new TRTCChatSalonCallback.ActionCallback() {
    @Override
    public void onCallback(int code, String msg) {
    // 2. callbackコールバックを受信します
    if (code == 0) {
    }
    }
    });

    // 3.リスナーがキャスターとしてマイク通知に進むと、リスナーが実際にマイク・オンに成功したかどうかを判断できます
    public void onAnchorEnterSeat(TRTCChatSalonDef.UserInfo user) {
    }

    手順8:招待シグナリングの使用

    Appが次の操作の業務フローを実施するために、相手の同意を必要とする場合、招待シグナリングによって対応するサポートを提供することができます。

    1. リスナー側がsendInvitationを呼び出し、管理者のuserIdおよび業務のカスタムコマンドワードなどを渡します。この時、関数が1つのinviteIdを返しますので、このinviteIdを記録します。
    2. 管理者側は、onReceiveNewInvitationというイベント通知を受信します。この時UIでウィンドウをポップアップさせ、管理者に同意の有無をたずねることができます。
    3. 管理者が同意を選択後、acceptInvitationを呼び出してinviteIdを渡します。
    4. リスナー側は、onInviteeAcceptedというイベント通知を受信し、enterSeatを呼び出してマイク・オンにします。

    // リスナー側の視点
    // 1.sendInvitationを呼び出し、マイク・オンをリクエストします
    String inviteId = mTRTCChatSalon.sendInvitation("ENTER_SEAT", ownerUserId, "123", null);

    // 2.招待のリクエスト同意を受信し、正式にマイク・オンになります
    @Override
    public void onInviteeAccepted(String id, String invitee) {
    if(id.equals(inviteId))
    {
    mTRTCChatSalon.enterSeat(null);
    }
    }

    // 管理者側の視点
    // 1.管理者がリクエストを受信します
    @Override
    public void onReceiveNewInvitation(final String id, String inviter, String cmd, final String content) {
    if (cmd.equals("ENTER_SEAT"))
    {
    // 2.管理者がリスナーのリクエストに同意します
    mTRTCChatSalon.acceptInvitation(id, null);
    }
    }

    手順9:文字チャットおよび弾幕コメントの実装

    • sendRoomTextMsgによって通常のテキストメッセージを送信できるようになり、このルーム内のすべてのキャスターおよびリスナーがonRecvRoomTextMsgのコールバックを受信することができます。
      IMバックエンドは、デフォルトのセンシティブワードフィルタルールを備えており、センシティブワードと認識されたテキストメッセージはクラウドに転送されることはありません。
      // 送信側:テキストメッセージの送信
      mTRTCChatSalon.sendRoomTextMsg("Hello Word!", null);
      // 受信側:テキストメッセージの監視
      mTRTCChatSalon.setDelegate(new TRTCChatSalonDelegate() {
      @Override
      public void onRecvRoomTextMsg(String message, TRTCChatSalonDef.UserInfo userInfo) {
      Log.d(TAG、 + userInfo.userName + 「からのメッセージを受信:」 + message);
      }
      });
    • sendRoomCustomMsgによって、カスタム(シグナリング)メッセージを送信できます。当該ルーム内のすべてのキャスターとリスナーがonRecvRoomCustomMsgコールバックを受信できます。
      カスタムメッセージは、カスタムシグナリングの送信によく用いられます。例えば、「いいね」情報の発信やブロードキャストに使用します。
      // 送信側:カスタマイズCmdによって弾幕と「いいね」情報を区別することができます
      // eg:「CMD_DANMU」は弾幕コメントを表し、「CMD_LIKE」は「いいね」情報を表します
      mTRTCChatSalon.sendRoomCustomMsg("CMD_DANMU", "Hello world", null);
      mTRTCChatSalon.sendRoomCustomMsg("CMD_LIKE", "", null);
      // 受信側:カスタムメッセージの監視
      mTRTCChatSalon.setDelegate(new TRTCChatSalonDelegate() {
      @Override
      public void onRecvRoomCustomMsg(String cmd, String message, TRTCChatSalonDef.UserInfo userInfo) {
      if ("CMD_DANMU".equals(cmd))
      {
      // 弾幕コメントの受信
      Log.d(TAG, "が" + userInfo.userName + "から受信した弾幕コメント:" + message);
      } else if ("CMD_LIKE".equals(cmd)) {
      // 「いいね」情報の受信
      Log.d(TAG、 userInfo.userName + 「いいねを付けました!」);
      }
      }
      });