tencent cloud

ビデオ・インタラクティブストリーミングの機能をすばやく実装する必要がある場合、当社が提供するDemoをもとに直接修正を加えてフィットさせることも、当社が提供するTRTCLiveRoomコンポーネントを使用し、カスタマイズしたUIを実現することも可能です。

説明：

TUIKitシリーズコンポーネントはTencent CloudのTRTCとIMという2つの基本的なPaaSサービスを同時に使用し、TRTCをアクティブにした後、IMサービスを同期的にアクティブにすることができます。IMサービスの課金ルールの詳細については、Instant Messagingの料金説明をご参照ください。TRTCをアクティブにすると、デフォルトでは、100DAUまでサポートするIM SDK体験版もアクティブになります。

DemoのUIの再利用

ステップ1：新規アプリケーションの作成

1. TRTCコンソールにログインし、【開発支援】>【Demoクイックスタート】を選択します。
2. TestLiveなどのアプリケーション名を入力して、【作成】をクリックします。

注意：

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

ステップ2：SDKおよびDemoソースコードをダウンロード

1. 実際のビジネスニーズに基づき、SDKおよび付属のDemoソースコードをダウンロードします。
2. ダウンロード完了後、【ダウンロード済み。次へ】をクリックします。
   

ステップ3：Demoプロジェクトファイルの設定

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

2. /example/lib/debug/GenerateTestUserSig.dart ファイルを見つけて開きます。

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

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

4. 貼り付け完了後、【貼り付けました。次へ】をクリックすれば、作成が完了します。

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

注意：

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

ステップ4：コンパイルと実行

注意：

Android端末は実際のマシンで実行する必要があり、エミュレーターのデバッグはサポートされていません。

1. flutter pub getを実行します。
2. コンパイルを実行し、デバッグを行います：
   • Android 端末
   • iOS 端末

   1. flutter runを実行します。
   2. Android Studio（3.5およびそれ以降のバージョン）を使用して、ソースプロジェクトを開き、【実行】をクリックすれば完了です。

   1. XCode（11.0およびそれ以降のバージョン）を使用して、ソースコードディレクトリの /iosプロジェクト を開きます。
   2. コンパイルを行い、Demoプロジェクトを実行します。

ステップ5：Demoソースコードの修正

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

UIカスタマイズの実装

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

ステップ1：SDKの統合

インタラクティブライブストリーミングコンポーネントTRTCLiveRoomは、TRTC SDKとIM SDKに依存しています。pubspec.yamlを設定することで、自動的にダウンロードして更新できます。

プロジェクトのpubspec.yaml に次の依存関係を記述します：

dependencies:
 tencent_trtc_cloud: 最新バージョン番号
 tencent_im_sdk_plugin: 最新バージョン番号

ステップ2：権限の設定および難読化ルール

<key>NSMicrophoneUsageDescription</key>
<string>通常の音声通話が行えるようにマイクの権限を承認します</string>

ステップ3：TRTCLiveRoomコンポーネントをインポート

次のディレクトリ内のすべてのファイルをプロジェクトにコピーします：

lib/TRTCLiveRoom/model/

ステップ4：コンポーネントの作成およびログイン

1. sharedInstanceインターフェースを呼び出すと、TRTCLiveRoomコンポーネントのインスタンスオブジェクトを作成できます。
2. registerListener関数を呼び出して、コンポーネントのイベント通知を登録します。
3. login関数を呼び出してコンポーネントのログインを完了します。下表を参考にキーパラメータを入力してください：

   パラメータ名	作用
   sdkAppId	TRTCコンソール で SDKAppIDを表示できます。
   userId	現在のユーザーID。文字列タイプであり、英語のアルファベット（a-z、A-Z）、数字（0-9）、ハイフン（-）とアンダーライン（_）のみ使用できます。業務の実際のアカウントシステムと組み合わせてご自身で設定することをお勧めします。
   userSig	Tencent Cloudによって設計されたセキュリティ保護署名。取得方法については、UserSigの計算、使用方法をご参照ください。
   useCDNFirst	視聴者の視聴方式の設定に使用します。trueは一般視聴者のCDN経由での視聴を表し、料金は安価ですがレイテンシーは高めです。falseは一般視聴者の低レイテンシーによる視聴を表し、料金はCDN とマイク接続の間ですが、遅延を1s以内に抑えることができます。
   CDNPlayDomain	useCDNFirstの設定をtrueにした時に有効になり、CDN経由の視聴の再生ドメイン名の指定に利用します。CSSコンソール >【ドメイン名管理】ページからログインし、設定することができます。

ステップ5：キャスター側での配信開始

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

   説明：

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

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

ステップ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を呼び出せば再生できます。

ステップ7：視聴者とキャスターとのマイク接続のオンとオフ

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

ステップ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が onRoomPKAcceptedのコールバック通知を受信します。
6. キャスターAのリクエストが同意されたら、TRTCLiveRoomDelegate onAnchorEnterの通知を待ってから、startPlayを呼び出し、キャスターBを表示します 。

ステップ9：文字チャットおよび弾幕コメントの実装

• sendRoomTextMsgによって通常のテキストメッセージを送信できるようになり、該当するルーム内の全てのキャスターおよび視聴者がonRecvRoomTextMsgのコールバックを受信することができます。
  IMバックエンドは、デフォルトでNGワードフィルター規則を有し、NGワードと認識されたテキストメッセージはクラウドに転送されることはありません。
  // 発信側：テキストメッセージの発信
  trtcLiveCloud.sendRoomTextMsg("Hello Word!");
     
  // 受信側：テキストメッセージのモニタリング
  onListenerFunc(type, params) async {
    switch (type) {
      case TRTCLiveRoomDelegate.onRecvRoomTextMsg:
            //グループテキストメッセージを受信すると、テキストチャットルームを使用できます
        break;
    }
  }

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