AppのUIの再利用

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

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

注意：

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

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

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

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

1. 設定変更ページに進み、ダウンロードしたソースコードパッケージに基づき、対応する開発環境を選択します。
2. TUIChatSalon/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およびそれ以降のバージョン）を使用してソースコードプロセスTUIChatSalon/TUIChatSalonApp.xcworkspaceを開き、 実行をクリックすれば、このAppのデバッグが開始されます。

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

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

アプリケーション体験

注意：

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

ユーザーA

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

ユーザーB

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

注意：

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

カスタムUIの実装

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

手順1：SDKへの統合

ボイスサロンコンポーネントTRTCChatSalonは、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 > Camera Usage Description、Privacy > Microphone Usage Descriptionを追加し、マイクの権限を申請する必要があります。

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

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

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

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

1. TRTCChatSalonのsharedInstanceクラスメソッドを呼び出すと、TRTCChatSalonのインスタンスオブジェクトを作成できます。
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 chatSalon: TRTCChatSalon {
           return TRTCChatSalon.shared()
       }
   
       // その他のコードロジック
       ......
   
   }
   // chatSalonプロキシの設定
   self.chatSalon.setDelegate(delegate: self)
   
   // 呼び出し方法は以下のとおりです。循環参照を防ぐために、クロージャでweak selfを使用することをお勧めします（以下のサンプルコードでは、weak self例を省略）
   self.chatSalon.login(sdkAppID: sdkAppID, userID: userId, userSig: userSig) { [weak self] (code, message) in
       guard let `self` = self else { return }
       // コールバックビジネスロジック        
   }

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

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

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


// 2.管理者側でルームを作成します
let param = ChatSalonParam.init()
Param.roomName = 「ルーム名」
param.needRequest = true // リスナーのマイク・オンに対する管理者の同意の要否
param.coverUrl = 「カバーURL」
param.seatInfoList = []
self.chatSalon.createRoom(roomID: yourRoomID, roomParam: param) { (code, message) in
    guard code == 0 else { reutrn }
    // 3.ルーム作成成功後、席の占有を開始
    self.chatSalon.enterSeat { [weak self] (code, message) in
        guard let `self` = self else { return }
        if code == 0 {
            // 管理者による席の占有成功
        } else {
            // 管理者による席の占有失敗
        }
    }
}

// 4. 席の占有の成功後、onAnchorEnterSeatイベント通知を受信します
func onAnchorEnterSeat(user: ChatSalonUserInfo) {
}

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

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

   説明：

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

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

   注意：

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

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

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

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

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

// 4.roomIdを渡してルームに参加します
self.chatSalon.enterRoom(roomID: roomInfo.roomID) { (code, message) in
    // 入室結果コールバック
    if code == 0 {
       // 入室に成功
    }
}

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

// 6. onAnchorEnterSeatイベント通知を受信します
func onAnchorEnterSeat(user: ChatSalonUserInfo) {
    // マイク・オンイベントの処理
}

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

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

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

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

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

  // 送信側：テキストメッセージの送信
  self.chatSalon.sendRoomTextMsg(message: message) { (code, message) in
        
  }
  // 受信側：テキストメッセージの監視
  func onRecvRoomTextMsg(message: String, userInfo: ChatSalonUserInfo) {
    // 受信したmessage情報の処理方法        
  }

• sendRoomCustomMsgによって、カスタム（シグナリング）メッセージを送信できます。当該ルーム内のすべてのキャスターとリスナーがonRecvRoomCustomMsgコールバックを受信できます。
  カスタムメッセージは、カスタムシグナリングの送信によく用いられます。例えば、「いいね」情報の発信やブロードキャストに使用します。

  // 例：送信側：カスタマイズCmdによって、弾幕と「いいね」情報を区分することができます
  // eg:「CMD_DANMU」は弾幕コメントを表し、「CMD_LIKE」は「いいね」情報を表します
  self.chatSalon.sendRoomCustomMsg(cmd: "CMD_DANMU", message: "hello world", callback: nil)
  self.chatSalon.sendRoomCustomMsg(cmd: "CMD_LIKE", message: "", callback: nil)
  // 受信側：カスタムメッセージの監視
  func onRecvRoomCustomMsg(cmd: String, message: String, userInfo: ChatSalonUserInfo) {
    if cmd == "CMD_DANMU" {
        // 弾幕コメントの受信
    }
    if cmd == "CMD_LIKE" {
        // 「いいね」情報の受信
    }
  }