Docs Overview/
Call/
Web/
开始集成/
集成/
Web&H5 (Vue3)/

Web&H5 (Vue3)

本文将介绍如何快速完成 TUICallKit 组件的接入，您将在10分钟内完成以下几个关键步骤，并最终得到一个包含完备 UI 界面的视频通话功能。




环境准备

Node.js version 16+.
Modern browser, supporting WebRTC APIs.

步骤一：开通服务

请参见 开通服务，获取 SDKAppID、SDKSecretKey，他们将在 初始化 TUICallKit 组件 作为必填参数使用。

步骤二：下载 TUICallKit 组件

1. 下载 @tencentcloud/call-uikit-vue 组件。
npm install @tencentcloud/call-uikit-vue
2. 将 debug 目录复制到您的项目目录 src/debug，本地生成 userSig 时需要使用。
MacOS
Windows
cp -r node_modules/@tencentcloud/call-uikit-vue/debug ./src
xcopy node_modules\@tencentcloud\call-uikit-vue\debug .\src\debug /i /e

步骤三：初始化 TUICallKit 组件

您可以选择在 callkit-demo/src/App.vue 文件引入示例代码，示例代码采用的是Composition API写法。
1. 引入 <TUICallKit />，该组件包含通话时的完整 UI 交互。
<template>
  <span> caller's ID: </span>
  <input type="text" v-model="callerUserID"> 
  <button @click="init"> step1. init </button> <br>
  <span> callee's ID: </span>
  <input type="text" v-model="calleeUserID">
  <button @click="call"> step2. call </button>
  
  <!--【1】Import the TUICallKit component: Call interface UI -->
  <TUICallKit style="width: 650px; height: 500px " />
</template>
2. 调用 TUICallKitServer.init API 登录组件，需要在代码中填写 SDKAppID、SDKSecretKey 两个参数。
<script setup>
import { ref } from 'vue';
import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";
import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es"; // Refer to Step 3

const SDKAppID = 0;       // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number）
const SDKSecretKey = '';  // TODO: Replace with your SDKSecretKey

const callerUserID = ref('');
const calleeUserID = ref('');

//【2】Initialize the TUICallKit component
const init = async () => {
  const { userSig } = GenerateTestUserSig.genTestUserSig({
    userID: callerUserID.value, 
    SDKAppID,
    SecretKey: SDKSecretKey 
  });
  await TUICallKitServer.init({
    userID: callerUserID.value, 
    userSig, 
    SDKAppID,
  });
  alert('TUICallKit init succeed');
}
</script>
参数
类型
说明
userID
String
用户的唯一标识符，由您定义，只允许包含大小写英文字母(a-z A-Z)、数字(0-9)及下划线和连词符。
SDKAppID
Number
在 Tencent RTC 控制台 创建的音视频应用的唯一标识。
SDKSecretKey
String
在 Tencent RTC 控制台 创建的音视频应用的 SDKSecretKey。
userSig
String
一种安全保护签名，用于对用户进行登录鉴权认证，确认用户是否真实，阻止恶意攻击者盗用您的云服务使用权。
userSig 说明：
开发环境：如果您正在本地跑通 Demo、开发调试，可以采用 debug 文件中的 genTestUserSig（参考步骤3.2）函数生成 userSig。该方法中 SDKSecretKey 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量。
生产环境：如果您的项目要发布上线，请采用 服务端生成 UserSig 的方式。

步骤四：拨打您的第一通电话

1. 调用 TUICallKitServer.call API 拨打通话。
//【3】Make a 1v1 video call
const call = async () => {
  await TUICallKitServer.call({
    userID: calleeUserID.value,
    type: TUICallType.VIDEO_CALL,
  }); 
};
2. 运行项目。
警告：
本地环境请在 localhost 协议下访问，公网体验请在 HTTPS 协议下访问，具体参见 网络访问协议说明。
3. 打开两个浏览器页面，输入不同的 userID(由您定义) 单击 step1. init登录（主叫方和被叫方）。



4. 两个 userID 都登录成功后，单击 step2. call 拨打通话，如果您有通话问题，参见 常见问题。




更多特性

设置昵称、头像
群组通话
悬浮窗
自定义铃声
监听通话状态、组件回调事件
设置分辨率、填充模式
界面定制

常见问题

如果您的接入和使用中遇到问题，请参见 常见问题。
如果有任何需要或者反馈，您可以联系：info_rtc@tencent.com 。