有奖:语音产品征文挑战赛火热进行中> HOT
TUIKit(vue2/vue3)组件具备单人视频通话和语音通话功能,并且实现了小程序端和 Web 端、App 端全平台的互通。
音视频通话界面如下图所示:
语音通话
视频通话
?
?
?
?
?
?

步骤1:小程序开发准备

1. 开通企业类小程序。
小程序推拉流标签不支持个人小程序,只支持企业类小程序。需要在 注册 时填写主体类型为企业,如下图所示:
?
2. 在小程序控制台开启实时音视频接口。
小程序推拉流标签使用权限暂时只开放给有限类目,具体支持类目参考该地址
符合类目要求的小程序,需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限。
?

步骤2:在小程序控制台配置域名

微信公众平台 > 开发 > 开发管理 > 开发设置 > 服务器域名中设置 request 合法域名socket 合法域名。
request 合法域名
https://official.opensso.tencent-cloud.com
https://yun.tim.qq.com
https://webim.tim.qq.com
https://query.tencent-cloud.com
https://web.sdk.qcloud.com
https://ap-nanjing.cls.tencentcs.com
socket 合法域名
wss://wss.im.qcloud.com
wss://wss.tim.qq.com
如下图所示,服务器域名配置:
?

步骤3:开通音视频通话能力

在使用腾讯云提供的音视频服务前,您需要前往控制台,为应用开通音视频服务。具体步骤请参见 开通服务。?

步骤4:集成 TUICallKit 组件

1. 源码复制 TUICallKit 组件。
MacOS 端
Windows 端
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>
如图所示:
?
?
?

步骤5:运行

?

步骤6:发起您的第一次通话

?

常见问题

如果您的接入和使用中遇到问题,请参见 常见问题

技术咨询

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


http://www.vxiaotou.com