tencent cloud

フィードバック

TUICalling (Web)の統合

最終更新日:2022-09-05 09:42:32

    コンポーネントの説明

    TUICallingコンポーネントはオープンソースのオーディオビデオコンポーネントです。デスクトップブラウザでビデオ通話機能をスピーディーに統合でき、オンライン問診、オンラインカスタマーサービス、リモート査定などのシーンに最適です。

    説明:

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

    その他のプラットフォーム

    Web版のTUICallingのほか、Android、iOS、Flutterなどのプラットフォーム用のソースコードも同時リリースしています。このうちAndroid、iOS版のTUICallingは「着信通知」機能をサポートしています。

    説明:

    • Web版のTUICallingのほか、Android、iOS、Flutter、Uniappなどのプラットフォーム用のソースコードも同時リリースしています。このうちAndroid、iOS版のTUICallingは「着信通知」機能をサポートしています。
      ご質問やご提案がありましたら、お問い合わせください。

    コンポーネントの統合

    ステップ1:SdkAppIdと署名キーの取得

    • Tencent Cloudアカウントをまだお持ちでない場合は、Tencent Cloudアカウントをご登録ください。完了すると、TRTC管理コンソールのアプリケーション管理画面にリダイレクトされます。
    • アプリケーションリストが空の場合は、アプリケーションの作成ボタンをクリックして新しいアプリケーションを作成し、アプリケーション管理をクリックしてアプリケーション管理画面を開きます。この画面でクイックマスタータブを開くと、次のような画面を見ることができます。
    • SDKAppID:TRTCのアプリケーションIDです。業務の分離、すなわち異なるSDKAppIDの通話が互いに接続できないようにするために用いられます。
    • Secretkey:TRTCのアプリケーションキーです。SDKAppIDとペアで使用する必要があり、TRTCサービスを正当に使用するための認証用証明書UserSigの算出に用いられます。このKeyは次のステップ5で使用します。

    ステップ2:TRTCCallingコンポーネントのダウンロードと統合

    クリックしてGithubに進み、コードのクローン/ダウンロードを選択します。Webディレクトリ下の実装をご参照ください。

    説明:

    • 0.6.0以降は、trtc-js-sdktim-js-sdkおよびtsignalingの依存関係を手動でインストールする必要があります。
    • trtc-calling-js.jsのボリュームを縮小し、アクセス側で使用されているtrtc-js-sdk、tim-js-sdkおよびtsignalingのバージョン競合を回避するために、trtc-calling-js.jsは、外部依存関係としてtrtc-js-sdk、tim-js-sdk、tsignalingをパッケージ化しているので、使用する前に依存関係を手動でインストールする必要があります。
    // npm方式でのインストール
    npm install trtc-js-sdk --save

    npm install tim-js-sdk --save

    npm install tsignaling --save

    npm install trtc-calling-js --save
    //スクリプト方式によってtrtc-calling-jsを使用する必要がある場合は、順序どおりに次のリソースをインポートする必要があります。

    <script src="./trtc.js"></script>
    <script src="./tim-js.js"></script>
    <script src="./tsignaling.js"></script>
    <script src="./trtc-calling-js.js"></script>

    ステップ3:TRTCCallingオブジェクトの新規作成

    TRTCCallingオブジェクトを新規作成し、SDKAppIDパラメータをお客様のSDKAppIDに設定します。

    // Web/src/trtc-calling/index.jsをご参照ください
    import TRTCCalling from 'trtc-calling-js';
    let options = {
    SDKAppID: 0, // アクセスするときは、0をお客様のSDKAppIDに置き換える必要があります。
    // v0.10.2から、timパラメータを追加します
    // timパラメータはサービス内にすでに存在するTIMインスタンスに使用され、TIMインスタンスの一意性を保証します。
    tim: tim
    };
    const trtcCalling = new TRTCCalling(options);
    

    ステップ4:ログインとイベント監視

    // Web/src/components/login/index.vueをご参照ください
    trtcCalling.login({
    userID,
    userSig,
    });
    // Web/src/App.vueをご参照ください
    export default {
    name: "App",
    components: {
    },
    async created() {
        this.initListener();
    },
    data() {
        return {};
    },
    destroyed() {
        this.removeListener();
    },
    methods: {
        initListener: function() {
            // リモートユーザーが呼び出し
            trtcCalling.on(trtcCalling.EVENT.INVITED, this.handleNewInvitationReceived);
            // リモートユーザーが応答
            trtcCalling.on(trtcCalling.EVENT.USER_ACCEPT, this.handleUserAccept);
            // リモートユーザーが拒否
            trtcCalling.on(trtcCalling.EVENT.REJECT, this.handleInviteeReject);
            // ...
        },
        removeListener: function() {
            trtcCalling.off(trtcCalling.EVENT.INVITED, this.handleNewInvitationReceived);
            trtcCalling.off(trtcCalling.EVENT.USER_ACCEPT, this.handleUserAccept);
            trtcCalling.off(trtcCalling.EVENT.REJECT, this.handleInviteeReject);
        },
        handleNewInvitationReceived: async function(payload) {
        },
        handleUserAccept: function() {
        },
        handleInviteeReject: function() {
        }
    }
    }
    

    ステップ5:1v1通話の実現

    • 発呼者:特定ユーザーを呼び出す

      // Web/src/components/video-call/index.vueまたはWeb/src/components/audio-call/index.vueをご参照ください
      trtcCalling.call({
      userID,  //ユーザーID
      type: 2, //通話タイプ。0-不明、1-音声通話、2-ビデオ通話
      timeout  //招待タイムアウト時間、単位s(秒)
      });
      
    • 着呼者:新しい呼び出しに応答

      // Web/src/App.vue handleAcceptCallメソッドをご参照ください
      // 応答
      trtcCalling.accept();
      // 拒否します
      trtcCalling.reject()
      
    • リモートビデオ画面の表示

      trtcCalling.startRemoteView({
      userID, //リモートユーザーID
      videoViewDomID //このユーザーデータはDOM IDノードにレンダリングされます
      })
      
    • ローカルプレビュー画面の表示

      trtcCalling.startLocalView({
      userID, //ローカルユーザーID
      videoViewDomID //このユーザーデータはDOM IDノードにレンダリングされます
      })
      
    • 通話の終了

      trtcCalling.hangup()
      

    よくあるご質問

    通話がつながらなかったり、強制オフラインになったりするのはなぜですか。

    コンポーネントは現在、マルチインスタンスのログインやオフラインプッシュのシグナリング機能をサポートしていません。現在のログインアカウントの一意性をご確認ください。

    説明:

    • マルチインスタンス:1つのUserIDで繰り返しログインしたり、異なるターミナルからログインしたりすると、シグナリングの混乱が生じます。
    • オフラインプッシュ:インスタンスはオンラインの場合にのみメッセージを受信できます。インスタンスがオフラインのときに受信したシグナリングは、オンラインになった後は再度プッシュされません。

    環境についてはどのような要件がありますか。

    最新バージョンのChromeブラウザをご使用ください。現在、デスクトップのChromeブラウザはTRTC Web SDKをサポートしており、関連機能は比較的整っていますので、Chromeブラウザを使用して体験することをお勧めします。

    • TRTCCallingを使用する時、ユーザはファイアーフォールの制限でオーディオビデオ通話を利用できない可能性があります。ファイアウォール制限への対応 を参照し、関連するポートとドメイン名をファイアウォールのホワイトリストに追加してください。
    • プラットフォームサポート:現在、このソリューションは次のプラットフォームをサポートしています。
      オペレーティングシステムブラウザタイプブラウザの最小バージョン要件
      Mac OS デスクトップ版Safariブラウザ 11+
      Mac OS デスクトップ版Chromeブラウザ 56+
      Mac OS デスクトップ版Firefoxブラウザ 56+
      Mac OS デスクトップ版Edgeブラウザ 80+
      Windows デスクトップ版Chromeブラウザ 56+
      Windows デスクトップ版QQブラウザ(クイックコア) 10.4+
      Windows デスクトップ版Firefoxブラウザ 56+
      Windows デスクトップ版Edgeブラウザ 80+
    説明:

    詳細な互換性の照会については、ブラウザサポート状況をご参照ください。また、TRTC検査ページでオンライン検査することも可能です。

    • URLドメイン名プロトコルの制限
      ユースケースプロトコル受信(再生)送信(マイク・オン)画面共有備考
      本番環境 HTTPSプロトコル サポートしています サポートしています サポートしています 推奨
      本番環境 HTTPプロトコル サポートしています サポートしていません サポートしていません -
      ローカル開発環境 http://localhost サポートしています サポートしています サポートしています 推奨
      ローカル開発環境 http://127.0.0.1 サポートしています サポートしています サポートしています -
      ローカル開発環境 http://[ローカルマシンIP] サポートしています サポートしていません サポートしていません -
      ローカル開発環境 file:/// サポートしています サポートしています サポートしています -

    その他のよくあるご質問

    TRTCCalling webに関するご質問をご参照ください。

    お問い合わせ

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

    テクニカルサポート

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

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