Call
  • Web
    • Overview
      • Product Introduction
      • Activate the Service
      • 価格
        • 無料時間
        • オーディオ・ビデオ通話 Call の月額パッケージ
        • サブスクリプションパッケージ期間の課金説明
    • Get Started
      • Run Sample Code
      • Integration (React)
      • Integration (Vue3)
      • Secure authentication with userSig
    • Basic Features
      • UI Customization
      • Configuring Nickname and Avatar
      • GroupCall
      • フローティングウィンドウ
      • 着信音のカスタマイズ
      • 解像度とフィルモードの設定
      • 通話状態のモニタリング
    • Advanced Features
      • 仮想背景
      • AI ノイズ低減
      • クラウドレコーディング
    • インターフェースドキュメンテーション
      • UIKit APIs
        • API Overview
        • TUICallKit
      • Engine APIs
        • TUICallEngine
        • TUICallEvent
    • サーバー API
      • 通話状態のコールバック
        • 通話状態のコールバック
        • 通話イベントコールバック
        • コールバック設定
          • コールバック設定インターフェースリスト
          • コールバック設定の作成
          • コールバック設定の照会
          • コールバック設定の更新
          • コールバック設定の削除
      • REST インターフェース
        • REST インターフェースの紹介
        • callId によりレコードを取得
        • 条件によりレコードを取得
    • FAQs
      • All Platfroms
      • Web
      • ErrorCode
      • リリース説明
  • Android
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Demo のクイックスタート
      • インテグレーション
      • Secure authentication with userSig
    • Basic Features
      • UI のカスタマイズ
      • オフライン通話プッシュ
      • Configuring Nicknames and Avatars
      • グループ通話
      • フローティングウィンドウ
      • 着信音のカスタマイズ
      • 通話状態のモニタリング
    • その他の機能
      • 仮想背景
      • AI ノイズ低減
      • クラウドレコーディング
    • インターフェースドキュメンテーション
      • UIKit APIs
        • インターフェースの概要
        • TUICallKit
        • TUICallObserver
        • タイプ定義
      • Engine APIs
        • TUICallEngine
    • サーバー API
      • 通話状態のコールバック
        • 通話状態のコールバック
        • 通話イベントコールバック
        • コールバック設定
          • コールバック設定インターフェースリスト
          • コールバック設定の作成
          • コールバック設定の照会
          • コールバック設定の更新
          • コールバック設定の削除
      • REST インターフェース
        • REST インターフェースの紹介
        • callId によりレコードを取得
        • 条件によりレコードを取得
    • FAQs
      • All Platforms
      • Android
      • ErrorCode
      • リリース説明
  • iOS
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Demo のクイックスタート
      • インテグレーション
      • Secure authentication with userSig
    • Basic Features
      • UI のカスタマイズ
      • オフライン通話プッシュ
        • VoIP
        • APN
      • ニックネームとプロファイルフォトの設定
      • グループ通話
      • フローティングウィンドウ
      • 着信音のカスタマイズ
      • 通話状態のモニタリング
    • その他の機能
      • 仮想背景
      • AI ノイズ低減
      • クラウドレコーディング
    • インターフェースドキュメンテーション
      • UIKit APIs
        • インターフェースの概要
        • TUICallKit
        • TUICallObserver
        • タイプ定義
      • Engine APIs
        • TUICallEngine
    • サーバー API
      • 通話状態のコールバック
        • 通話状態のコールバック
        • 通話イベントコールバック
        • コールバック設定
          • コールバック設定インターフェースリスト
          • コールバック設定の作成
          • コールバック設定の照会
          • コールバック設定の更新
          • コールバック設定の削除
      • REST インターフェース
        • REST インターフェースの紹介
        • callId によりレコードを取得
        • 条件によりレコードを取得
    • FQAs
      • All Platform
      • iOS
      • ErrorCode
      • リリース説明
  • Flutter
    • Overview
      • Overview
      • サービスをアクティブ化します
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Demo のクイックスタート
      • インテグレーション
      • Secure authentication with userSig
    • Basic Features
      • UI のカスタマイズ
      • オフライン通話プッシュ
        • 通知
        • VoIP(オプション)
      • ニックネームとプロファイルフォトの設定
      • グループ通話
      • フローティングウィンドウ
      • 着信音のカスタマイズ
      • 通話状態のモニタリング
    • その他の機能
      • 仮想背景
      • AI ノイズ低減
      • クラウドレコーディング
      • 美顔エフェクト
    • インターフェースドキュメンテーション
      • インターフェースの概要
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • タイプ定義
    • サーバー API
      • 通話状態のコールバック
        • 通話状態のコールバック
        • 通話イベントコールバック
        • コールバック設定
          • コールバック設定インターフェースリスト
          • コールバック設定の作成
          • コールバック設定の照会
          • コールバック設定の更新
          • コールバック設定の削除
      • REST インターフェース
        • REST インターフェースの紹介
        • callId によりレコードを取得
        • 条件によりレコードを取得
    • FQAs
      • All Platform
      • Flutter
      • ErrorCode
      • アップグレード
      • リリース説明
Call

Integration (Vue3)

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

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

目次

(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 });
説明:
SDKAppID、 SecretKeyの取得はステップ1をご参照ください userSigは一時的にGenerateTestUserSig.jsgenTestUserSig(userID)関数を使用して計算することができます。例えば次のようになります。
import * as GenerateTestUserSig from "./components/TUICallKit/Web/demos/basic/public/debug/GenerateTestUserSig.js";
const { userSig } = GenerateTestUserSig.genTestUserSig(userID, SDKAppID, SecretKey);
viteを起動ツールとして使用する場合、viteのインポートの問題に注意してください
ご注意:
ここで言及する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"/>

その他のドキュメント

よくあるご質問

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

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

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

プロジェクトをviteで作成した場合は、ファイルパッケージの違いにより、index.htmllib-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+
説明:
詳細な互換性の照会については、ブラウザサポート状況をご参照ください。また、TRTC検査ページでオンライン検査することも可能です。

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

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

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

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