tencent cloud

デモンストレーション

ダウンロードからAppをインストールして、デュエット低遅延コーラス、ギフトの送受信、文字チャットなどのChorusシーンにおけるTRTCの関連機能を含む、Chorusの機能を体験できます。

管理者のマイク操作	リスナーのマイク操作

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

AppのUIの再利用

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

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

説明：

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

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

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

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

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

2. TUIChorus/Debug/GenerateTestUserSig.swiftファイルを見つけて開きます。

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

   • SDKAPPID：デフォルトは0。実際のSDKAppIDを設定してください。
   • SECRETKEY：デフォルトは空文字列。実際のキー情報を設定してください。
   

4. 貼り付け完了後、貼り付けました。次のステップをクリックすれば、作成が完了します。

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

注意：

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

手順4：Appの実行

Xcode（11.0およびそれ以降のバージョン）を使用してソースコードプロセスTUIChorus/TUIChorusApp.xcworkspaceを開き、実行をクリックすれば、このAppのデバッグが開始されます。

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

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

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

体験アプリケーション

注意：

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

ユーザーA

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

ユーザーB

1. ユーザー名を入力し（ユーザー名は一意のものとし、他のユーザーと重複しないようにしてください）、ログインします。
2. ユーザーAが作成したルームナンバーを入力し、入室するをクリックします。
   

注意：

ルームナンバーはユーザーAのルーム上部に表示されます。

UIカスタマイズの実装

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

手順1：SDKの統合

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

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

  >?2つのSDK製品の最新バージョン番号は、[TRTC](https://github.com/tencentyun/TRTCSDK)および[IM](https://github.com/tencentyun/TIMSDK)のGitHubトップページで取得することができます。
• 方法2：ローカルを介する依存
  開発環境でのcocoapodsリポジトリへのアクセスが遅い場合は、ZIPパッケージを直接ダウンロードし、統合ドキュメントに従って手動でプロジェクトに統合することができます。

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

手順2：権限の設定

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

手順3：TUIChorusコンポーネントのインポート

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

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

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

1. TRTCChorusRoomのsharedInstanceクラスメソッドを呼び出すと、TRTCChorusRoomプロトコルに準拠したインスタンスオブジェクトを作成することができます。また、sharedクラスメソッドを呼び出して、TRTCChorusRoomインスタンスオブジェクトを取得し、直接使用することもできます。2つとも、TRTCChorusRoomのインターフェースでの使い方に違いはありません。
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 chorusRoom: TRTCChorusRoom {
           return TRTCChorusRoom.shared()
       }
       
       // その他のコードロジック
       ......
   }
   // Chorusプロキシの設定
   self.chorusRoom.setDelegate(delegate: chorusRoomDelegate)
   
   // コール方法は以下のとおり。クロージャ―の中には weak self を使用して循環引用にしないことをお勧めします（以下の例示コードでは、 weak self 例を省略）
   self.chorusRoom.login(sdkAppId: sdkAppID, userId: userId, userSig: userSig) { [weak self] (code, message) in
       guard let `self` = self else { return }
       // コールバックビジネスロジック        
   }

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

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

サンプルコード：

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

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

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

self.chorusRoom.createRoom(roomID: yourRoomID, roomParam: param) { (code, message) in
    guard code == 0 else { reutrn }
    // 作成に成功
    
    // 3.マイク・オン
    self.chorusRoom.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. リスナー側は、業務バックエンドから最新のChorusのルームリストを取得します。

   説明：

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

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

   注意：

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

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

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

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

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

// 4.Chorusを選択後、roomIdを渡して入室します
self.chorusRoom.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：マイク管理

// case1: 管理者がピックして1号マイクをマイク・オンにします
self.chorusRoom.pickSeat(seatIndex: 1, userId: "123") { (code, message) in
    // 結果のコールバック
}

// 3. onSeatListChangeコールバックを受信し、マイクリストを更新します
func onSeatListChange(seatInfoList: [ChorusRoomSeatInfo]) {
    // 更新したマイクリスト
}

// 4.単一のマイク変更の通知によって、ここでリスナーが実際にマイク・オンに成功したかを判断することができます
func onAnchorEnterSeat(index: Int, user: ChorusRoomSeatInfo) {
    // マイク・オンイベントの処理
}

// case2: リスナーによる自主的なサブボーカルマイク
chorusRoom.enterSeat(seatIndex: 1) { (code, message) in
    // マイク・オン結果のコールバック
}

// 3. onSeatListChangeコールバックを受信し、マイクリストを更新します
func onSeatListChange(seatInfoList: [SeatInfo]) {
    // 更新したマイクリスト
}

// 4.単一のマイク変更の通知によって、ここでご自身が適切な処理を行っているか判断することができます
func onAnchorEnterSeat(index: Int, user: UserInfo) {
    // マイク・オンイベントの処理
}

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

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

// リスナー側の視点
// 1. sendInvitationを呼び出し、1号マイクの使用をリクエストします
let inviteId = self.chorusRoom.sendInvitation(cmd: "ENTER_SEAT", userId: ownerUserId, content: "1") { (code, message) in
    // 発信結果のコールバック
}
// 2.招待のリクエスト同意を受信し、正式にマイク・オンになります
func onInviteeAccepted(identifier: String, invitee: String) {
    if identifier == selfID {
        self.chorusRoom.enterSeat(seatIndex: ) { (code, message) in
            // マイク・オン結果のコールバック
        }
    }
}

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

// 管理者側の視点
// 1.管理者はsendInvitationを呼び出して、リスナー「123」をピックしてサブボーカルのマイクをリクエストします
let inviteId = self.chorusRoom.sendInvitation(cmd: "PICK_SEAT", userId: ownerUserId, content: "1") { (code, message) in
    // 発信結果のコールバック
}

// 2.招待のリクエスト同意を受信し、正式にマイク・オンになります
func onInviteeAccepted(identifier: String, invitee: String) {
    if identifier == selfID {
        self.chorusRoom.pickSeat(seatIndex: ) { (code, message) in
            // マイク・オン結果のコールバック
        }
    }
}

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

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

• sendRoomTextMsgによって通常のテキストメッセージを送信できるようになり、このルーム内のすべてのキャスターおよびリスナーがonRecvRoomTextMsgのコールバックを受信することができます。
  IMバックエンドは、デフォルトでNGワードフィルター規則を有し、NGワードと認識されたテキストメッセージはクラウドに転送されることはありません。
  // 発信側：テキストメッセージの発信
  self.chorusRoom.sendRoomTextMsg(message: message) { (code, message) in
         
  }
  // 受信側：テキストメッセージのモニタリング
  func onRecvRoomTextMsg(message: String, userInfo: UserInfo) {
    // 受信したmessage情報の処理方法        
  }

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