有奖捉虫:云通信与企业服务文档专题,速来> HOT

介绍

腾讯云联络中心支持音视频通话,座席可以使用实时音视频的方式与用户联络。 我们提供了该小程序组件,可以方便您快速集成用户端。

环境要求

请使用企业小程序账号申请相关权限进行开发,因为小程序测试号不具备 <live-pusher><live-player>的使用权限。
需要在真机上进行运行体验,因为微信开发者工具不支持原生组件<live-pusher><live-player>
请使用原生小程序开发环境,不支持 uniapp 等开发框架。
微信 App iOS 最低版本要求:7.0.9。
微信 App Android 最低版本要求:7.0.8。
小程序基础库最低版本要求:2.10.0。

前提条件

1. 已完成注册 微信小程序账号
2. 已完成安装 微信开发者工具
3. 已完成安装 Node.js
4. 确保小程序符合微信要求,并开通音视频权限:
仅支持企业类小程序。
仅支持 指定类目 的小程序,具体请参见 微信小程序 live-pusher 文档
微信公众平台 > 开发 > 开发管理 > 接口设置中开启实时播放音视频流、实时录制音视频流两个权限。

操作步骤

步骤一:配置服务器域名

1. 登录 微信公众平台
2. 选择开发 > 开发管理 > 开发设置 > 服务器域名,根据下表配置:
合法域名类型
域名
request 合法域名
https://api.tccc.qcloud.com
https://yun.tim.qq.co
https://web.sdk.qcloud.com
https://webim.tim.qq.com
socket 合法域名
wss://api.tccc.qcloud.com
wss://wss.im.qcloud.com
wss://wss.tim.qq.com

步骤二:引入 SDK

1. 在您的小程序项目下使用 npm 下载:
npm install tccc-wx-sdk
2. 导入 SDK 组件:
{
"usingComponents": {
"tccc-wx-sdk": "tccc-wx-sdk"
}
}
3. 引入 SDK 视频组件,如果不需要视频客服功能,可跳过此步骤。
注意
pusher 和 player 组件必须在 tccc-wx-sdk 层级下。
{
"usingComponents": {
"tccc-wx-sdk": "tccc-wx-sdk",
"tccc-wx-sdk/pusher": "tccc-wx-sdk/pusher",
"tccc-wx-sdk/player": "tccc-wx-sdk/player"
}
}
4. wxml 中自定义本地和远端视频:
<tccc-wx-sdk
id="tcccSdk"
sdkAppId="{{sdkAppId}}"
bind:error="handleTcccError"
bind:sessionEnded="handleEnd"
bind:accepted="handleAccept"
bind:sessionStart="handleStart"
>
<!-- 本地视频画面,音频通话可忽略 -->
<tccc-wx-sdk-pusher />
<!-- 远端视频画面,音频通话可忽略 -->
<tccc-wx-sdk-player />
</tccc-wx-sdk>

场景实践

跑通音视频呼叫 Demo

请确保已完成前提条件内容:
1. 获取腾讯云联络中心 SDKAppID。
3. 打开 config.js 并配置 SDKAppID 和 ChannelId。


说明
ChannelId 可以是视频入口 ID 或者音频入口 ID。
4. 安装依赖,您需要在项目中使用 npm 安装依赖包。
npm i
5. 使用微信开发者工具打开源码工程 tccc-user-demo,单击真机调试即可(不支持模拟器调试)。

音视频呼叫 Demo 运行效果

基本功能如下图所示
呼叫中效果
接听效果






说明
UI 可能会有部分调整更新,请以最新版为准。