视频客服

仅支持 2.1.3 或 1.x

= 2.2.0 版本暂不支持

小程序管理后台配置

在【开发管理】-【开发设置】-【服务器域名】中，添加 request 合法域名

https://at.alicdn.com;https://nrtc.netease.im;https://qiyukf.com;https://qiyukf.netease.com;https://qytest.netease.com;https://res.qiyukf.net;https://statistic.live.126.net;https://webrtcgwcn.netease.im;https://webrtcgwhz.netease.im;

在【开发管理】-【开发设置】-【服务器域名】中，添加 socket 合法域名

wss://webrtcgwcn.netease.im;wss://webrtcgwhz.netease.im;

在【设置】-【基本设置】-【基本信息】-【服务类目】中，确认小程序类目为下列类目之一，或者为工具 - 视频客服

在【开发管理】-【接口设置】中开通双人音视频通话、实时播放音视频流、实时录制音视频流接口

在【设置】-【基本设置】-【功能设置】-【用户隐私保护指引设置】-【开发者处理的信息】中，允许访问摄像头和麦克风

引入视频客服小程序代码包

点击下载视频客服小程序代码包，解压后将文件夹命名为 videoChat，并拷贝到与小程序 app.js 文件同级的位置。videoChat/index.js 为视频客服对象，videoChat/components/video-chat 为视频客服组件

// app.json
{
  "plugins": {
    // 七鱼小程序插件
    "myPlugin": {
      "version": "2.1.3", // 仅支持 2.1.3 或 1.x
      "provider": "wxae5e29812005203f"
    }
  }
}

在 app.js 中，引入视频客服对象

// app.js
// 【新增代码】引入视频客服对象
import videoChat from 'path/to/videoChat/index'

// 引入七鱼小程序插件
const myPluginInterface = requirePlugin('myPlugin');

// 【新增代码】将视频客服对象传入七鱼小程序插件
myPluginInterface._$setVideoChat(videoChat);

创建在线会话页面

基于七鱼小程序插件提供的 SessionChat 组件和视频客服代码包提供的 video-chat 组件，创建一个在线会话页面，注册到 app.json 中

SessionChat 组件支持的参数如下：

名称	类型	必填	说明
extraProps	`{ spkf: number }`	否	如果 spkf 值为 1，则页面加载后会向坐席发起视频邀请，否则只加载在线会话界面

// 注册组件，页面 json 文件
{
  "usingComponents": {
    "session-chat": "plugin://myPlugin/SessionChat",
    "video-chat": "path/to/videoChat/components/video-chat/index"
  }
}

<!-- 页面wxml文件 -->
<view>
  <!-- 获取到页面参数spkf前，不加载session-chat组件 -->
  <session-chat wx:if="{{extraProps}}" extraProps="{{extraProps}}" />
  <video-chat />
</view>

// 页面 js 文件
import videoChat from 'path/to/videoChat/index';

Page({
  data: {
    extraProps: null
  },
  onLoad() {
    this.setData({
      extraProps: {
        // 根据页面参数 spkf 判断访客是否主动发起视频
        spkf: Number(this.options.spkf)
      }
    })
  },
  onHide() {
    // 页面隐藏，会根据通话状态进行挂断通话等操作
    videoChat.handlePageHide();
  },
  onUnload() {
    // 页面卸载，会根据通话状态进行挂断通话等操作
    videoChat.handlePageUnload();
  }
})

以上为在微信小程序主包中使用视频客服的示例，更推荐在分包中使用视频客服，详见 Demo

视频客服插件API

插件方法

设置wx对象

setWX(wx: wx):void;

参数说明：
wx：微信小程序wx对象

获取是否支持音视频通话

getAvailable():{ support: boolean, reason: -1 ｜ 1｜ 2 };

返回值说明：
support：是否支持音视频通话
reason：不支持音视频通话的原因，-1为默认值，1为微信小程序基础库不支持，2为小程序运行的平台不支持（如在PC端运行小程序）

处理页面隐藏

handlePageHide():void;

会根据通话状态进行挂断通话等操作

处理页面卸载

handlePageUnload():void;

会根据通话状态进行挂断通话等操作

挂断视频通话

hangup():void;

展示toast

showToast(toast: string):void;

参数说明：
toast：提示文字

视频通话预约

小程序调用接口绑定

目前接入视频客服是通过小程序 SDK 的方式进行接入，当使用视频通话预约功能时，为了系统顺利的唤起您的小程序，需要您提供调用 URL。七鱼会向您提供的 URL 请求 body 中推送如下消息内容

请前往七鱼管理后台 - 在线客服 - 视频客服设置 - 小程序调用接口绑定

{
  "bundleId": "Wderqe", // 小程序的 APPID，可在在线接入-小程序接入中查看 APPID,根据 APPID 指定用来生成二维码和链接的小程序
  "type": 1, // 1：表示获取小程序二维码，2：表示获取小程序H5链接
  "r": 123456, // 预约id，需要在生成小程序二维码或链接里面带入
  "spkf": 1, // 标识发起视频客服
  "expireTime": 123457680 // 超时时间戳，小程序链接生成时需要指定链接的超时时间
}

为保证接口安全，需要进行签名校验，在推送消息内容的同时，会在参数中携带 time 和 checksum 参数用于进行签名校验

名称	类型	说明
time	number	当前UTC时间戳，从1970年1月1日0点0分0秒开始到现在的秒数
checksum	string	SHA1(appSecret + md5 + time), 三个参数拼接的字符串，进行SHA1哈希计算，转化成16进制字符(String，小写)

生成小程序二维码的 scene 参数拼接如下：

spkf=1&r=123455

生成小程序链接的 query 参数拼接如下：

spkf=1&r=123455