TUIKit(vue2/vue3)组件具备单人视频通话和语音通话功能,并且实现了小程序端和 Web 端、App 端全平台的互通。
音视频通话界面如下图所示:
语音通话 | 视频通话 |
![]() | ![]() |
步骤1:小程序开发准备
1. 开通企业类小程序。
![](https://qcloudimg.tencent-cloud.cn/image/document/d7e50011d805960dfdb641efbb2bb272.jpeg)
2. 在小程序控制台开启实时音视频接口。
小程序推拉流标签使用权限暂时只开放给有限类目,具体支持类目参考该地址。
符合类目要求的小程序,需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限。
![](https://qcloudimg.tencent-cloud.cn/image/document/01c1c255943e83e3e306ed92ed2e4a33.png)
步骤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
如下图所示,服务器域名配置:
![](https://qcloudimg.tencent-cloud.cn/image/document/f4d05adbe180bb042c43f4b95de94fa6.png)
步骤3:开通音视频通话能力
步骤4:集成 TUICallKit 组件
1. 源码复制 TUICallKit 组件。
mkdir -p ./TUIKit/TUICallKit && cp -r node_modules/@tencentcloud/call-uikit-wechat/ ./TUIKit/TUICallKit
xcopy node_modules\\@tencentcloud\\call-uikit-wechat .\\TUIKit\\TUICallKit /i /e
2. 在 TUIKit 中注入 TUICallKit 组件。
文件路径
TUIKit/components/TUIChat/index.vue
。注意:
import TUICallKit from "../../TUICallKit/src/Components/TUICallKit";
<TUICallKit></TUICallKit>
如图所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/a7d009a354931cada046e4c03eed41f3.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/a7d009a354931cada046e4c03eed41f3.png)
警告:
如果使用 HBuilder x 4.x 以上版本运行 Vue3 出现如下报错:
![](https://qcloudimg.tencent-cloud.cn/image/document/2a9a3f578ee2c55e1c4cb81b1b14dfd4.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/2a9a3f578ee2c55e1c4cb81b1b14dfd4.png)
可在 tsconfig.json 中添加相关配置,示例:
{"compilerOptions": {"experimentalDecorators": true}}
步骤5:运行到微信开发者工具
![](https://qcloudimg.tencent-cloud.cn/image/document/13215906b1fd9c386a74d7ed2769ee83.png)
步骤6:发起您的第一次通话
![](https://qcloudimg.tencent-cloud.cn/image/document/418dcc8ccb6813fb318b8c24f23c30eb.png)
更多特性
中途加入
悬浮窗