tencent cloud

デモンストレーション

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

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

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

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：ローカルを介する依存
  開発環境での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バックエンドは、デフォルトでNGワードフィルター規則を有し、NGワードと認識されたテキストメッセージはクラウドに転送されることはありません。

  // 発信側：テキストメッセージの発信
  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" {
        // 「いいね」情報の受信
    }
  }