tencent cloud

PrevNext

フィードバック

キーワードで検索してください

Recent Pages

ドキュメント
Tencent Real-Time Communication
    ドキュメント

    Web

    最終更新日:2023-02-17 16:32:51

      TUICallKitコンポーネントのクイックアクセス

      ここでは、最短の時間でTUICallKitコンポーネントの統合を完了する方法についてご説明します。このドキュメントに沿って操作することで、次の重要手順を完了し、最終的にUIを完備したビデオ通話機能を手にすることができます。
      コンポーネントの効果を体験したい場合は、TUICallKit demoクイックスタートをご参照ください。
      アクセス前にデスクトップブラウザがオーディオビデオサービスをサポートしているかどうかを確認してください。詳しい要件は環境要件をご参照ください。

      目次

      ステップ1：サービスをアクティブにする
      ステップ2：TUICallKitコンポーネントをインポートする
      ステップ3：TUICallKitコンポーネントを呼び出す
      その他のドキュメント
      よくあるご質問
      1. どのようにUserSigを生成すればよいですか
      2. viteのインポートの問題
      3. 環境要件
      (1) ブラウザのバージョン要件
      (2) ネットワーク環境の要件
      (3) ウェブサイトドメイン名プロトコルの要件

      ステップ1：サービスのアクティブ化

      TUICallKitはTencent CloudのIMと、TRTCという2つの有料PaaSサービスをベースに構築したオーディオビデオ通信コンポーネントです。以下の手順で関連のサービスをアクティブ化し、7日間の無料トライアルサービスを体験することができます。
      1. IMコンソールにログインし、新しいアプリケーションの作成をクリックし、ポップアップしたダイアログボックスにアプリケーション名を入力してOKをクリックします。
      
      
      2. 作成したアプリケーションをクリックし、基本設定ページに進み、ページ右下隅のTRTCサービスのアクティブ化機能エリアで無料体験をクリックすると、TUICallKitの7日間無料トライアルサービスをアクティブ化することができます。
      
      
      
      
      3. 同じページでSDKAppIDとキーを見つけて記録します。これらは後ほど使用します。
      
      
      SDKAppID：IMのアプリケーションIDです。業務の分離、すなわち異なるSDKAppIDの通話が互いに接続できないようにするために用いられます。
      Secretkey：IMのアプリケーションキーです。SDKAppIDとペアで使用する必要があり、IMサービスを正当に使用するための認証用証明書UserSigの発行に用いられます。このKeyは次のステップ5で使用します。

      ステップ2：TUICallKitコンポーネントのインポート

      方式1：npm統合

      npm方式でTUICallKitコンポーネントをダウンロードします。その後の拡張をしやすくするために、TUICallKitコンポーネントをプロジェクトのsrc/components/ディレクトリにコピーすることをお勧めします。
      # macOS
      yarn add @tencentcloud/call-uikit-vue  # yarnがインストールされていない場合、まず以下を実行することができます。npm install -g yarn
      mkdir -p ./src/components/TUICallKit/Web && cp -r ./node_modules/@tencentcloud/call-uikit-vue/* ./src/components/TUICallKit/Web
      
      # windows
      yarn add @tencentcloud/call-uikit-vue  # yarnがインストールされていない場合、まず以下を実行することができます。npm install -g yarn
      xcopy .\\node_modules\\@tencentcloud\\call-uikit-vue  .\\src\\components\\TUICallKit\\Web /i /e

      方式2：ソースコードの統合

      1. GitHubからTUICallKitソースコードをダウンロードします。TUICallKit/Webフォルダをコピーして自身のプロジェクトのsrc/componentsフォルダに置きます。例えば次のようになります。
      
      
      
      2. このフォルダに進み、実行に必要な依存をインストールします
      cd ./src/components/TUICallKit/Web 
      yarn         # yarnをインストールしていない場合、先に以下を実行できます。 npm install -g yarn

      ステップ3：TUICallKitコンポーネントの呼び出し

      表示したいページでTUICallKitのコンポーネントを呼び出すと、通話ページを表示することができます。
      1. 次のようにTUICallKit UIをインポートします。
      <script lang="ts" setup>
      import { TUICallKit } from "./components/TUICallKit/Web";
      </script>
      
      <template>
        <TUICallKit />
      </template>
      2. ユーザーログインし、電話をかけます
      2.1 TUIKitのキットをすでに使用している場合は下記のコードをインポートし、TUICallKitがプラグインであることを宣言する必要があります。使用していない場合、このステップは2.2までスキップすることができます。
      import { TUICallKit } from './components/TUICallKit/Web';
      TUIKit.use(TUICallKit);
      2.2 電話をかけるには初期化コンポーネントを保持する必要があります
      import { TUICallKitServer } from './components/TUICallKit/Web';
      TUICallKitServer.init({ SDKAppID, userID, userSig });
      explain
      SDKAppID、 SecretKeyの取得はステップ1をご参照ください userSigは一時的にGenerateTestUserSig.jsの genTestUserSig(userID)関数を使用して計算することができます。例えば次のようになります。
      import * as GenerateTestUserSig from "./components/TUICallKit/Web/demos/basic/public/debug/GenerateTestUserSig.js";
      const { userSig } = GenerateTestUserSig.genTestUserSig(userID, SDKAppID, SecretKey);
      viteを起動ツールとして使用する場合、viteのインポートの問題に注意してください
      notice
      ここで言及するUserSigの取得方法は、フロントエンドコードにSECRETKEYを設定しますが、この手法のSECRETKEYは逆コンパイルによって逆クラッキングされやすく、キーがいったん漏洩すると、攻撃者はTencent Cloudトラフィックを盗用できるようになります。そのためこの手法は、ローカルのクイックスタート機能のデバッグにのみ適しています。UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供することです。 UserSigが必要なときは、Appから業務サーバーにリクエストを送信し動的にUserSigを取得します。詳細については、サーバーでのUserSig新規作成をご参照ください。
      2.3 電話をかけたい場所で、次を実行します。
      import { TUICallKitServer } from './components/TUICallKit/Web';
      TUICallKitServer.call({ userID: "123", type: 2 }); // 2人通話
      TUICallKitServer.groupCall({ userIDList: ["xxx"], groupID: "xxx", type: 2 }); // 多人数通話
      その後すぐに最初の電話をかけることができます。より詳細なインターフェースパラメータについては、インターフェースドキュメントをご参照ください
      3. 発展インターフェース
      このコンポーネントではbeforeCallingおよびafterCallingという2つのコールバックを提供しており、業務側に現在の通話状態を通知するために用いられます。
      beforeCalling: 通話前に実行します
      afterCalling: 通話後に実行します
      例えばサンプルdemoのように、<TUICallKit />コンポーネントの表示と折りたたみに用いることができます。
      function beforeCalling() {
        console.log("通話前にこの関数を実行");
      }
      function afterCalling() {
        console.log("通話後にこの関数を実行");
      }
      <TUICallKit :beforeCalling="beforeCalling" :afterCalling="afterCalling"/>

      その他のドキュメント

      TUICallKit API
      TUICallKit demoクイックスタート
      TUICallKitインターフェースのカスタマイズガイド
      TUICallKit (Web) に関するよくあるご質問

      よくあるご質問

      1. UserSigはどのように生成しますか。

      UserSigの発行方法は、UserSigの計算コードをサーバーに統合し、プロジェクトのインターフェース向けに提供する方法となります。UserSigが必要な時は、プロジェクトから業務サーバーにリクエストを送信し動的にUserSigを取得します。詳細については、サーバーでのUserSig新規作成をご参照ください。

      2. viteのインポートの問題

      プロジェクトをviteで作成した場合は、ファイルパッケージの違いにより、index.htmlにlib-generate-test-usersig.min.jsをインポートする必要があります
      // index.html
      <script src="./src/components/TUICallKit/Web/demos/basic/public/debug/lib-generate-test-usersig.min.js"> </script>
      また、元のGenerateTestUserSig.jsにimportしたメソッドのアノテーションを行います
      // import * as LibGenerateTestUserSig from './lib-generate-test-usersig.min.js'

      3. 環境要件

      (1) ブラウザのバージョン要件

      最新バージョンのChromeブラウザを使用して体験してください。このドキュメントで連結するコンポーネントの、現在の主流デスクトップブラウザに対するサポート状況は次のとおりです。
      オペレーティングシステム
      ブラウザタイプ
      ブラウザの最小バージョン要件
      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+
      
      explain
      詳細な互換性の照会については、ブラウザサポート状況をご参照ください。また、TRTC検査ページでオンライン検査することも可能です。

      (2) ネットワーク環境の要件

      TUICallKitを使用する際、ユーザーはファイアウォールの制限によって正常にオーディオビデオ通話が行えない可能性があります。ファイアウォール制限の対応関連 をご参照の上、対応するポートおよびドメイン名をファイアウォールのホワイトリストに追加してください。

      (3) ウェブサイトドメイン名プロトコルの要件

      ユーザーのセキュリティ、プライバシーなどの問題を考慮し、ブラウザは本ドキュメントの連結コンポーネントの全機能をHTTPSプロトコルでしか正常に使用できないようにウェブページを制限しています。本番環境のユーザーが製品機能をスムーズに体験できるようにするため、ウェブサイトはhttps:// プロトコルのドメイン名にデプロイしてください。
      ユースケース
      プロトコル
      受信（再生）
      送信（マイク・オン）
      画面共有
      備考
      本番環境
      HTTPSプロトコル
      サポートしています
      サポートしています
      サポートしています
      推奨
      本番環境
      HTTPプロトコル
      サポートしています
      サポートしていません
      サポートしていません
      -
      ローカル開発環境
      http://localhost
      サポートしています
      サポートしています
      サポートしています
      推奨
      ローカル開発環境
      http://127.0.0.1
      サポートしています
      サポートしています
      サポートしています
      -
      ローカル開発環境
      http://[ローカルマシンIP]
      サポートしています
      サポートしていません
      サポートしていません
      -
      ローカル開発環境
      file:///
      サポートしています
      サポートしています
      サポートしています
      -
      
      お問い合わせ

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

      お問い合わせ
      テクニカルサポート

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

      チケットを送信
      電話サポート（24 時間365日対応）
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      個人情報保護方針利用規約クッキーポリシー