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 降噪
      • 云端录制
    • 客户端 API
      • 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 降噪
      • 云端录制
    • 客户端 API
      • 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 降噪
      • 云端录制
    • 客户端 API
      • UIKit APIs
        • 接口概述
        • TUICallKit
        • TUICallObserver
        • 类型定义
      • Engine APIs
        • TUICallEngine
    • 服务端 API
      • 通话状态回调
        • 通话状态回调
        • 通话事件回调
        • 回调配置
          • 回调配置接口列表
          • 创建回调配置
          • 查询回调配置
          • 更新回调配置
          • 删除回调配置
      • REST 接口
        • REST 接口简介
        • 通过 callId 获取记录
        • 通过条件获取记录
    • FQAs
      • All Platform
      • iOS
      • ErrorCode
      • 发布说明
  • Flutter
    • 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 降噪
      • 云端录制
      • 美颜特效
    • 客户端 API
      • 接口概述
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • 类型定义
    • 服务端 API
      • 通话状态回调
        • 通话状态回调
        • 通话事件回调
        • 回调配置
          • 回调配置接口列表
          • 创建回调配置
          • 查询回调配置
          • 更新回调配置
          • 删除回调配置
      • REST 接口
        • REST 接口简介
        • 通过 callId 获取记录
        • 通过条件获取记录
    • FQAs
      • All Platform
      • Flutter
      • ErrorCode
      • 升级
      • 发布说明
Call

Integration (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 。