tencent cloud

フィードバック

TUICalling (Flutter)の統合

最終更新日:2022-07-14 15:59:52

    ビデオ通話機能をすばやく実装する必要がある場合、当社が提供するDemoをもとに直接変更を加えて適応させるか、当社が提供するTRTCCallingコンポーネントでカスタマイズしたUIを実装することができます。

    説明:

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

    DemoのUIの再利用

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

    1. TRTCコンソールにログインし、開発支援 > Demoクイックスタートを選択します。
      2.アプリケーション名(例:TestVideoCall)を入力して、作成をクリックします。
    注意:

    本機能は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. コンパイル完了後、 コンソール概要に戻る をクリックすれば終了です。
      注意:

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

    ステップ4:Demoの実行

    注意:

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

    1. flutter pub getを実行します。
    2. コンパイルを実行し、デバッグを行います。
      1. flutter runを実行します。
      2. Android Studio(3.5およびそれ以降のバージョン)を使用して、ソースプロジェクトを開き、実行をクリックすれば完了です。

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

    ソースコードフォルダTRTCCallingDemo には2つのサブフォルダuiとmodelが含まれ、そのうちuiフォルダにはインターフェースコードが含まれています。

    ファイルまたはフォルダ 機能の説明
    TRTCCallingVideo.dart オーディオビデオ通話のメインインターフェースが表示され、このインターフェースで通話の応答と拒否が完了します。
    TRTCCallingContact.dart 連絡先を選択するためのインターフェースを表示するために使用され、このインターフェースを介して登録済みユーザーを検索し、通話を開始できます

    カスタムUIの実装

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

    オープンソースコンポーネントTRTCCallingを使用すれば、自分のUIを実装することができます。すなわちmodelパーツを再利用するだけで、自分でUIパーツを実装できます。

    ステップ1:SDKへの統合

    オーディオビデオ通話コンポーネントTRTCCallingは、TRTC SDKIM SDKに依存しています。pubspec.yamlを設定することで、更新を自動的にダウンロードできます。

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

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

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

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

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

    ステップ3:TRTCCallingコンポーネントをインポート

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

    /lib/TRTCCallingDemo/model
    

    ステップ4:コンポーネントの初期化およびログイン

    1. TRTCCalling.sharedInstance()を呼び出して、コンポーネントインスタンスを取得します。
    2. login(SDKAppID, userId, userSig, callback)を呼び出し、コンポーネントのログインを完了します。このうちいくつかの重要パラメータの入力については、下表をご参照ください。
      パラメータ名作用
      SDKAppID TRTCコンソール でSDKAppIDを確認できます。
      userId 現在のユーザーID。文字列タイプでは、英語のアルファベット(a-zとA-Z)、数字(0-9)、ハイフン(-)とアンダーライン(_)のみ使用できます。業務の実際のアカウントシステムと組み合わせてご自身で設定することをお勧めします。
      userSig Tencent Cloudによって設計されたセキュリティ保護署名。計算方法については、UserSigの計算、使用方法をご参照ください。
      // 初期化
      sCall = await TRTCCalling.sharedInstance();
      sCall.login(1400000123, "userA", "xxxx");

    ステップ5:1v1ビデオ通話を実現

    1. 発信者:TRTCCallingcall()メソッドを呼び出して通話リクエストを開始し、ユーザーID(userid)と通話タイプ(type)を渡して、通話タイプパラメータをTRTCCalling.typeVideoCallに渡します。
    2. 受信者:受信者がログイン状態の場合は、onInvited()という名称のイベント通知を受け取ります。コールバックにおけるcallTypeのパラメータは発信者が入力した通話タイプであり、このパラメータを介して対応するインターフェースを起動することができます。
    3. 受信者:電話に対応したい場合、受信者はaccept()関数をコールすると同時にopenCamera()関数を呼び出して、自身のローカルCCDカメラを起動します。受信者はreject()を呼び出し、この通話を拒否することもできます。
    4. 双方のオーディオビデオチャネルが確立した後、通話する双方はonUserVideoAvailable()という名称のイベント通知を受け取ります。これは、相手方のビデオ画面を取得済みであることを示しています。このとき、双方のユーザーはstartRemoteView()を呼び出し、リモートのビデオ画面を表示することができます。リモートの音声はデフォルトで自動再生に設定されています。

    コンポーネントAPIリスト

    TRTCCallingコンポーネントのAPIインターフェースリストは次のとおりです。

    インターフェース関数 インターフェースの機能
    registerListener TRTCCallingリスナーを追加します。ユーザーはこのリスナーを介してステータス通知を取得することができます
    unRegisterListener リスナーを削除します
    destroy インスタンスを破棄します
    login IMにログインします。すべての機能を使用するためには、まずログインする必要があります
    logout IMからログアウトします。ログアウト後はダイヤル操作ができません
    call C2Cの通話に招待します。被招待者はonInvitedのイベント通知を受け取ります
    accept 被招待者として通話に応答します
    reject 被招待者として通話を拒否します
    hangup 通話を終了します
    startRemoteView リモートユーザーのカメラデータを指定のTXCloudVideoViewにレンダリングします
    stopRemoteView 任意のリモートユーザーのカメラデータのレンダリングを停止します
    openCamera カメラを起動し、指定のTXCloudVideoViewにレンダリングします
    closeCamera カメラを終了します
    switchCamera フロント/リアカメラを切り替えます
    setMicMute micをミュート/非ミュートに設定します
    setHandsFree ハンズフリーを起動するかどうかを設定します
    お問い合わせ

    カスタマーサービスをご提供できるため、ぜひお気軽にお問い合わせくださいませ。

    テクニカルサポート

    さらにサポートが必要な場合は、サポートチケットを送信して弊社サポートチームにお問い合わせください。24時間365日のサポートをご提供します。

    電話サポート(24 時間365日対応)