UIカスタマイズの実装

[ソースコード] の中のtrtcliveroomdemoフォルダには、 ui と modelの2つのサブフォルダがあり、model フォルダには再利用できるオープンソースコンポーネント TRTCLiveRoomがあります。TRTCLiveRoom.swift ファイルでこのコンポーネントが提供するインターフェース関数を見て、対応するインターフェースを使用して UI のカスタマイズを実現することができます。

手順1： SDKへの統合

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

方法一：cocoapodsリポジトリを介する依存

pod 'TXIMSDK_iOS'
pod 'TXLiteAVSDK_TRTC'

説明：

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

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

手順2：権限の設定

info.plist ファイルに Privacy > Camera Usage Description， Privacy > Microphone Usage Description を追加し、カメラとマイクの権限をリクエストする必要があります。

手順3： TRTCLiveRoom コンポーネントをインポート

iOS/TRTCScenesDemo/TXLiteAVDemo/TRTCLiveRoomDemo/modelディレクトリのすべてのファイルをプロジェクトにコピーします。

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

1. TRTCLiveRoomImplのinitインターフェースをコールすると、TRTCLiveRoom コンポーネントのインスタンスオブジェクトを作成することができます。
2. 1つのTRTCLiveRoomConfigオブジェクトを作成したら、このオブジェクトにuseCDNFirstとCDNPlayDomainの属性を設定することができます。
   • useCDNFirstの属性：視聴者の視聴方式の設定に使用します。trueは、普通の視聴者のCDN経由での視聴を表し、費用は安価ですがディレーは高めです。falseは、普通の視聴者の低遅延による視聴を表し、費用は CDN とマイク接続の間ですが、ディレーを1s以内に抑えることができます。
   • CDNPlayDomainの属性：useCDNFirstの設定をtrueにした時に有効になり、CDN経由の視聴の再生ドメイン名の指定に利用します。ライブストリーミングコンソール >【Domain Management】の画面からログインし、設定することができます。
3. login関数をコールしてコンポーネントのログインを完了します。下表を参考にキーパラメータ記入してください。

   パラメータ名	作用
   sdkAppId	Tencent Real-Time Communicationコンソール で SDKAppIDを表示できます。
   userId	現在のユーザーID、文字列タイプでは、英語のアルファベット（a-z と A-Z）、数字（0-9）、ハイフン（-）とアンダーライン（_）のみ使用できます。
   userSig	Tencent Cloudによって設計されたセキュリティ保護署名。取得方法については UserSigの計算の仕方をご参照ください。
   config	グローバルコンフィギュレーション情報。ログイン時に初期化してください。ログイン後は変更できなくなります。 useCDNFirstの属性：視聴者の視聴方式の設定に使用します。trueは、普通の視聴者のCDN経由での視聴を表し、費用は安価ですがディレーは高めです。falseは、普通の視聴者の低遅延による視聴を表し、費用は CDN とマイク接続の間ですが、ディレーを1s以内に抑えることができます。 CDNPlayDomain 属性：useCDNFirstの設定をtrueにした時に有効になり、CDN経由の視聴の再生ドメイン名の指定に利用します。ライブストリーミングコンソール >【Domain Management】の画面からログインして設定を行うことができます。
   callback	ログインのコールバック。成功時に code は0になります。

   class LiveRoomController: UIViewController {
    let mLiveRoom = TRTCLiveRoomImpl()
   }
   //useCDNFirst：trueは普通の視聴者のCDN経由の視聴、falseは普通の視聴者の低遅延による視聴を表します。
   //CDNPlayDomain：CDN視聴時に設定する再生ドメイン名を表します。
   let config = TRTCLiveRoomConfig(useCDNFirst: useCDNFirst, cdnPlayDomain: yourCDNPlayDomain)
   mLiveRoom.login(SDKAPPID, userID, userSig, config) { (code, error) in
    if code == 0 {
        //ログイン成功
    }
   }
   

手順5：キャスター側の放送開始

1. キャスターは、手順4でログイン後、setSelfProfileをコールして自身のニックネームおよびプロファイル写真を設定することができます。
2. キャスターは、放送開始前に先にstartCameraPreviewを呼び出してカメラのプレビューを起動させ、インターフェース上に美顔調節ボタンを設置して呼び出し、getBeautyManagerで美顔設定を行うことができます。

   説明：

   エンタープライズ版以外のSDKは変顔やスタンプの機能をサポートしていません。

3. 美顔効果の変更後、キャスターはcreateRoomを呼び出して新しいライブルームを作成することができます。
4. キャスターがstartPublishを呼び出し、プッシュを開始します。CDN視聴のサポートが必要な場合は、login 時に渡されるTRTCLiveRoomConfigパラメータの中でuseCDNFirstとCDNPlayDomainを指定し、startPublish時にライブストリーミングプッシュ用のstreamIDを指定してください。

// 1.キャスターは、ニックネームおよびプロファイル写真を設定します。
mLiveRoom.setSelfProfile(name: "A", avatarURL: "faceUrl", callback: nil)
// 2.キャスターが放送開始前にプレビューを立ち上げ、美顔パラメータを設定します
let view = UIView()
parentView.add(view)
mLiveRoom.startCameraPreview(frontCamera: true, view: view, callback: nil)
mLiveRoom.getBeautyManager().setBeautyStyle(.nature)
mLiveRoom.getBeautyManager().setBeautyLevel(6)
// 3.キャスターがルームを作成します。
let param = TRTCCreateRoomParam(roomName: "テストルーム", coverUrl: "")
mLiveRoom.createRoom(roomID: 123456789, roomParam: param) { [weak self] (code, error) in
if code == 0 {
// 4.キャスターがプッシュを開始し、ストリームがCDNに配信されます。
self?.mLiveRoom.startPublish(streamID: mSelfUserId + "_stream", callback: nil)
}
}

手順6：視聴者の視聴

1. 視聴者側は、手順4 でログイン後、setSelfProfileをコールして自身のニックネームおよびプロファイル写真を設定することができます。
2. 視聴者側が業務バックエンドから最新のライブルームリストを取得します。

   説明：

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

3. 視聴者側は、getRoomInfosをコールしてルームの詳細情報を取得します。この情報は、キャスター側がcreateRoomをコールしてライブルームを作成するときに設定する簡単な説明情報です。

   注意：

   ライブルームのリストに十分で全体的な情報がある場合は、getRoomInfosのコール関連の手順をスキップできます。

4. 視聴者は1つのライブルームを選択し、enterRoomをコールしてルームナンバーを渡すと、そのルームに入室できます。
5. startPlayを呼び出してキャスターのuserIdを渡し、再生を開始します。
   • ライブルームリストにキャスターのuserID 情報がすでに含まれている場合、視聴者は直接startPlayを呼び出してキャスターのuserIdを渡せば、再生を開始できます。
   • ルーム参加前にキャスターのuserIDが一時的に取得できない場合、視聴者はルーム参加後にキャスターのonAnchorEnterのイベントコールバックを受信します。このコールバックの中にキャスターのuserID 情報が含まれていますので、startPlayを呼び出しせば再生できます。

// 1.業務バックエンドから取得したルームリストを roomListと仮定します
var roomList: [UInt32] = GetRoomList()
// 2. getRoomInfos をコールすることによって、ルームの詳細情報を取得します
mliveRoom.getRoomInfos(roomIDs: roomList, callback: { (code, msg, list) in
if code == 0 {
// ルーム詳細情報の取得後、キャスターリスト画面でキャスターのニックネーム、プロファイル写真等の関連情報を表示できます。
}
})
// 3.roomidを選択しルームに参加します。
mliveRoom.enterRoom(roomID: roomID, callback: callback)
// 4.視聴者がキャスターのルーム参加の通知を受信すると、再生が開始されます。
public func trtcLiveRoom(_ trtcLiveRoom: TRTCLiveRoomImpl, onAnchorEnter userID: String) {
// 5.視聴者がキャスターの画面を再生します。
mliveRoom.startPlay(userID: userID, view: renderView, callback: nil) 
}

手順7：視聴者とキャスターとのマイク接続

1. 視聴者側がrequestJoinAnchorを呼び出し、キャスター側にマイク接続のリクエストを送信します。
2. キャスター側はTRTCLiveRoomDelegate#onRequestJoinAnchor（視聴者があなたとのマイク接続をリクエスト）のイベント通知を受信します。
3. キャスター側はresponseJoinAnchorを呼び出し、視聴者からのマイク接続リクエストを受け入れるかどうか決定できます。
4. 視聴者側がTRTCLiveRoomDelegate#responseCallbackのイベント通知を受信します。この通知にはキャスターの処理結果が含まれています。
5. キャスターがマイク接続リクエストに同意したら、視聴者側はstartCameraPreviewを呼び出し、ローカルカメラを起動させます。その後startPublishを呼び出し、視聴者側のプッシュを開始します。
6. キャスター側は、視聴者側の起動の通知の後に、TRTCLiveRoomDelegate#onAnchorEnter （別のオーディオ・ビデオストリーミングが届いている）の通知を受信します。この通知には視聴者側のuserIdが含まれています。
7. キャスター側がstartPlayを呼び出すと、マイク接続の視聴者の画面を見ることができます。

// 視聴者側：
// 1.視聴者側がマイク接続のリクエストを送信します。
mliveRoom.requestJoinAnchor(reason: mSelfUserId + "あなたとのマイク接続をリクエスト", responseCallback: { [weak self] (agreed, reason) in 
 // 4.キャスターが視聴者のリクエストを受け入れます。
   if agreed {
        // 5.視聴者がプレビューを立ち上げ、プッシュを開始します。
        self?.mliveRoom.startCameraPreview(frontCamera: true, view: localView, callback: nil)
        self?.mliveRoom.startPublish(streamID: streamID, callback: nil)
   }        
}, callback: callback)
// キャスター側：
// 2.キャスター側がマイク接続のリクエストを受信します。
public func trtcLiveRoom(_ trtcLiveRoom: TRTCLiveRoomImpl, onRequestJoinAnchor user: TRTCLiveUserInfo, reason: String?, timeout: Double) {
// 3.相手側のマイク接続のリクエストに同意します。
mliveRoom.responseJoinAnchor(userID: userID, agree: true, reason: "マイク接続に同意")
}
// 6.キャスターがマイク接続の視聴者のマイク・オンの通知を受信します。
public func trtcLiveRoom(_ trtcLiveRoom: TRTCLiveRoomImpl, onAnchorEnter userID: String) {
// 7.キャスターが視聴者の画面を再生します。
mliveRoom.startPlay(userID: userID, view: view, callback: nil)
}

手順8：キャスターとキャスターのPK

1. キャスター AがrequestRoomPKを呼び出し、キャスター BにPKのリクエストを送信します。
2. キャスター BがTRTCLiveRoomDelegate onRequestRoomPKのコールバック通知を受信します。
3. キャスター BがresponseRoomPKを呼び出し、キャスター A のPKのリクエストを受け入れるか決定します。
4. キャスター Bは、キャスター Aのリクエストを受け入れたら、TRTCLiveRoomDelegate onAnchorEnterの通知を待ってから、startPlayを呼び出し、キャスター Aを表示します。
5. PKのリクエストが同意されたかについて、キャスター A がresponseCallbackのコールバック通知を受信します。
6. キャスター Aのリクエストが同意されたら、TRTCLiveRoomDelegate onAnchorEnterの通知を待ってから、startPlayを呼び出し、キャスター Bを表示します 。

// キャスター A:
// キャスター Aがルーム12345を作成します。
mLiveRoom.createRoom(roomID: 12345, roomParam: param, callback: nil)
// 1.キャスター Aがキャスター BにPKのリクエストを送信します。
mLiveRoom.requestRoomPK(roomID: 54321, userID: "B", responseCallback: { (agree, reason) in
// 5.同意の有無のコールバックを受信します。
if agree {
}       
}, callback: callback)
// キャスター Aがキャスター Bのルーム参加のコールバックを受信します。
public func trtcLiveRoom(_ trtcLiveRoom: TRTCLiveRoomImpl, onAnchorEnter userID: String) {
// 6.Bのルーム参加の通知を受信し、Bの画面を再生します。
mLiveRoom.startPlay(userID: userID, view: view, callback: callback)
}
// キャスター B：
// キャスター Bがルーム54321を作成します。
mLiveRoom.createRoom(roomID: 54321, roomParam: param, callback: nil)
// 2.キャスター Bがキャスター Aのメッセージを受信します。
public func trtcLiveRoom(_ trtcLiveRoom: TRTCLiveRoomImpl, onRequestRoomPK user: TRTCLiveUserInfo, timeout: Double) {
// 3.キャスター Bがキャスター Aに回答し、リクエストを受け入れます。
mLiveRoom.responseRoomPK(userID: userID, agree: true, reason: reason)
}
public func trtcLiveRoom(_ trtcLiveRoom: TRTCLiveRoomImpl, onAnchorEnter userID: String) {
// 4.キャスター Bがキャスター Aのルーム参加の通知を受信し、キャスターAの画面を再生します。
mLiveRoom.startPlay(userID: userID, view: view, callback: callback)
}

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

• sendRoomTextMsgによって通常のテキストメッセージを発信できるようになり、該当するルーム内の全てのキャスターおよび視聴者がonRecvRoomTextMsgのコールバックを受信することができます。
  IMバックエンドは、デフォルトのNGワードフィルター規則を有し、NGワードと認識されたテキストメッセージはクラウドに転送されることはありません。

  // 発信側：テキストメッセージの発信
  mLiveRoom.sendRoomTextMsg(message: "Hello Word!", callback: callback)
  // 受信側：テキストメッセージのモニタ
  mLiveRoom.delegate = self
  public func trtcLiveRoom(_ trtcLiveRoom: TRTCLiveRoomImpl, onRecvRoomTextMsg message: String, fromUser user: TRTCLiveUserInfo) {
  debugPrint("\(user.userName)から受信したテキストメッセージ:\(message)")
  }
  

• sendRoomCustomMsgによってカスタマイズ（シグナリング）情報を発信することができます。そのルーム内の全てのキャスターおよび視聴者はonRecvRoomCustomMsgのコールバックを受信することができます。
  カスタマイズメッセージは、カスタマイズ信号の伝送によく用いられます。例：「いいね」情報の発信および放送。

  // 送信側：カスタマイズしたCmdで弾幕と「いいね！」のメッセージを区別することができます。
  // eg:"CMD_DANMU"は弾幕コメントを表し、"CMD_LIKE"は「いいね」情報を表します
  mLiveRoom.sendRoomCustomMsg(command: "CMD_DANMU", message: "Hello world", callback: nil)
  mLiveRoom.sendRoomCustomMsg(command: "CMD_LIKE", message: "", callback: nil)
  // 受信側：カスタマイズメッセージのモニタ
  mLiveRoom.delegate = self
  public func trtcLiveRoom(_ trtcLiveRoom: TRTCLiveRoomImpl, onRecvRoomCustomMsg command: String, message: String, fromUser user: TRTCLiveUserInfo) {
  if "CMD_DANMU" == command {
    // 弾幕コメントの受信
    debugPrint("\(user.userName)から受信した弾幕のメッセージ:\(message)")
  } else if "CMD_LIKE" == command {
    // 「いいね」情報の受信
    debugPrint("\(user.userName)がいいねを付けました")
  }
  }
  

</span id="ui.step5"></span id="ui.step4"></span id="ui.step3"></span id="ui.step2"></span id="ui.step1">