介绍
腾讯云联络中心支持音视频通话,座席可以使用实时音视频的方式与用户联络。
我们提供了该小程序组件,可以方便您快速集成用户端。
环境要求
请使用企业小程序账号申请相关权限进行开发,因为小程序测试号不具备
<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 文档。
在 微信公众平台 > 开发 > 开发管理 > 接口设置中开启实时播放音视频流、实时录制音视频流两个权限。
5. 已创建 腾讯云联络中心应用。
操作步骤
步骤一:配置服务器域名
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-sdkid="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。
2. 下载 音视频通话 Demo。
3. 打开 config.js 并配置 SDKAppID 和 ChannelId。
说明
ChannelId 可以是视频入口 ID 或者音频入口 ID。
4. 安装依赖,您需要在项目中使用 npm 安装依赖包。
npm i
5. 使用微信开发者工具打开源码工程
tccc-user-demo
,单击真机调试即可(不支持模拟器调试)。音视频呼叫 Demo 运行效果
基本功能如下图所示
呼叫中效果 | 接听效果 |
| |
说明
UI 可能会有部分调整更新,请以最新版为准。