snk-rt-video-pc

腾讯实时音视频PC端SDK

Usage no npm install needed!

<script type="module">
  import snkRtVideoPc from 'https://cdn.skypack.dev/snk-rt-video-pc';
</script>

README

webpack3 ie8

特殊说明，webpack支持IE8，但是框架中集成了stateMachine 和 RXJS库，这两个库并不支持IE8，但是支持IE9+

1.npm install

2.删除node_modules\babel-runtime\helpers\classCallCheck.js 的抛出异常的代码

// node_modules\babel-runtime\helpers\classCallCheck.js

"use strict";

exports.__esModule = true;

exports.default = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    // 不然打包报错
    // throw new TypeError("Cannot call a class as a function");
  }
};

运行

npm start

打包

npm run build

/src/entry/RtVideo.js

业务相关说明

一、主接口

引入方式

1、<script type="text/javascript" src="./snk-sse-0.1.0.js?a64d399f9a7fadbf7e21"></script>
2、import RtVideo from snk-rt-video-pc

二、相关初始化 new RtVideo()

相关初始化参数说明

参数名 参数类型 说明 参数是否必传
systemCode String 业务系统编码 是
account String 账号 是
profile String 连接视频环境选择-"dev"/"test" 可选
sseServerUrl Url 连接消息通知的URL，与profile必须任选一，外网环境必传 可选
videoServiceUrl Url 发送命令的URL，与profile必须任选一，外网环境必传 可选
stateServiceUrl Url 上报坐席状态的URL，与profile必须任选一，外网环境必传 可选
token String 为网络安全，如果有外网环境的需求，必传，其他环境不需要 可选
next function 初始化后，相关业务回调（如状态变化、来电通知） 是
error function 初始化后，相关错误回调 否
complete function 初始化后，相关回调 否

示例代码

<script>
function onLoad() {
      var rtVideo = new RtVideo({ systemCode: 'videoReview', profile: 'test', account: 'zhujiaqi@sinosafe.com.cn',
        // token: 'e94605b0d08f4531a3e065270ac4544c',
        // sseServerUrl: 'https://proxytest.sinosafe.com.cn/zzlp01//push-client/',
        // videoServiceUrl: 'https://proxytest.sinosafe.com.cn/zzlp01/rtv/',
        // stateServiceUrl: 'https://proxytest.sinosafe.com.cn/zzlp01/dispatch/',
      }, {
        next: function (event) { // 处理业务
          var Consts = RtVideo.Consts;
          if (event.type === Consts.VideoEventType.INCOMING_CALL) { // 用户来电会话ID
            sid = event.data.sid;
          } else if (event.type === Consts.VideoEventType.STATE_CHANGE) {  // 状态变化
            document.querySelector('#state').innerHTML = event.data.state;
          } else if (event.type === Consts.VideoEventType.EXCHANGE_CALL) { // 切换坐席请求
            document.querySelector('#state1').innerHTML = '切换坐席请求';
            sid = event.data.sid;
          }
        },
        error: function (e) { // 处理错误消息
          console.error(e);
        },
        complete: function () {

        }
      });
    }
</script>

三、rtVideo 提供的相关方法

方法API说明

方法名 方法说明 参数名 参数类型 参数说明 参数是否必传
state() 主动获取当前通话状态 无 无 无 无
rest() 在ready状态下，可以设置休息 无 无 无 无
back() 在rest状态下，可以由休息设置在线 无 无 无 无
answer() 应答通话 sid string 会话ID，在next回调中获得，一个通话拥有唯一的ID 是
refuse() 在通话未接通情况下，拒绝应答 sid string 会话ID，在next回调中获得，一个通话拥有唯一的ID 是
hangUp() 在通话已经接通情况下，挂断通话 sid string 会话ID，在next回调中获得，一个通话拥有唯一的ID 是
snapshot() 坐席端截图,一次调用，只是截图一个屏（流）的图片 type string 可选 "pusher" 或 "player" 是
reconnect() 可以使网页重新连接 EXE 无 无 无 无
askChangePerson() 主视频方主动发起切换人员请求 { sid: sid, newer: newer } JSON sid:当前会话id; newer: 被转接方账号 是
cancelChangePerson() 主视频方取消发起的切换请求 { sid: sid, newer: newer } JSON sid:当前会话id; newer: 被转接方账号 是
acceptChangePerson() 被切换方接受切换请求 { sid: sid } JSON sid:当前会话id 是
refuseChangePerson() 被切换方拒绝切换请求 { sid: sid } JSON sid:当前会话id 是
askAddPerson() 主视频方主动发起增加三方请求 { sid: sid, newer: newer } JSON sid:当前会话id; newer: 被增加方账号 是
cancelAddPerson() 主视频方主动取消增加三方请求 { sid: sid, newer: newer } JSON sid:当前会话id; newer: 被增加方账号 是
removeAddPerson() 已接通三方视频后，主视频方踢掉第三方 { sid: sid, newer: newer } JSON sid:当前会话id; newer: 被增加方账号 是
acceptAddPerson() 第三方接受三方视频请求 { sid: sid } JSON sid:当前会话id 是
refuseAddPerson() 第三方拒绝三方视频请求 { sid: sid } JSON sid:当前会话id 是
quitAddPerson() 已接通三方视频后，第三方操作退出 { sid: sid } JSON sid:当前会话id 是

示例代码

<script>
/*
  sid: 当前会话ID
  type: 截图类型， pusher推流 或player拉流
  obj: { sid: sid, newer: newer }
*/
  rtVideo.state()                             // 获取当前状态
  rtVideo.rest()                              // 休息
  rtVideo.back()                              // 休息返回
  rtVideo.answer(sid)                         // 接听
  rtVideo.refuse(sid)                         // 拒绝
  rtVideo.hangUp(sid)                         // 挂断
  rtVideo.snapshot(type)                      // 坐席端截图
  rtVideo.reconnect()                         // 当exe不小心关闭，重新呼起EXE无反应，调用后，网页重新连接exe
---------------------------------------------------------------------
  rtVideo.askChangePerson (obj)               // 切换坐席请求 
  rtVideo.cancelChangePerson(obj)             // 取消坐席请求
  rtVideo.acceptChangePerson (obj)            // 接受切换坐席请求
  rtVideo.refuseChangePerson (obj)            // 拒绝切换坐席请求
---------------------------------------------------------------------
  rtVideo.askAddPerson (obj)                  // 发起第三方请求
  rtVideo.cancelAddPerson(obj)                // 取消第三方请求
  rtVideo.removeAddPerson(obj)                // 移除第三方请求
  rtVideo.acceptAddPerson (obj)               // 接受第三方请求
  rtVideo.refuseAddPerson (obj)               // 拒绝第三方请求
  rtVideo.quitAddPerson (obj)                 // 主动退出第三方请求
</script>

四、回调函数相关

事件类型

type 说明 作用
INCOMING_CALL 来电事件 返回会话ID sid
RECOVERY_CALL 恢复来电事件 返回会话ID sid
INCOMING_CALL_HANGUP 用户挂断来电或会话结束 通知事件
VIDEOTAPE 视频录像 返回视频地址
SNAPSHOT 截图事件 返回图像的 base64
STATE_CHANGE 状态变化事件 返回当前状态state,具体相关状态可看下方“ 通话状态 ”说明
HTTP_BACK 转移通话、增加三方等事件 主要是操作失败后，相关提示信息，比如第三方正在通话中
EXE_ERROR 视频EXE事件 EXE报错事件
EXCHANGE_CALL 切换坐席通知 交互时收到切换通知
ADD_CALL 增加坐席通知 交互时收到增加通知 
/**
 * 业务端的事件类型
 */
const VideoEventType = {
  INCOMING_CALL: 'INCOMING_CALL',                // 来电事件
  RECOVERY_CALL: 'RECOVERY_CALL',                // 恢复来电事件
  INCOMING_CALL_HANGUP: 'INCOMING_CALL_HANGUP',  // 用户挂断来电或会话结束
  VIDEOTAPE: 'VIDEOTAPE',                        // 视频录像
  SNAPSHOT: 'SNAPSHOT',                          // 截图事件
  STATE_CHANGE: 'STATE_CHANGE',                  // 状态变化事件
  HTTP_BACK: 'HTTP_BACK',                        // http请求返回
  EXE_EVENT: 'EXE_EVENT',                        // exe异常事件
  EXCHANGE_CALL: 'EXCHANGE_CALL',                // 坐席切换请求
  ADD_CALL: 'ADD_CALL'                           // 坐席增加请求
}

通话状态(STATE_CHANGE事件或主动获取时返回的状态）

state 状态说明 状态
disconnected 未连接或初始化失败 异常
ready 初始化成功，可接听状态 准备就绪
leave 调用rest后的状态 离开
wait 当用户拨打后未接听状态 待接听
busy 正在通话状态 通话中
```
/**
  • 通话状态状态 */ const ServiceFsmState = { DISCONNECTED: 'disconnected', // 连接断开（致命异常） READY: 'ready', // 准备就绪 LEAVE: 'leave', // 离开、休息 WAIT: 'wait', // 待接听 BUSY: 'busy' // 通话中 }

#### 相关事件码（事件码说明）
msgType | 所属事件 | 说明
---|---|---
50200 | INCOMING_CALL       | 客户端来电
50203 | VIDEOTAPE           | 视频录制资源
30000 | INCOMING_CALL_HANGUP| 会话结束
30019 | INCOMING_CALL_HANGUP| 用户离线
20100 | EXCHANGE_CALL       | 切换坐席请求
20101 | EXCHANGE_CALL       | 接受切换请求
20102 | EXCHANGE_CALL       | 拒绝切换请求
20103 | EXCHANGE_CALL       | 取消切换请求
20200 | ADD_CALL            | 第三方增加请求
20201 | ADD_CALL            | 第三方座席接听
20202 | ADD_CALL            | 第三方座席拒绝
20203 | ADD_CALL            | 第三方座席退出
20204 | ADD_CALL            | 第三方座席取消
100025| HTTP_BACK           | 操作失败，该会话已经结束
200001| HTTP_BACK           | 操作失败，服务受理失败
200002| HTTP_BACK           | 操作失败，服务受理超时
300001| HTTP_BACK           | 操作失败，从调度系统获取坐席失败
300002| HTTP_BACK           | 操作失败，向调度系统拒接任务失败
300003| HTTP_BACK           | 操作失败，坐席忙线
400001| HTTP_BACK           | 操作失败，正在切换坐席中
400002| HTTP_BACK           | 操作失败，不能切换给自己
400003| HTTP_BACK           | 操作失败，正在等待被切换方应答
400004| HTTP_BACK           | 操作失败（未启用）
400005| HTTP_BACK           | 操作失败，对方已受理切换请求取消失败
400006| HTTP_BACK           | 操作失败，受理超时或被请求方取消
500001| HTTP_BACK           | 操作失败

/**

  • 视频信令命令码 */ const VideoControlCode = { INCOMING_CALL: 50200, // 客户端推拉流资源 USER_INTERRUPT : 30017, // 用户挂断 USER_OFF_LINE: 30019, // 用户离线 AUTO_END_SESSION: 30000, // 会话自动结束 STAFF_CHANGE_ASK: 20100, // 坐席切换请求 STAFF_CHANGE_CALL_BACK_ACCEPT: 20101, // 收到接受切换回复 STAFF_CHANGE_CALL_BACK_REJECT: 20102, // 收到拒绝切换回复 STAFF_CHANGE_CALL_BACK_CANCEL: 20103, // 被切换方收到坐席取消切换 STAFF_CHANGE_LIVE_SRC: 50201, // 坐席切换受理结果推拉流资源 PARTICIPATOR_LIVE_SRC: 50202, // 添加第三方受理结果推拉流资源 VIDEO_REC_SRC: 50203, // 视频录制资源 IMG_SRC: 50204, // 平台转发微信小程序侧上传的图片的信息给接入系统 END_SESSION: 30025, // 会话结束 ADDPARTICIPATOR_ASK: 20200, // 添加第三方坐席请求 ADDPARTICIPATOR_CALL_BACK_ACCEPT: 20201, // 第三方座席接听 ADDPARTICIPATOR_CALL_BACK_REJECT: 20202, // 第三方座席拒绝 ADDPARTICIPATOR_DEL: 20203, // 第三方座席退出 ADDPARTICIPATOR_CANCEL: 20204, // 第三方收到主坐席取消 }