Tencent Cloud

Recent Pages

Web

最終更新日:2024-07-19 14:53:21

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 }); 
説明：
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のインポートの問題に注意してください
ご注意：
ここで言及する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+
説明：
詳細な互換性の照会については、ブラウザサポート状況をご参照ください。また、TRTC検査ページでオンライン検査することも可能です。
(2) ネットワーク環境の要件
TUICallKitを使用する際、ユーザーはファイアウォールの制限によって正常にオーディオビデオ通話が行えない可能性があります。ファイアウォール制限の対応関連 をご参照の上、対応するポートおよびドメイン名をファイアウォールのホワイトリストに追加してください。
(3) ウェブサイトドメイン名プロトコルの要件
ユーザーのセキュリティ、プライバシーなどの問題を考慮し、ブラウザは本ドキュメントの連結コンポーネントの全機能をHTTPSプロトコルでしか正常に使用できないようにウェブページを制限しています。本番環境のユーザーが製品機能をスムーズに体験できるようにするため、ウェブサイトはhttps:// プロトコルのドメイン名にデプロイしてください。
ユースケース
プロトコル
受信（再生）
送信（マイク・オン）
画面共有
備考
本番環境
HTTPSプロトコル
サポートしています
サポートしています
サポートしています
推奨
本番環境
HTTPプロトコル
サポートしています
サポートしていません
サポートしていません
-
ローカル開発環境
http://localhost
サポートしています
サポートしています
サポートしています
推奨
ローカル開発環境
http://127.0.0.1
サポートしています
サポートしています
サポートしています
-
ローカル開発環境
http://[ローカルマシンIP]
サポートしています
サポートしていません
サポートしていません
-
ローカル開発環境
file:///
サポートしています
サポートしています
サポートしています
-

お問い合わせ

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

テクニカルサポート

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

電話サポート（24 時間365日対応）

tencent cloud

Recent Pages

Web

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

目次

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

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

方式1：npm統合

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

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

その他のドキュメント

よくあるご質問

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

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

3. 環境要件

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

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

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

この記事はお役に立ちましたか？

この記事はお役に立ちましたか？

オペレーティングシステム	ブラウザタイプ	ブラウザの最小バージョン要件
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+

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

tencent cloud

サインアップ

ログイン

Recent Pages

Web

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

目次

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

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

方式1：npm統合

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

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

その他のドキュメント

よくあるご質問

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

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

3. 環境要件

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

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

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

この記事はお役に立ちましたか？

この記事はお役に立ちましたか？