TUIKit（vue2/vue3）组件具备单人视频通话和语音通话功能，并且实现了小程序端和 Web 端、App 端全平台的互通。
音视频通话界面如下图所示：
语音通话 | 视频通话 |
 |  |
步骤1：小程序开发准备
1. 开通企业类小程序。
2. 在小程序控制台开启实时音视频接口。
小程序推拉流标签使用权限暂时只开放给有限类目，具体支持类目可参见 媒体组件 > live-pusher 的相关描述。
符合类目要求的小程序，需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限。
步骤2：在小程序控制台配置域名
request 合法域名：
https://official.opensso.tencent-cloud.comhttps://yun.tim.qq.comhttps://cloud.tencent.comhttps://webim.tim.qq.comhttps://query.tencent-cloud.comhttps://web.sdk.qcloud.comhttps://ap-nanjing.cls.tencentcs.com
socket 合法域名：
wss://wss.im.qcloud.comwss://wss.tim.qq.com
如下图所示，服务器域名配置：
步骤3：开通音视频通话能力
步骤4：集成 TUICallKit 组件
1. 源码复制 TUICallKit 组件。
mkdir -p ./src/TUIKit/TUICallKit && cp -r node_modules/@tencentcloud/call-uikit-wechat/ ./src/TUIKit/TUICallKit
xcopy node_modules\\@tencentcloud\\call-uikit-wechat .\\src\\TUIKit\\TUICallKit /i /e
2. 在 TUIKit 中注入 TUICallKit 组件。
文件路径
src/TUIKit/components/TUIChat/index.vue 。注意：
import TUICallKit from "../../TUICallKit/src/Components/TUICallKit";
<TUICallKit></TUICallKit>
如图所示：
步骤5：运行到微信开发者工具
1. 以编译开发模式的微信小程序为例（编译至其他平台请参考 package.json 文件中 scripts 脚本配置）：
npm run build:mp-weixin
2. 编译成功后，启动微信开发者工具导入
dist/build/mp-weixin 目录。3. 请在本地设置里面勾选上“不校验合法域名、web-view (业务域名)、 TLS 版本以及 HTTPS 证书”。
警告：
如果不勾选该条目，则会在控制台出现如下错误。
4. 单击清缓存 > 全部清除，避免开发者工具的缓存造成渲染异常。
步骤6：发起您的第一次通话
更多特性
中途加入
悬浮窗
常见问题
1. Vue2 & Vue3 缺少 sass 预处理器报错：Preprocessor dependency "sass" not found. Did you install it?
请按照以下步骤操作：
npm install sass --save-dev
2. Vue2 & Vue3 装饰器报错： Transforming JavaScript decorators to the configured target environment is not supported yet
可在 tsconfig.json 中添加相关配置，示例：
{"compilerOptions": {"experimentalDecorators": true}}
3. Vue2 项目报错 TS 编译器类型检查错误
main.js 中引入组合式 API。import VueCompositionAPI from "@vue/composition-api";Vue.use(VueCompositionAPI);
安装
unplugin-vue2-script-setup 依赖。npm i unplugin-vue2-script-setup
新建或修改项目根目录的
vue.config.js 文件。const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default;module.exports = {parallel: false,configureWebpack: {plugins: [ScriptSetup({}),],},chainWebpack(config) {config.plugins.delete('fork-ts-checker'); // disable type check and let `vue-tsc` handles it},};
4. 如何适配通过 cli 创建 Vue2 的 JS 项目？
按照本文的步骤集成后，需要在项目的根目录下执行：
vue add typescript
按照如下进行配置项进行选择（为了保证能同时支持原有 js 代码 与 TUICallKit 中 ts 代码，请您务必严格按照以下五个选项进行配置），安装完成后检查
App.vue文件代码并重新编译。
