腾讯云实时音视频Web & H5 (Vue2/Vue3)_音视频解决方案_同尘科技

说明：我们团队即将在 Web 端丰富更多不同的组件，以满足您的开发需求。希望您能抽出几分钟时间，为您自己的需求投上一票，我们将优先开发。问卷地址：TUICallKit Web 问卷调查。本文将介绍如何快速完成 TUICallKit 组件的接入，您将在10分钟内完成以下几个关键步骤，并最终得到一个包含完备 UI 界面的视频通话功能。桌面端移动端

视频通话	语音通话
	



单人通话	群组通话
	



TUICallKit Demo 体验

如果您想要直接体验音视频通话，进入 Demo 体验页面，点击 Web 卡片中的 通话。如果您想要直接跑通一个新工程，请直接阅读 Web Demo 快速跑通。

开发环境要求

npm 包集成Vue3 开发环境，集成 @tencentcloud/call-uikit-vue NPM 包。Vue2.7 开发环境：集成 @tencentcloud/call-uikit-vue2 NPM 包。Vue2.6 开发环境：集成 @tencentcloud/call-uikit-vue2.6 NPM 包。需要：Vue2.6 + @vue/composition-api。源码集成Vue3 + TypeScript 开发环境：从 @tencentcloud/call-uikit-vue NPM 包拷贝源码。Vue2.7 + TypeScript 开发环境：从 @tencentcloud/call-uikit-vue2 NPM 包拷贝源码。Vue2.6 + TypeScript 开发环境：从 @tencentcloud/call-uikit-vue2.6 NPM 包拷贝源码。需要：Vue2.6 + unplugin-vue2-script-setup + @vue/composition-api 。node（node.js ≥ 16.0.0）。npm（版本请与 node 版本匹配）。注意：1. HBuilderX 中选择 vue2 时，使用的是 vue2.6，因此需要使用：@tencentcloud/call-uikit-vue2.6。2. HBuilderX 中选择 vue3 时，使用的是 vue3，因此需要使用：@tencentcloud/call-uikit-vue。

步骤一：开通 TRTC 服务

TUICallKit 是基于腾讯云 即时通信 IM 和 实时音视频 TRTC 两项付费 PaaS 服务构建出的音视频通信组件。您可以按照如下步骤开通相关的服务并体验 7 天的免费试用服务。1. 登录到 即时通信 IM 控制台，单击创建新应用，在弹出的对话框中输入您的应用名称，并单击确定。
2. 单击刚刚创建的应用，进入基本配置页面，并在页面的右下角找到含 UI 低代码场景方案标题，单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。
注意：如果需要正式应用上线，可以单击 购买正式版 即可进入购买页面。IM 音视频通话能力针对不同的业务需求提供了差异化的付费版本供您选择，您可以在 IM 购买页 了解包含功能并选购您适合的版本。3. 在同一页面找到 SDKAppID 和密钥（SecretKey）并记录下来，它们会在后续的步骤中被用到。

步骤二：创建 Vue3 项目

1. 如果您尚未安装 vue-cli ，可以在 terminal 或 cmd 中采用如下方式进行安装：

npm install -g @vue/cli

2. 通过 vue-cli 创建项目，并选择下图中所选配置项。

vue create callkit-demo


3. 创建完成项目，切换到项目所在目录。

cd callkit-demo

步骤三：下载 TUICallKit 组件

推荐使用 NPM 集成，如果您需要采用源码集成，请参考 TUICallKit 源码集成。说明：如果您的工程同时使用了 TUIChat UIKit，请直接移步 TUIKit 接入音视频通话 进行接入。1. 通过 npm 方式下载 TUICallKit 组件。Vue3Vue2.7Vue2.6

npm install @tencentcloud/call-uikit-vue

npm install @tencentcloud/call-uikit-vue2

npm install @tencentcloud/call-uikit-vue2.6 @vue/composition-api 

如果是源码集成还需要安装 unplugin-vue2-script-setup。

npm i -D unplugin-vue2-script-setup

2. 将 debug 目录复制到您的项目。Vue3Vue2.7Vue2.6MacOS 端Windows 端

cp -r node_modules/@tencentcloud/call-uikit-vue/debug ./src

xcopy node_modules\@tencentcloud\call-uikit-vue\debug .\src /i /e


MacOS 端Windows 端

cp -r node_modules/@tencentcloud/call-uikit-vue2/debug ./src

xcopy node_modules\@tencentcloud\call-uikit-vue2\debug .\src /i /e


MacOS 端Windows 端

cp -r node_modules/@tencentcloud/call-uikit-vue2.6/debug ./src

xcopy node_modules\@tencentcloud\call-uikit-vue2.6\debug .\src /i /e



步骤四：引入 TUICallKit 组件

将下面示例代码中的 SDKAppID、SecretKey、userID、callUserID 等填写。SDKAppID：在腾讯云创建的音视频应用 SDKAppID，参考 步骤一：开通 TRTC 服务。SecretKey：用户签名，参考 步骤一：开通 TRTC 服务。userID：主叫的 userID，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符（-）和下划线（_）。callUserID：被叫的 userID，需要已初始化存在。(demo 中的 callUserID，当有被叫时输入，无被叫可以不输入)Vue3Vue2.7Vue2.6将下面代码直接复制引用在 App.vue 文件中。

  
    
userID：
    
callUserID：
     Step 1: Initialization      Step 2: Start 1v1 video call     
          
  
import { ref } from 'vue';import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es";// SDKAppID、SecretKey 的获取参考下面步骤const userID = ref('');     // 主叫的 userIDconst callUserID = ref(''); // 被叫的 userIDconst SDKAppID = 0;    // Replace with your SDKAppIDconst SecretKey = '';  // Replace with your SecretKey
async function init() {  try {    const { userSig } = GenerateTestUserSig.genTestUserSig({      userID: userID.value,      SDKAppID: SDKAppID,      SecretKey,    });    // 初始化    await TUICallKitServer.init({       SDKAppID,       userID: userID.value,       userSig,    });    alert("[TUICallKit] Initialization success.");  } catch (error: any) {    alert(`[TUICallKit] Initialization failed. Reason: ${error}`);  }}async function call() {  try {    await TUICallKitServer.call({ userID: callUserID.value, type: TUICallType.VIDEO_CALL });  } catch (error: any) {    alert(`[TUICallKit] Call failed. Reason: ${error}`);  }}

将下面代码直接复制引用在 App.vue 文件中。

  
    
userID：
    
callUserID：
     Step 1: Initialization      Step 2: Start 1v1 video call     
          
  
import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue2";
export default {  name: 'App',  data() {    return {      // SDKAppID、userSig 的获取参考下面步骤      userID: '',     // 主叫的 userID      callUserID: '', // 被叫的 userID      SDKAppID: 0,    // Replace with your SDKAppID      SecretKey: '',  // Replace with your SecretKey    };  },  components: {    TUICallKit  },  methods: {    async init() {      try {        const { userSig } = GenerateTestUserSig.genTestUserSig({          userID: this.userID,          SDKAppID: Number(this.SDKAppID),          SecretKey: this.SecretKey,        });        // 初始化        await TUICallKitServer.init({          SDKAppID: Number(this.SDKAppID),          userID: this.userID,          userSig,          // tim: this.tim     // 如果工程中已有 tim 实例，需在此处传入        });        alert("[TUICallKit] Initialization succeeds.");      } catch (error) {        alert(`[TUICallKit] Initialization failed. Reason: ${error}`);      }    },    async call() {      try {        // 1v1 video call        await TUICallKitServer.call({ userID: this.callUserID, type: TUICallType.VIDEO_CALL });      } catch (error) {        alert(`[TUICallKit] Call failed. Reason: ${error}`);      }    }  },}

1. main.ts 文件注册 @vue/composition-api 。main.ts

import Vue from 'vue'import VueCompositionAPI from '@vue/composition-api'Vue.use(VueCompositionAPI)

2. 将下面代码直接复制引用在 App.vue 文件中。

  
    
userID：
    
callUserID：
     Step 1: Initialization      Step 2: Start 1v1 video call     
          
  
import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue2.6";
export default {  name: 'App',  data() {    return {      // SDKAppID、userSig 的获取参考下面步骤      userID: '',     // 主叫的 userID      callUserID: '', // 被叫的 userID      SDKAppID: 0,    // Replace with your SDKAppID      SecretKey: '',  // Replace with your SecretKey    };  },  components: {    TUICallKit  },  methods: {    async init() {      try {        const { userSig } = GenerateTestUserSig.genTestUserSig({          userID: this.userID,          SDKAppID: Number(this.SDKAppID),          SecretKey: this.SecretKey,        });        await TUICallKitServer.init({          SDKAppID: Number(this.SDKAppID),          userID: this.userID,          userSig,          // tim: this.tim     // 如果工程中已有 tim 实例，需在此处传入        });        alert("[TUICallKit] Initialization succeeds.");      } catch (error) {        alert(`[TUICallKit] Initialization failed. Reason: ${error}`);      }    },    async call() {      try {        // 1v1 video call        await TUICallKitServer.call({ userID: this.callUserID, type: TUICallType.VIDEO_CALL });      } catch (error) {        alert(`[TUICallKit] Call failed. Reason: ${error}`);      }    }  },}

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

在终端输npm run serve运行 callkit-demo。警告：本地环境请在 localhost 协议下访问，具体参考 网络访问协议说明。点击 Step 1: Initialization Button，弹出 Initialization success 表示初始化成功。
点击 Step 2: Start 1v1 video call 发起 1v1 视频通话，具体效果如下图所示。

TUICallKit 更多特性

1、设置昵称、头像

说明：≥ v2.2.0 支持如果您需要设置当前用户的昵称或头像，可以使用如下接口进行更新。

try {  await TUICallKitServer.setSelfInfo({ nickName: "jack", avatar: "http://xxx" });} catch (error: any) {  alert(`[TUICallKit] setSelfInfo failed. Reason: ${error}`);}

2、自定义来电铃声

说明：≥ v3.0.0 支持自定义用户的来电铃音。仅限传入本地 MP3 格式的文件地址，需要确保该文件目录是应用可以访问的。铃声媒体文件必须放在public目录下引入。

try {  await TUICallKitServer.setCallingBell(filePath?: string)} catch (error: any) {  alert(`[TUICallKit] setCallingBell failed. Reason: ${error}`);}

3、群组通话

群组通话需要传入 groupID，groupID 的生成可以通过 @tencentcloud/chat 的群组接口，具体使用如下。建议：在 IM TUIKit 的群组里发起群组通话。注意：群组的创建详见： IM 群组管理 ，或者您也可以直接使用 IM TUIKit，一站式集成聊天、通话等场景。TUICallKit 目前还不支持发起非群组的多人视频通话，如果您有此类需求，欢迎反馈：TUICallKit 产品反馈问卷。

import TIM from "@tencentcloud/chat";import { TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";
const userIDList: string[] = ['user1', 'user2'];async function groupCall() {  const groupID: string = await createGroupID();  try {    await TUICallKitServer.groupCall({       userIDList,       groupID,       type: TUICallType.VIDEO_CALL,    });  } catch (error: any) {    alert(`[TUICallKit] groupCall failed. Reason:${error}`);  }}
async function createGroupID() {  const tim = TIM.create({ SDKAppID });  const memberList: any[] = userIDList.map(userId => ({ userID: userId }));  const res = await tim.createGroup({    type: TIM.TYPES.GRP_PUBLIC, // 必须是 public 群    name: 'WebSDK',    memberList  });  return res.data.group.groupID;}

4、通话状态回调事件

如果您的业务需要 监听通话的状态，例如通话开始、结束，以及通话过程中的事件（详见TUICallEvent），具体如下：

import { TUICallEvent } from 'tuicall-engine-webrtc';
let handleOnCallBegin = function(event) {    console.log(event)};tuiCallEngine.on(TUICallEvent.ON_CALL_BEGIN, handleOnCallBegin); // 添加监听tuiCallEngine.off(TUICallEvent.ON_CALL_BEGIN, handleOnCallBegin); // 取消监听

5、悬浮窗&全屏

通过allowedMinimized属性可以控制悬浮窗（最小化）的开启。通过allowedFullScreen属性可以控制通话窗口全屏的开启。

6、分辨率&填充模式

TUICallKit 组件提供了若干个功能开关，可以根据需要选择开启或关闭，具体参考 TUICallKit 属性介绍。videoDisplayMode: 画面显示模式。videoResolution: 通话分辨率。

import { VideoDisplayMode, VideoResolution } from "@tencentcloud/call-uikit-vue";

7、组件回调事件

TUICallKit 组件提供了通话状态回调，可以用于业务侧实现更多交互逻辑，具体参考 TUICallKit 属性介绍。beforeCalling: 通话开始前会执行。afterCalling: 通话完成后执行。onMinimized: 组件切换最小化后会执行。kickedOut: 该用户被踢（如多端登录下）时执行。（≥v2.3.2 支持）statusChanged: 通话状态发生变化时执行，status 种类参考 API 文档。（≥v2.3.2 支持）script

 <TUICallKit     :beforeCalling="beforeCalling"     :afterCalling="afterCalling"     :onMinimized="onMinimized"    :kickedOut="kickedOut"     :statusChanged="statusChanged"  />

function beforeCalling() {  console.log("[Callkit Demo] beforeCalling");}function afterCalling() {  console.log("[Callkit Demo] afterCalling");}function onMinimized(oldStatus: string, newStatus: string) {  console.log("[Callkit Demo] onMinimized: " + oldStatus + " -> " + newStatus);}function kickedOut() {  console.log("[Callkit Demo] kickedOut");}function statusChanged(args: { oldStatus: string; newStatus: string; }) {  const { oldStatus, newStatus } = args;  if (newStatus === STATUS.CALLING_C2C_VIDEO) {    console.log(`[Callkit Demo] statusChanged: ${oldStatus} -> ${newStatus}`);  }}

常见问题

1. 错误提示“The package you purchased does not support this ability”？

由于您当前应用的音视频通话能力包过期或未开通，请参见 开通服务，领取或者开通音视频通话能力，进而继续使用 TUICallKit 组件。

2. 如何购买套餐？

请参考购买链接 音视频通话 SDK 价格总览，如有其他问题，请点击页面右侧，进行售前套餐咨询，或 进入 IM 社群 进行咨询和反馈。

3. 如何生成 UserSig？

UserSig 是腾讯云为其云服务设计的一种安全保护签名，是一种登录凭证，由 SDKAppID 与 SecretKey 等信息组合加密得到。方式一：控制台获取，参考 获取临时 userSig。方式二：部署临时生成脚本。警告：此方式是在前端代码中配置 SecretKey，该方法中 SecretKey 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通功能调试，生产环境请看方式三。为方便初期调试，userSig 可临时使用 GenerateTestUserSig-es.js 中 genTestUserSig(params) 函数来计算 ，例如：

import { genTestUserSig } from "@tencentcloud/call-uikit-vue/debug/GenerateTestUserSig-es.js";const { userSig } = genTestUserSig({ userID: "Alice", SDKAppID: 0, SecretKey: "YOUT_SECRETKEY" });

方式三：正式环境使用。正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。

4. 如何创建 userID？

通过 userID 与 UserSig 登录过一次，会默认创建该用户。通过 即时通信 IM 控制台 进行创建和获取，单击目标应用卡片，进入应用的账号管理页面，也可创建账号并获取 userID。

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

如果您在使 TUICallKit 组件时遇到了报错，请不要担心，大多数情况下这是由于 ESLint 和 TSConfig 配置不一致造成的。您可以查阅文档，按照要求正确配置即可。如果您需要帮助，请随时联系我们，我们将确保您能够成功地使用此组件。以下是几个常见的问题：ESLint 报错TypeScript 报错若 TUICallKit 与您项目的代码风格不一致导致报错，可将本组件目录屏蔽，如在项目根目录增加 .eslintignore 文件，如：

# .eslintignoresrc/components/TUICallKit

如遇 Cannot find module '../package.json'报错，是因为 TUICallKit 内引用了 JSON 文件，可在tsconfig.json中添加相关配置。其他 TSConfig 问题请参见 TSConfig Reference。

{  "compilerOptions": {    "resolveJsonModule": true  }}

6. 如何源码集成 TUICallKit？

步骤一：下载 TUICallKit 组件源码及相关插件

Vue3Vue2.7Vue2.6

npm install @tencentcloud/call-uikit-vue

npm install @tencentcloud/call-uikit-vue2

npm install @tencentcloud/call-uikit-vue2.6 @vue/composition-api 

源码集成需要安装 unplugin-vue2-script-setup 插件。

npm i -D unplugin-vue2-script-setup

修改构建工具配置文件。Vue CliviteWebpack

// vue.config.jsconst ScriptSetup = require('unplugin-vue2-script-setup/webpack').default
module.exports = {  parallel: false, // disable thread-loader, which is not compactible with this plugin  configureWebpack: {    plugins: [      ScriptSetup({ /* options */ }),    ],  },}

// vite.config.tsimport { defineConfig } from 'vite'import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'import ScriptSetup from 'unplugin-vue2-script-setup/vite'
export default defineConfig({  plugins: [    Vue2(),    ScriptSetup({ /* options */ }),  ],})

// webpack.config.jsconst ScriptSetup = require('unplugin-vue2-script-setup/webpack').default
module.exports = {  /* ... */  plugins: [    ScriptSetup({ /* options */ }),  ]}

步骤二：源码集成 TUICallKit 组件包

将源码拷贝到自己的项目中，以拷贝到src/components/目录为例：macOS + Vue3macOS + Vue2Windows + Vue3Windows + Vue2

mkdir -p ./src/components/TUICallKit && cp -r ./node_modules/@tencentcloud/call-uikit-vue/* ./src/components/TUICallKit

mkdir -p ./src/components/TUICallKit && cp -r ./node_modules/@tencentcloud/call-uikit-vue2/* ./src/components/TUICallKit

xcopy .\node_modules\@tencentcloud\call-uikit-vue  .\src\components\TUICallKit /i /e

xcopy .\node_modules\@tencentcloud\call-uikit-vue2  .\src\components\TUICallKit /i /e

步骤三：修改 TUICallKit 引入路径

修改 TUICallKit 引入路径为本地文件引入。注意：此方法可能与您的 ESLint、TypeScript 配置冲突，若出现报错，可参考 解决源码拷贝导致的报错。

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

接下来请参考上面的步骤及说明，使用 TUICallKit 组件提供的功能。

TUICallKit API 文档

TUICallKit API 文档TUICallEngine API 文档TUICallKit Vue3 Demo 快速跑通、Vue2 Demo 快速跑通TUICallKit 界面定制指引TUICallKit (Web) 常见问题

技术咨询

了解更多详情，请到 腾讯云通信官方社群 进行咨询和反馈。

对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案