オンラインカラオケ_KTV(Android)

最終更新日:2021-10-12 12:23:29

    デモンストレーション

    ダウンロードからAppをインストールして、低遅延カラオケ、マイク管理、ギフトの送受信、文字チャットなどのKTVのユースケースにおけるTRTCの関連機能を含む、KTVの機能を体験できます。

    管理者によるマイク操作 リスナーによるマイク操作

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

    AppのUIの再利用

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

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

    注意:

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

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

    クリックしてTUIKaraokeに進み、ソースコードを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以降)を使用してソースコードTUIKaraokeプロジェクトを開き、【実行】をクリックすれば、このAppのデバッグが開始されます。

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

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

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

    体験アプリケーション

    注意:

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

    ユーザーA

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

    ユーザーB

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

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

    カスタムUIの実装

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

    手順1:SDKへの統合

    KTVコンポーネントTRTCKaraokeRoomは、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およびIMのGitHubトップページで取得することができます。

    1. defaultConfigでAppが使用するCPUアーキテクチャを指定します。
      defaultConfig {
      ndk {
      abiFilters "armeabi-v7a"
      }
      }
    2. 【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:TRTCKaraokeコンポーネントのインポート

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

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

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

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

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

    1. 管理者は、手順4でログイン後、setSelfProfileを呼び出して自身のニックネームおよびプロフィール画像を設定することができます。
    2. 管理者は、createRoomを呼び出して新しいKTVルームを作成します。この時、ルームID、マイク・オンにすることの管理者の確認の要否、ルームタイプなどルームの属性情報を渡します。
    3. 管理者はルームの作成に成功した後、enterSeatを呼び出して参加することができます。
    4. 管理者は、コンポーネントのonSeatListChangeマイクリスト変更イベント通知を受信します。この時、マイクリストの変更をUI上に更新することができます。
    5. 管理者は、マイクリストのメンバーが参加したonAnchorEnterSeatというイベント通知も受信します。この時、マイク集音は自動的に開始されます。
    // 1.管理者は、ニックネームおよびプロフィール画像を設定します
    mTRTCKaraokeRoom.setSelfProfile("my_name", "my_face_url", null);

    // 2.管理者は、createRoomを呼び出してルームを作成します
    final TRTCKaraokeRoomDef.RoomParam roomParam = new TRTCKaraokeRoomDef.RoomParam();
    roomParam.roomName = 「ルーム名」;
    roomParam.needRequest = false; // マイク・オンの管理者による確認の要否
    roomParam.seatCount = 7; // ルームの座席数。ここは計7席あり、管理者が1席を占有した後、残り6席はリスナーが占有します
    roomParam.coverUrl = 「ルームカバー図のURL」;
    mTRTCKaraokeRoom.createRoom(mRoomId, roomParam, new TRTCKaraokeRoomCallback.ActionCallback() {
    @Override
    public void onCallback(int code, String msg) {
    if (code == 0)
    {
    //3. 0号の席を占有
    mTRTCKaraokeRoom.enterSeat(0, new TRTCKaraokeRoomCallback.ActionCallback() {
    @Override
    public void onCallback(int code, String msg) {
    if (code == 0)
    {
    }
    }
    });
    }
    }
    });

    // 4.席の占有に成功した後、onSeatListChangeイベント通知を受信します
    @Override
    public void onSeatListChange(final List<trtckaraokeroomdef.seatinfo> seatInfoList) {
    // マイクリストの表示
    }

    // 5. onAnchorEnterSeatイベント通知を受信
    @Override
    public void onAnchorEnterSeat(TRTCKaraokeRoomDef.UserInfo userInfo) {
    }

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

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

      App内のKTVルームリストはデモに使用するためだけのものです。KTVルームリストの業務ロジックは千差万別です。現在、Tencent CloudはKTVルームリスト管理のサービスを提供していません。各自でご自分のKTVルームリストを管理してください。

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

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

    4. リスナーは1つのKTVルームを選択し、enterRoomを呼び出してルームナンバーを渡すと、そのルームに参加できます。
    5. 入室後、コンポーネントのonRoomInfoChange ルーム属性変更イベント通知を受信します。この時、ルーム属性を記録し、それに応じた修正を行うことができます。例:UIに表示するルーム名、発言者にする際の管理者への同意リクエストの要否の記録など。
    6. 入室後は、コンポーネントのonSeatListChangeマイクリスト変更イベント通知を受信します。この時、マイクリストの変更をUI上に更新することができます。
    7. 入室後、マイクリストにキャスターが参加した onAnchorEnterSeatというイベント通知も受信します。
    // 1.リスナーは、ニックネームおよびプロフィール画像を設定します
    mTRTCKaraokeRoom.setSelfProfile("my_name", "my_face_url", null);

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

    // 3.getRoomInfoListを呼び出すことによって、ルームの詳細情報を取得します
    mTRTCKaraokeRoom.getRoomInfoList(roomList, new TRTCKaraokeRoomCallback.RoomInfoCallback() {
    @Override
    public void onCallback(int code, String msg, List<trtckaraokeroomdef.roominfo> list) {
    if (code == 0)
    {
    // この時、自分のUIルームリストを更新することができます
    }
    }
    });

    // 4.KTVを選択後、roomIdを渡して入室します
    mTRTCKaraokeRoom.enterRoom(roomId, new TRTCKaraokeRoomCallback.ActionCallback() {
    @Override
    public void onCallback(int code, String msg) {
    if (code == 0)
    {
    //入室に成功
    }
    }
    });

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

    // 6.入室に成功後、onSeatListChangeイベント通知を受信します
    @Override
    public void onSeatListChange(final List<trtckaraokeroomdef.seatinfo> seatInfoList) {
    // マイクリストの表示
    }

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

    手順7:マイク管理

    1. pickSeatは、対応するマイクおよびリスナーのuserIdを渡し、発言できるように視聴者を招待できます。ルーム内の全メンバーはonSeatListChangeおよびonAnchorEnterSeatというイベント通知を受信します。
    2. kickSeatは、対応するマイクを渡した後、キックアウトしてマイク・オフにすることができます。ルーム内の全メンバーはonSeatListChangeおよびonAnchorLeaveSeatというイベント通知を受信します。
    3. muteSeatは、対応するマイクを渡した後、ミュート/ミュート解除をすることができます。ルーム内の全参加者はonSeatListChangeおよびonSeatMuteというイベント通知を受信します。
      4.closeSeatは、対応するマイクを送信後、任意のマイクのクローズ/解除をすることができます。クローズ後は、リスナー側はこれ以上マイクを使用することはできません。ルーム内の全参加者はonSeatListChangeおよびonSeatCloseというイベント通知を受信します。

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

    マイク管理では、リスナーがマイク・オン/オフにする場合や、管理者が視聴者を発言できるように招待する場合は、相手の同意を必要とせずに直接操作することができます。
    Appが次の操作の業務フローを実施するために、相手の同意を必要とする場合、招待シグナリングによって対応するサポートを提供することができます。

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

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

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

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

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

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