即时通信 IM Web&H5 (Vue2/Vue3)

注意：推荐使用更高效的 AI 集成助手

注意：我们为你提供了全新的 AI 集成方式，只需要简单描述你的需求，即可自动生成集成代码，大幅提升开发效率。

注意：点击这里，立即体验 AI 集成

二、环境要求

·Node.js version 16+.

·Modern browser, supporting WebRTC APIs.

·npm 包集成

·Vue3 开发环境，集成 @trtc/calls-uikit-vue npm 包。

·Vue2.7 开发环境：集成 @trtc/calls-uikit-vue2 npm 包。

·Vue2.6 开发环境：集成 @trtc/calls-uikit-vue2.6 + @vue/composition-api npm 包。

·源码集成

·Vue3 + TypeScript 开发环境：从 @trtc/calls-uikit-vue npm 包拷贝源码。

·Vue2.7 + TypeScript 开发环境：从 @trtc/calls-uikit-vue2 npm 包拷贝源码。

·Vue2.6 + TypeScript 开发环境：从 @trtc/calls-uikit-vue2.6 npm 包拷贝源码。

·需要：Vue2.6 + unplugin-vue2-script-setup + @vue/composition-api 。

注意：1. HBuilderX 中选择 vue2 时，使用的是 vue2.6，因此需要使用：@trtc/calls-uikit-vue2.6。

注意：2. HBuilderX 中选择 vue3 时，使用的是 vue3，因此需要使用：@trtc/calls-uikit-vue。

三、开通服务

在使用腾讯云提供的音视频服务前，你需要前往控制台，为应用开通音视频服务。具体步骤详见 开通服务。开通服务后，请记录获取到的 SDKAppID、SecretKey，在后续的步骤中会用到。

四、创建项目

如果已有项目可忽略这一步。使用 Vite 创建一个新的名称为 call-demo 的 Vue3 项目。

注意：说明：

注意：高版本 Vite 需要使用最新的 Node.js 版本。

npm create vite@latest

六、步骤1：下载 TUICallKit 组件

推荐使用 npm 集成，如果你需要采用源码集成，请参见 TUICallKit 源码集成。

注意：说明：

注意：如果你的工程同时使用了 TUIChat UIKit，请直接移步 TUIKit 接入音视频通话 进行接入。

1. 下载 @trtc/calls-uikit-vue 组件。在已有项目或上面创建的 call-demo 项目中。

Vue3Vue2.7Vue2.6npm install @trtc/calls-uikit-vuenpm install @trtc/calls-uikit-vue2npm install @trtc/calls-uikit-vue2.6 @vue/composition-api 如果是源码集成还需要安装 unplugin-vue2-script-setup。npm i -D unplugin-vue2-script-setup

2. 将 debug 目录复制到你的项目目录 src/debug，本地生成 userSig 时需要使用。

Vue3Vue2.7Vue2.6MacOS 端Windows 端cp -r node_modules/@trtc/calls-uikit-vue/debug ./srcxcopy node_modules\\@trtc\\calls-uikit-vue\\debug .\\src\\debug /i /eMacOS 端Windows 端cp -r node_modules/@trtc/calls-uikit-vue2/debug ./srcxcopy node_modules\\@trtc\\calls-uikit-vue2\\debug .\\src\\debug /i /eMacOS 端Windows 端cp -r node_modules/@trtc/calls-uikit-vue2.6/debug ./srcxcopy node_modules\\@trtc\\calls-uikit-vue2.6\\debug .\\src\\debug /i /e

七、步骤2：引入 TUICallKit 组件

注意：说明：

注意：TUICallKit 组件需要放到一个 DOM 节点里，用于控制 TUICallKit 的位置、宽高等样式。

1. 引入 <TUICallKit />，该组件包含通话时的完整 UI 交互。下面示例是 call-demo 的 src/App.vue 中。

<template> <div> <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 " /> </div></template>

2. 调用 TUICallKitAPI.init API 登录组件，需要在代码中填写 SDKAppID、SecretKey 两个参数。

Vue3Vue2.7Vue2.6你可以选择在 src/App.vue 文件引入示例代码，示例代码采用的是 Vue3 Composition API 写法。<script setup>import { ref } from 'vue';import { TUICallKit, TUICallKitAPI, CallMediaType } from "@trtc/calls-uikit-vue";import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es"; // Refer to Step 3const SDKAppID = 0; // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number）const SecretKey = 'xx'; // TODO: Replace with your SecretKeyconst callerUserID = ref('');const calleeUserID = ref('');//【2】Initialize the TUICallKit componentconst init = async () => { const { userSig } = GenerateTestUserSig.genTestUserSig({ userID: callerUserID.value, SDKAppID, SecretKey: SecretKey, }); await TUICallKitAPI.init({ userID: callerUserID.value, userSig, SDKAppID, // tim: this.tim // 如果工程中已有 tim 实例，需在此处传入 }); alert('TUICallKit init succeed');}</script><style scoped>.demo-wrapper { max-width: 680px; margin: 40px auto; padding: 0 20px; font-family: system-ui, -apple-system, sans-serif; } .demo-card { background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); padding: 32px; margin-bottom: 24px; } .demo-title { margin: 0 0 28px; font-size: 22px; font-weight: 600; color: #1a1a2e; text-align: center; } .form-row { margin-bottom: 18px; } .form-row:last-of-type { margin-bottom: 0; } .form-label { display: block; font-size: 14px; font-weight: 600; color: #6b7280; letter-spacing: 0.5px; margin-bottom: 8px; } .form-controls { display: flex; gap: 10px; } .form-input { flex: 1; height: 42px; padding: 0 14px; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 15px; color: #1a1a2e; background: #fafafa; outline: none; transition: border-color .2s, box-shadow .2s; } .form-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); background: #fff; } .form-input::placeholder { color: #c0c4cc; } .btn { height: 42px; padding: 0 20px; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .2s, background .2s; } .btn:active { transform: scale(0.97); } .btn-primary { background: linear-gradient(135deg, #6366f1, #818cf8); color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,0.3); } .btn-primary:hover { background: linear-gradient(135deg, #4f46e5, #6366f1); box-shadow: 0 4px 14px rgba(99,102,241,0.4); } .btn-success { background: linear-gradient(135deg, #10b981, #34d399); color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,0.3); } .btn-success:hover { background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 4px 14px rgba(16,185,129,0.4); } .callkit-area { background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); overflow: hidden; }</style>import { TUICallKit, TUICallKitAPI, CallMediaType } from "@trtc/calls-uikit-vue2";import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es";export default { name: 'App', data() { return { callerUserID: '', calleeUserID: '', SDKAppID: 0, // TODO: Replace with your SDKAppID SecretKey: 'xx', // TODO: Replace with your SecretKey }; }, components: { TUICallKit }, methods: { //【2】Initialize the TUICallKit component async init() { try { const { userSig } = GenerateTestUserSig.genTestUserSig({ userID: this.callerUserID, SDKAppID: Number(this.SDKAppID), SecretKey: this.SecretKey, }); await TUICallKitAPI.init({ SDKAppID: Number(this.SDKAppID), userID: this.callerUserID, userSig, // tim: this.tim // 如果工程中已有 tim 实例，需在此处传入 }); alert("[TUICallKit] Initialization succeeds."); } catch (error) { alert(`[TUICallKit] Initialization failed. Reason: ${error}`); } }, }}1. main.ts 文件注册 @vue/composition-api 。main.tsimport Vue from 'vue'import VueCompositionAPI from '@vue/composition-api'Vue.use(VueCompositionAPI)2. 将下面代码直接复制引用在 App.vue 文件中。import { TUICallKit, TUICallKitAPI, CallMediaType } from "@trtc/calls-uikit-vue2.6";import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es";export default { name: 'App', data() { return { callerUserID: '', calleeUserID: '', SDKAppID: 0, // TODO: Replace with your SDKAppID SecretKey: 'xx', // TODO: Replace with your SecretKey }; }, components: { TUICallKit }, methods: { //【2】Initialize the TUICallKit component async init() { try { const { userSig } = GenerateTestUserSig.genTestUserSig({ userID: this.callerUserID, SDKAppID: Number(this.SDKAppID), SecretKey: this.SecretKey, }); await TUICallKitAPI.init({ SDKAppID: Number(this.SDKAppID), userID: this.callerUserID, userSig, // tim: this.tim // 如果工程中已有 tim 实例，需在此处传入 }); alert("[TUICallKit] Initialization succeeds."); } catch (error) { alert(`[TUICallKit] Initialization failed. Reason: ${error}`); } }, }}

注意：userSig 说明：

八、步骤3：设置昵称和头像（可选）

首次登录的用户没有头像和昵称信息，你可以通过 setSelfInfo 接口设置头像和昵称。

try { await TUICallKitAPI.setSelfInfo({ nickName: "jack", avatar: "http://xxx", });} catch (error: any) { alert(`[TUICallKit] Failed to call the setSelfInfo API. Reason: ${error}`);}

注意：因为用户隐私限制，非好友之间的通话，被叫的昵称和头像更新可能会有延迟，一次通话成功后就会顺利更新。

九、步骤4：发起通话

拨打方可以通过调用 calls 函数，并指定通话类型和被叫方的 userID，来发起语音或视频通话。calls 接口同时支持一对一通话和多人通话。当 userIDList 中包含一个 userID 时，为一对一通话；当 userIDList 包含多个 userID 时，则为多人通话。

1. 调用 TUICallKitAPI.calls API 拨打通话。

Vue3Vue2.7Vue2.6//【3】Make a 1v1 video callconst call = async () => { await TUICallKitAPI.calls({ userIDList: [calleeUserID.value], type: CallMediaType.VIDEO, }); };//【3】Make a 1v1 video callasync call () { await TUICallKitAPI.calls({ userIDList: [this.calleeUserID], type: CallMediaType.VIDEO, }); }//【3】Make a 1v1 video callasync call () { await TUICallKitAPI.calls({ userIDList: [this.calleeUserID], type: CallMediaType.VIDEO, }); }

2. 运行项目。

注意：本地环境请在 localhost 协议下访问，公网体验请在 HTTPS 协议下访问，具体参见 网络访问协议说明。

3. 打开两个浏览器页面，输入不同的 userID(由你定义) 单击 step1. init 登录（主叫方和被叫方）。

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

十、步骤5：接听通话

接听端完成登录后，拨打端发起通话，接收端就可以收到通话邀请，同时伴随铃声。

十二、AI 转录与翻译

注意：说明：

注意：v4.4.5 版本及以上支持。

你可以通过调用 enableAITranscriber 开启/关闭 AI 转录与翻译功能。

enableAITranscriberTUICallKitAPI.enableAITranscriber(true)

十三、开启悬浮窗功能

你可以通过调用 enableFloatWindow 开启/关闭悬浮窗功能，在初始化 TUICallKit 组件时启用该功能，默认状态为关闭（false）。可通过点击通话界面左上角的悬浮窗按钮，将通话界面缩小为悬浮窗形式。

调用 enableFloatWindow(enable: boolean) API 开启/关闭悬浮窗。

TUICallKitAPI.enableFloatWindow(true)

十四、多人通话

主叫方使用 calls 方法发起通话时，若被叫用户列表超过一人，则自动视为群组通话。其他成员可通过 join 方法加入该多人通话。

·发起多人通话：使用 calls 方法发起通话时，若被叫用户列表（userIDList）超过一人，则自动视为群组通话。

calls

try { const params = { userIDList: ['user1', 'user2'], type: TUICallType.VIDEO, } await TUICallKitAPI.calls(params);} catch (error: any) { alert(`[TUICallKit] groupCall failed. Reason:${error}`);}

其它参数详见 calls 接口说明。

·加入多人通话：可使用 join 方法加入指定的群组通话。

join

try { await TUICallKitAPI.join({callId: 'xxx'});} catch (error: any) { alert(`[TUICallKit] join failed. Reason: ${error}`);}

十五、语言设置

·设置支持的语言

·支持的语言：目前支持简体中文、英文、日文。

·切换语言：TUICallKit 会优先获取浏览器语言，如果是中文，英文或者日文中的一种，则以浏览器语言为主，否则使用英文。如果想切换语言，可以使用 setLanguage 接口。以设置语言为英文示例代码如下：

setLanguage

import { TUICallKitAPI } from '@trtc/calls-uikit-vue';TUICallKitAPI.setLanguage("zh-cn"); // "en" | "zh-cn" | "ja_JP"

注意：说明：

注意：如需设置其他语言，请 联系我们 获取协助。

十六、铃声设置

你可通过以下方式设置默认铃声、来电静音模式。

·设置默认铃声（方式1）：通过 setCallingBell 接口设置被叫端收到的来电铃声。

import filePath from './static/ring.mp3';try { await TUICallKitAPI.setCallingBell(filePath?: string);} catch (error: any) { alert(`[TUICallKit] setCallingBell API failed. Reason: ${error}`);}

·设置默认铃声（方式2）：如果你通过源码集成 TUICallKit 组件，可通过替换铃声文件来达到替换铃声的目的。

·来电静音模式：你可以通过 enableMuteMode 设置静音模式。

try { await TUICallKitAPI.enableMuteMode(enable: boolean);} catch (error: any) { alert(`[TUICallKit] enableMuteMode API failed. Reason: ${error}`);}

十八、替换图标按钮

替换图标需要先源码引入，将组件拷贝到你的项目中（源码为 TypeScript 版本）。

注意：替换图标适用于 Vue + TypeScript 项目且 CallKit 版本号 ≥ 3.2.2，若你采用其他语言或者技术栈，请使用自实现 UI 方案。

1. 下载源码

Vue3Vue2.7Vue2.6npm install @trtc/calls-uikit-vuenpm install @trtc/calls-uikit-vue2npm install @trtc/calls-uikit-vue2.6

2. 将源码拷贝到自己的项目中，以拷贝到 src/components/ 目录为例：

macOS + Vue3macOS + Vue2.7Windows + Vue3Windows + Vue2.7macOS + Vue2.6Window + Vue2.6mkdir -p ./src/components/TUICallKit && cp -r ./node_modules/@trtc/calls-uikit-vue/* ./src/components/TUICallKitmkdir -p ./src/components/TUICallKit && cp -r ./node_modules/@trtc/calls-uikit-vue2/* ./src/components/TUICallKitxcopy .\\node_modules\\@trtc\\calls-uikit-vue .\\src\\components\\TUICallKit /i /excopy .\\node_modules\\@trtc\\calls-uikit-vue2 .\\src\\components\\TUICallKit /i /emkdir -p ./src/components/TUICallKit && cp -r ./node_modules/@trtc/calls-uikit-vue2.6/* ./src/components/TUICallKitxcopy .\\node_modules\\@tencentcloud\\call-uikit-vue2.6 .\\src\\components\\TUICallKit /i /e

3. 修改引入路径

需要将 CallKit 改为从本地文件中引入，如下方代码。其他用法细节可参考 TUICallKit 快速接入。

import { TUICallKit, TUICallKitAPI, CallMediaType } from "./components/TUICallKit/src/index";

4. 解决源码拷贝可能导致的报错

如果你在使用 TUICallKit 组件时遇到了报错，请不要担心，大多数情况下这是由于 ESLint 和 TSConfig 配置不一致造成的。你可以查阅文档，按照要求正确配置即可。如果你需要帮助，请随时联系我们，我们将确保你能够成功地使用此组件。以下是几个常见的问题：

ESLint 报错TypeScript 报错若 TUICallKit 与你项目的代码风格不一致导致报错，可将本组件目录屏蔽，如在项目根目录增加 .eslintignore 文件，如：# .eslintignoresrc/components/TUICallKit1. 如遇 Cannot find module '../package.json' 报错，是因为 TUICallKit 内引用了 JSON 文件，可在 tsconfig.json 中添加相关配置，示例：{ "compilerOptions": { "resolveJsonModule": true }}其他 TSConfig 问题请参见 TSConfig Reference。2. 如遇 Uncaught SyntaxError: Invalid or unexpected token 报错，是因为 TUICallKit 使用了装饰器，可在 tsconfig.json 中添加相关配置，示例：{ "compilerOptions": { "experimentalDecorators": true }}

5. 修改 TUICallKit/Components/assets 文件夹下的图标组件

注意：为了确保整个应用中的图标色调风格保持一致，请在替换时保持图标文件的名字不变。

桌面端移动端

十九、隐藏按钮

调用 hideFeatureButton 接口隐藏按钮，目前支持 Camera、Microphone、SwitchCamera、InviteUser，具体看枚举类型 FeatureButton。

注意：v3.2.9+ 支持。

以隐藏摄像头按钮为例。

Vue3Vue2.7Vue2.6import { TUICallKitAPI, FeatureButton } from "@trtc/calls-uikit-vue";TUICallKitAPI.hideFeatureButton(FeatureButton.Camera);import { TUICallKitAPI, FeatureButton } from "@trtc/calls-uikit-vue2";TUICallKitAPI.hideFeatureButton(FeatureButton.Camera);import { TUICallKitAPI, FeatureButton } from "@trtc/calls-uikit-vue2.6";TUICallKitAPI.hideFeatureButton(FeatureButton.Camera);

20、自定义通话背景图

通话背景图会在语音通话或者视频通话关闭摄像头后出现，通过调用 setLocalViewBackgroundImage 修改本地用户通话界面背景图，setRemoteViewBackgroundImage 修改远端用户通话界面背景图。

注意：v3.2.9+ 支持。

Vue3Vue2.7Vue2.6import { TUICallKitAPI } from "@trtc/calls-uikit-vue";TUICallKitAPI.setLocalViewBackgroundImage('http://xxx.png');TUICallKitAPI.setRemoteViewBackgroundImage('remoteUserId', 'http://xxx.png');import { TUICallKitAPI } from "@trtc/calls-uikit-vue2";TUICallKitAPI.setLocalViewBackgroundImage('http://xxx.png');TUICallKitAPI.setRemoteViewBackgroundImage('remoteUserId', 'http://xxx.png');import { TUICallKitAPI } from "@trtc/calls-uikit-vue2.6";TUICallKitAPI.setLocalViewBackgroundImage('http://xxx.png');TUICallKitAPI.setRemoteViewBackgroundImage('remoteUserId', 'http://xxx.png');

21、设置布局

注意：仅 1V1 视频通话可用，v3.3.0+ 支持。

调用 setLayoutMode 设置通话界面布局，目前仅支持 LocalInLargeView，RemoteInLargeView，具体看枚举类型 LayoutMode。

1. LocalInLargeView layout，本地用户在大窗：

2. RemoteInLargeView layout，远端用户在大窗：

Vue3Vue2.7Vue2.6import { TUICallKitAPI, LayoutMode } from "@trtc/calls-uikit-vue";TUICallKitAPI.setLayoutMode(LayoutMode.LocalInLargeView);import { TUICallKitAPI, LayoutMode } from "@trtc/calls-uikit-vue2";TUICallKitAPI.setLayoutMode(LayoutMode.LocalInLargeView);import { TUICallKitAPI, LayoutMode } from "@trtc/calls-uikit-vue2.6";TUICallKitAPI.setLayoutMode(LayoutMode.LocalInLargeView);

22、设置摄像头初始状态

调用 setCameraDefaultState 设置摄像头按钮初始状态，目前支持开启和关闭。

以默认关闭摄像头为例：

Vue3Vue2.7Vue2.6import { TUICallKitAPI } from "@trtc/calls-uikit-vue";TUICallKitAPI.setCameraDefaultState(false);import { TUICallKitAPI } from "@trtc/calls-uikit-vue2";TUICallKitAPI.setCameraDefaultState(false);import { TUICallKitAPI } from "@trtc/calls-uikit-vue2.6";TUICallKitAPI.setCameraDefaultState(false);

23、常见问题

如果你的接入和使用中遇到问题，请参见 常见问题。

24、交流与反馈

如果你在使用过程中，有什么建议或者意见，可以 联系我们，感谢你的反馈。