有奖捉虫:云通信与企业服务文档专题,速来> HOT
本文主要介绍如何快速集成腾讯云联络中心视频客服,只要按照如下步骤进行配置,就可以跑通用户端的视频客服。

前提条件

您已 注册腾讯云 账号,并完成 实名认证
您已 开通云联络中心 服务,并创建了 云联络中心实例

集成视频客服前置准备

1. 登录 联络中心管理端,选择登录的联络中心 > 管理端 > 视频客服 > 技能组管理 > 添加技能组


2. 添加 新客服 到对应的技能组中。


3. 新增视频入口。 选择管理端 > 渠道管理 > 配置视频入口 > 新增


4. 
复制视频入口 ID。




腾讯云联络中心提供了多种方式集成视频客服,包括跳转到 TCCC 联络小程序平台完成视频客服功能,同时也提供了小程序 SDK、Android SDK 方便开发者实现视频客服相关功能。

跳转到 TCCC 联络小程序平台

我们提供了 TCCC 联络小程序平台,可以方便您在微信小程序里、企业微信里、自有 App 内打开 TCCC 联络小程序 完成视频客服。

跳转参数说明

拉起 TCCC 联络小程序平台需要用到以下参数。 请先记录这些参数,后文将会详细介绍具体开发方式。
参数
备注
appId
wxf3ac5a9dfc918430
固定值
path
/pages/video/video?sdkAppId={YourAppID}&channelId={YourChannelID}
请将具体参数值修改为您自己的

path 参数说明

参数
类型
必填
备注
sdkAppId
string
腾讯云联络中心应用 ID
channelId
string
视频入口 ID,参见 复制视频入口 ID

微信小程序内进行跳转

使用 wx.navigateToMiniProgram 拉起 TCCC 联络小程序即可,请参见 打开另一个小程序
代码示例:
const sdkAppId = '140xxxx'; // 请修改为自己的SDK APP ID。
const channelId = 'xxx'; // 请修改为自己的视频入口ID
wx.navigateToMiniProgram({
appId: 'wxf3ac5a9dfc918430',
//path参数请参照前文说明填写
path:`/pages/video/video?sdkAppId=${sdkAppId}&channelId=${channelId}`,
success(res) {
// 打开成功
},
fail(err) {
// 打开失败
},
})

企业微信里发起视频客服

1. 调用 wx.agentConfig 注入应用权限;
2. 调用 launchMiniprogram 打开小程序; 详细请参见 跳转到小程序

App 内发起视频客服

使用微信提供的 OpenSDK 拉起 TCCC 联络小程序,请参见 App 拉起小程序功能

导入代码片段

如果您还未申请到小程序,或者想先测试预览跳转效果。我们也提供了小程序代码片段,方便您快速跳转 TCCC 联络小程序 平台。
1. 在微信开发者工具选择项目的界面中,左侧可以选择代码片段页卡,点击右上角的导入按钮。


2. 粘贴 https://developers.weixin.qq.com/s/daMLfYmC7Zzl 到输入框中。


3. 导入代码后,输入您的SDK APP ID在线客服入口 ID 即可选择真机调试。运行效果如下




小程序视频客服集成

我们提供了腾讯云联络中心小程序 SDK,方便您在微信小程序里集成视频客服功能。您可参考下面相关文档。

用户端 iOS 视频客服集成

如果您需要在您的 iOS 移动设备或者嵌入式集成视频客服,可参见下面步骤。

开发环境要求

Xcode 9.0+。
iOS 9.0 以上的 iPhone 或者 iPad 真机。
项目已配置有效的开发者签名。

集成 iOS SDK

方案一:使用 CocoaPods

1. 安装 CocoaPods
在终端窗口中输入如下命令(需要提前在 Mac 中安装 Ruby 环境):
sudo gem install cocoapods
2. 创建 Podfile 文件
进入项目所在路径,输入以下命令行之后项目路径下会出现一个 Podfile 文件。
pod init
3. 编辑 Podfile 文件
根据您的项目需要编辑 Podfile 文件:
platform :ios, '8.0'
target 'App' do
pod 'TCCCCloud_Ios', :podspec => 'https://tccc.qcloud.com/assets/doc/user/release/TCCCCloud_Ios.podspec'
end
4. 更新并安装 SDK
在终端窗口中输入如下命令以更新本地库文件,并安装 SDK:
pod install
或使用以下命令更新本地库版本:
pod update
pod 命令执行完后,会生成集成了 SDK 的 .xcworkspace 后缀的工程文件,双击打开即可。

方案二:手动下载

1. 下载最新版本 TCCC User SDK
2. 打开您的 Xcode 工程项目,选择要运行的 target , 选中 Build Phases 项。



3. 单击 Link Binary with Libraries 项展开,单击底下的“+”号图标去添加依赖库。



4. 依次添加下载的 TCCCCloud.FrameworkImSDK_CPP.frameworkTXFFmpeg.xcframeworkTXSoundTouch.xcframework 及其所需依赖库 GLKit.frameworkAssetsLibrary.frameworkSystemConfiguration.frameworklibsqlite3.0.tbdCoreTelephony.frameworkAVFoundation.frameworkOpenGLES.frameworkAccelerate.frameworkMetalKit.frameworklibresolv.tbdMobileCoreServices.frameworklibc++.tbdCoreMedia.framework。



5. 单击 General,选择 Frameworks,Libraries,and Embedded Content,检查 TCCCCloud.framework 所需要动态库 TXFFmpeg.xcframeworkTXSoundTouch.xcframeworkImSDK_CPP.framework 是否已经添加,是否正确选择选择 Embed & Sign,如果没有单击底下的“+”号图标依次添加。



6. 在工程 target 中 Build Settings 的 Other Linker Flags 增加 -ObjC 配置。




配置 App 权限

1. 如需使用 SDK 提供的音视频功能,需要给 App 授权麦克风的使用权限。在 App 的 Info.plist 中添加以下两项,分别对应麦克风在系统弹出授权对话框时的提示信息。选择Privacy - Microphone Usage Description、Privacy - Camera Usage Description,并填入麦克风、摄像头使用目的提示语。



2. 如需 App 进入后台仍然运行相关功能,可在 XCode 中选中当前工程项目,并在 Capabilities 下将设置项 Background Modes 设定为 ON,并勾选 Audio,AirPlay and Picture in Picture ,如下图所示:




代码实现

目前我们只提供了通过 C++ 接口,可以用下面代码引入头文件
// 引入C++头文件
#include "TCCCCloud/tccc/include/ITCCCCloud.h"
// 使用tccc命名空间
using namespace tccc;
// 获取tcccSDK 单例
ITCCCCloud* tcccSDK = getTCCCShareInstance();
// 获取SDK版本号
const char * version = tcccSDK->getSDKVersion();

iOS 音频客服集成相关文档

用户端 Android 视频客服集成

如果您需要在您的 Android 移动设备或者嵌入式集成视频客服,可参考下面步骤。

下载 SDK 和 TCCCSimpleDemo 源码

根据实际业务需求 tccc-user-android-example 源码。

配置 TCCCSimpleDemo 工程文件

1. 找到并打开 Debug/src/main/java/com/tencent/debug/GenerateTestUserSig.java 文件。
2. 设置 GenerateTestUserSig.java 文件中的相关参数:
VIDEO_CHANNELID:请设置为实际的 应用配置入口 APP ID。
SDKAPPID:请设置为实际的腾讯云联络中心 SDKAppID。
SECRETID:请设置为实际的密钥 ID 信息。
SECRETKEY:请设置为实际的密钥 Key 信息。



注意
本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETID、SECRETKEY,该方法中 SECRETID、SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通 TCCCSimpleDemo 和功能调试
正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 创建用户数据签名

编译运行

使用 Android Studio(3.5及以上的版本)打开源码工程 tccc-user-android-example,单击运行即可。

Android 运行效果

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






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

用户端 Android 音视频客服集成相关文档