tccc-wx-sdk
v0.1.2
Published
腾讯云呼叫中心支持小程序音视频通话,用户通过小程序发起通话,客服可在电脑端工作台接待。
Downloads
1
Maintainers
Readme
腾讯云呼叫中心音视频客服小程序SDK
腾讯云呼叫中心支持小程序音视频通话,用户通过小程序发起通话,客服可在电脑端工作台接待。
环境要求
- 请使用企业小程序账号申请相关权限进行开发,因为小程序测试号不具备
<live-pusher>
和<live-player>
的使用权限。 - 需要在真机上进行运行体验,因为微信开发者工具不支持原生组件
<live-pusher>
和<live-player>
。 - 请使用原生小程序开发环境,不支持 uniapp 等开发框架。
- 微信 App iOS 最低版本要求:7.0.9
- 微信 App Android 最低版本要求:7.0.8
- 小程序基础库最低版本要求:2.10.0
前提条件
- 已完成注册微信小程序账号
- 已完成安装微信开发者工具
- 已完成安装Nodejs
- 确保小程序符合微信要求,并开通音视频权限。
- 仅支持企业类小程序
- 仅支持指定类目的小程序,具体见微信小程序live-push文档
- 在微信公众平台>开发>开发管理>接口设置 中开启实时播放音视频流、实时录制音视频流 两个权限。
配置服务器域名
- 登录微信公众平台
- 选择开发>开发管理>开发设置>服务器域名,根据下表配置
引入SDK
- 使用npm下载
npm install tccc-wx-sdk
- 导入SDK组件
{
"usingComponents": {
"tccc-wx-sdk": "tccc-wx-sdk"
}
}
- 引入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"
}
}
- 在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>
API目录
通用API
音频呼叫API
视频呼叫API
- startSession - 发起视频通话
- endSession - 挂断视频通话
- switchCamera - 切换摄像头
- disableCamera - 关闭摄像头
- enableCamera - 开启摄像头
会话通用API
通用事件
TCCC小程序SDK提供登录、呼叫等方法
login - 登录
checkLogin - 检查是否已登录
import { login, checkLogin } from 'tccc-wx-sdk/login'
const sdkAppId = '1400000000';
// 登录示例代码
checkLogin({ sdkAppId }).then((result) => {
if (result) {
// 检查登录成功
} else {
throw new Error('登录已过期')
}
}).catch(() => {
wx.login({
success: ({ code }) => {
// 登录tccc
login({
jsCode: code,
sdkAppId,
}).then(() => {
// 登录成功
}).catch(e => {
wx.showToast({
icon: 'error',
title: e.message,
})
})
}
})
})
startCall-发起音频通话
try {
const channelId = 'xxx';
const { sessionId } = await this.selectComponent('#tcccSdk').startCall({ channelId });
} catch (e) {
wx.showToast({
icon: 'error',
title: e.message,
});
}
endCall-挂断音频通话
this.selectComponent('#tcccSdk').endCall();
startSession-发起视频呼叫
try {
const channelId = 'xxx';
const { sessionId } = await this.selectComponent('#tcccSdk').startCall({ channelId });
} catch (e) {
wx.showToast({
icon: 'error',
title: e.message,
});
}
endSession-挂断视频通话
this.selectComponent('#tcccSdk').endCall();
sendDigits-发送分机号
this.selectComponent('#tcccSdk').sendDigits(param)
muteAudio-静音
this.selectComponent('#tcccSdk').muteAudio()
unmuteAudio-取消静音
this.selectComponent('#tcccSdk').unmuteAudio()
setSoundMode-设置声音输出方式
const soundMode = this.data.soundMode === 'speaker' ? 'ear' : 'speaker';
this.selectComponent('#tcccSdk').setSoundMode(soundeMode);
this.setData({
soundMode,
});
事件类型
sessionStart-会话开始
<tccc-wx-sdk bind:sessionStart="handleStart"/>
handleStart() {
wx.showToast({
icon: 'success',
title: '通话开始',
})
}
accept-对方接听
<tccc-wx-sdk bind:accepted="handleAccepted"/>
handleAccepted(){
wx.showToast({
icon: 'none',
title: '对方已接听',
})
}
sessionEnded-会话结束
<tccc-wx-sdk bind:sessionEnded="handleSessionEnded>
handleSessionEnded({ closeBy }){
if (closeBy === 'admin') {
wx.showToast({
icon: 'none',
title: '系统原因挂断',
})
} else if(cloeBy === 'seat') {
wx.showToast({
icon: 'none',
title: '通话结束,对方已挂断',
})
} else {
// 挂断成功
}
}
error-会话错误
<tccc-wx-sdk bind:error="handleError>
handleError({ message }){
wx.showToast({
icon: 'error',
title: message || '发生错误,请重试',
})
}