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

最終更新日:2021-10-12 09:48:01

    デモンストレーション

    ダウンロードから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. TUIKaraoke/Debug/GenerateTestUserSig.swiftのファイルを見つけて開きます。

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

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

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

    注意:

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

    手順4:Appの実行

    Xcode(11.0およびそれ以降のバージョン)を使用してソースコード TUIKaraoke/TUIKaraokeApp.xcworkspaceプロジェクトを開き、【実行】をクリックすれば、このAppのデバッグが開始されます。

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

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

    ファイルまたはフォルダ 機能の説明
    TRTCKaraokeEnteryControl.swift このファイルには、すべてのViewController初期化メソッドが含まれています。このインスタンスを介してViewControllerオブジェクトをすばやく取得することができます。
    TRTCCreateKaraokeViewController KTVページのロジックを作成します。
    TRTCKaraokeViewController メインルームページは、管理者とリスナーという2種類のインターフェースがあります。

    TRTC'XXXX'ViewControllerフォルダには、ViewControllerRootViewおよびViewModelが含まれ、各ファイルの役割は下表に示すとおりです。

    ファイル 機能説明
    ViewController.swift ページコントローラ。画面のルーティング作業、RootViewおよびViewModelのバインディング作業を担当します。
    RootView.swift ビュー。すべてのビューのレイアウト。
    ViewModel.swift ビューコントローラ。ビューのインタラクションに応答し、ビューの応答ステータスを返す作業を担当します。

    アプリケーション体験

    注意:

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

    ユーザーA

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

    ユーザーB

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

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

    カスタムUIの実装

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

    手順1:SDKへの統合

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

    • 方法1:cocoapodsリポジトリを介する依存
      pod 'TXIMSDK_iOS'
      pod 'TXLiteAVSDK_TRTC'
    説明:

    2つのSDK製品の最新バージョン番号は、TRTCおよびIMのGitHubトップページで取得することができます。

    • 方法2:ローカルを介する依存
      開発環境でのcocoapodsリポジトリへのアクセスが遅い場合は、ZIPパッケージを直接ダウンロードし、統合ドキュメントに従って手動でプロジェクトに統合することができます。
      SDKダウンロードページ統合ガイド
      TRTC SDK DOWNLOAD 統合ドキュメント
      IM SDK DOWNLOAD 統合ドキュメント

    手順2:権限の設定

    info.plistファイルにおいて、Privacy > Microphone Usage Descriptionを追加して、マイクの権限を申請する必要があります。

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

    cocoapodsを介してコンポーネントをインポートします。具体的な操作は次のとおりです。

    1. プロジェクトディレクトリ下のSourceResourcesTXAppBasicフォルダ、TUIKaraoke.podspecファイルをプロジェクトディレクトリ下にコピーします。
    2. Podfileファイル内に以下の依存関係を追加します。その後、pod installコマンドを実行すると、インポートが完了します。
      pod 'TXAppBasic', :path => "TXAppBasic/"
      pod 'TXLiteAVSDK_TRTC'
      pod 'TUIKaraoke', :path => "./", :subspecs => ["TRTC"]

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

    1. TRTCKaraokeRoomのsharedInstanceクラスメソッドを呼び出すと、TRTCKaraokeRoomプロトコルに準拠したインスタンスオブジェクトを作成することができます。また、sharedクラスメソッドを呼び出して、TRTCKaraokeRoomインスタンスオブジェクトを取得し、直接使用することもできます。両者は、TRTCKaraokeRoomのインターフェースでの使用に違いはありません。
    2. setDelegate関数を呼び出して、コンポーネントのイベントコールバック通知を登録します。
    3. login関数を呼び出してコンポーネントのログインを完了します。下表を参考にキーパラメータを入力してください。
      パラメータ名機能
      sdkAppId TRTCコンソール で SDKAppIDを表示できます。
      userId 現在のユーザーID、文字列タイプでは、英語のアルファベット(a-z と A-Z)、数字(0-9)、ハイフン(-)とアンダーライン(_)のみ使用できます。
      userSig Tencent Cloudによって設計されたセキュリティ保護署名。取得方法については、UserSigの計算方法をご参照ください。
      callback ログインのコールバック。成功時にcodeは0になります。
      // Swift例
      // コード内でビジネスロジックを担当するクラス
      class YourController {
      // 属性を計算してシングルトンオブジェクトを取得
      var karaokeRoom: TRTCKaraokeRoom {
      return TRTCKaraokeRoom.shared()
      }

      // その他のコードロジック
      ......
      }
      // KTVプロキシを設定
      self.karaokeRoom.setDelegate(delegate: karaokeRoomDelegate)

      // 呼び出し方法は以下のとおりです。循環参照を防ぐために、クロージャでweak selfを使用することをお勧めします(以下のサンプルコードでは、weak self例を省略)
      self.karaokeRoom.login(sdkAppId: sdkAppID, userId: userId, userSig: userSig) { [weak self] (code, message) in
      guard let `self` = self else { return }
      // コールバックビジネスロジック
      }

    手順5:管理者によるルームの作成

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

    サンプルコード:

    // 1.管理者は、ニックネームおよびプロフィール画像を設定します
    self.karaokeRoom.setSelfProfile(userName: userName, avatarUrl: avatarURL) { (code, message) in
    // 結果のコールバック
    }

    // 2.管理者側でルームを作成します
    let param = RoomParam.init()
    Param.roomName = ルーム名
    param.needRequest = true // リスナーのマイク・オンに対する管理者の同意の要否
    param.coverUrl = カバーURL
    param.seatCount = 8 // ルームの座席数。ここは計8 席あります
    param.seatInfoList = []

    for _ in 0..< param.seatCount {
    let seatInfo = SeatInfo.init()
    param.seatInfoList.append(seatInfo)
    }

    self.karaokeRoom.createRoom(roomID: yourRoomID, roomParam: param) { (code, message) in
    guard code == 0 else { reutrn }
    // 作成に成功

    // 3.マイク・オン
    self.karaokeRoom.enterSeat(seatIndex: 0) { [weak self] (code, message) in
    guard let `self` = self else { return }
    if code == 0 {
    // 管理者による席の占有成功
    } else {
    // 管理者による席の占有失敗
    }
    }
    }

    // 4.マイク・オンに成功した後、onSeatListChangeイベント通知を受信します
    func onSeatListChange(seatInfoList: [SeatInfo]) {
    // マイクリストの更新
    }

    // 5. onAnchorEnterSeatイベント通知を受信します
    func onAnchorEnterSeat(index: Int, user: 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.リスナーは、ニックネームおよびプロフィール画像を設定します
    self.karaokeRoom.setSelfProfile(userName: userName, avatarUrl: avatarURL) { (code, message) in
    // 結果のコールバック
    }

    // 2.業務バックエンドから取得したルームリストをroomListと仮定します
    let roomList: [Int] = getRoomIDList() // ルームIDリストを取得する関数

    // 3.getRoomInfoListを呼び出すことによって、ルームの詳細情報を取得します
    self.karaokeRoom.getRoomInfoList(roomIdList: roomIdsInt) { (code, message, roomInfos: [RoomInfo]) in
    //結果の取得。この時、UIの更新が可能
    }

    // 4.KTVを選択後、roomIdを渡して入室します
    self.karaokeRoom.enterRoom(roomID: roomInfo.roomID) { (code, message) in
    // 入室結果コールバック
    if code == 0 {
    // 入室に成功
    }
    }

    // 5.入室に成功後、onRoomInfoChangeイベント通知を受信します
    func onRoomInfoChange(roomInfo: RoomInfo) {
    // ルーム名などの情報の更新可
    }

    // 6.入室に成功後、onSeatListChangeイベント通知を受信します
    func onSeatListChange(seatInfoList: [SeatInfo]) {
    // マイクリストを更新
    }

    // 7. onAnchorEnterSeatイベント通知を受信します
    func onAnchorEnterSeat(index: Int, user: 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号マイクの使用をリクエストします
    let inviteId = self.karaokeRoom.sendInvitation(cmd: "ENTER_SEAT", userId: ownerUserId, content: "1") { (code, message) in
    // 送信結果のコールバック
    }
    // 2.招待のリクエスト同意を受信し、正式にマイク・オンになります
    func onInviteeAccepted(identifier: String, invitee: String) {
    if identifier == selfID {
    self.karaokeRoom.enterSeat(seatIndex: ) { (code, message) in
    // マイク・オン結果のコールバック
    }
    }
    }

    // 管理者側の視点
    // 1.管理者がリクエストを受信します
    func onReceiveNewInvitation(identifier: String, inviter: String, cmd: String, content: String) {
    if cmd == "ENTER_SEAT" {
    // 2.管理者がリスナーのリクエストに同意します
    self.karaokeRoom.acceptInvitation(identifier: identifier, callback: nil)
    }
    }

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

    • sendRoomTextMsgによって通常のテキストメッセージを送信できるようになり、このルーム内のすべてのキャスターおよびリスナーがonRecvRoomTextMsgのコールバックを受信することができます。
      IMバックエンドは、デフォルトのセンシティブワードフィルタルールを備えており、センシティブワードと認識されたテキストメッセージはクラウドに転送されることはありません。
      // 送信側:テキストメッセージの送信
      self.karaokeRoom.sendRoomTextMsg(message: message) { (code, message) in


      }
      // 受信側:テキストメッセージの監視
      func onRecvRoomTextMsg(message: String, userInfo: UserInfo) {
      // 受信したmessage情報の処理方法
      }
    • sendRoomCustomMsgによって、カスタム(シグナリング)メッセージを送信できます。当該ルーム内のすべてのキャスターとリスナーがonRecvRoomCustomMsgコールバックを受信できます。
      カスタムメッセージは、カスタムシグナリングの送信によく用いられます。例えば、「いいね」情報の発信やブロードキャストに使用します。
      // 例:送信側:カスタマイズCmdによって、弾幕と「いいね」情報を区分することができます
      // eg:「CMD_DANMU」は弾幕コメントを表し、「CMD_LIKE」は「いいね」情報を表します
      self.karaokeRoom.sendRoomCustomMsg(cmd: "CMD_DANMU", message: "hello world", callback: nil)
      self.karaokeRoom.sendRoomCustomMsg(cmd: "CMD_LIKE", message: "", callback: nil)
      // 受信側:カスタムメッセージの監視
      func onRecvRoomCustomMsg(cmd: String, message: String, userInfo: UserInfo) {
      if cmd == "CMD_DANMU" {
      // 弾幕コメントの受信
      }
      if cmd == "CMD_LIKE" {
      // 「いいね」情報の受信
      }
      }