ビデオ・インタラクティブストリーミング(Flutter)

最終更新日:2021-10-12 09:40:09

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

    DemoのUIの再利用

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

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

    注意:

    本機能はTencent CloudのTRTCIMという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. コンパイルを実行し、デバッグを行います。
      1. flutter runを実行します。
      2. Android Studio(3.5およびそれ以降のバージョン)を使用して、ソースプロジェクトを開き、【実行】をクリックすれば完了です。

    手順5:Demoソースコードの修正

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

    ファイルまたはフォルダ 機能の説明
    base UIに使用される基礎となるクラス。
    list リストページおよびルームページの作成。
    room メインルームページは、キャスターと視聴者という2種類のインターフェースがあります。

    カスタマイズUIの実装

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

    手順1:SDKへの統合

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

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

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

    手順2:権限の設定および難読化ルール

    Info.plistにカメラとマイクの権限申請を追加する必要があります。

    <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パラメータ内でuseCDNFirstCDNPlayDomainを指定し、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バックエンドは、デフォルトのセンシティブワードフィルタルールを備えており、センシティブワードと認識されたテキストメッセージはクラウドに転送されることはありません。
      // 送信側:テキストメッセージの送信
      trtcLiveCloud.sendRoomTextMsg("Hello Word!");


      // 受信側:テキストメッセージの監視
      onListenerFunc(type, params) async {
      switch (type) {
      case TRTCLiveRoomDelegate.onRecvRoomTextMsg:
      //グループテキストメッセージを受信すると、テキストチャットルームを使用できます
      break;
      }
      }
    • sendRoomCustomMsgによって、カスタム(シグナル)メッセージを送信できます。当該ルーム内のすべてのキャスターと視聴者がonRecvRoomCustomMsg コールバックを受信できます。
      カスタムメッセージは、カスタマイズ信号の送信によく用いられます。例えば、「いいね」情報の発信やブロードキャストに使用します。