视频回溯 packBack-sdk 使用指南

使用方式

方式1：npm 安装

npm i pageback-sdk

import Pageback from "pageback-sdk";

const pageBack = new Pageback();
Vue.prototype.$pageBack = pageBack;

方式2：CDN

CDN 下载地址为： pageback-sdk， 可选择对应版本使用或下载

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>

接口说明

initRecord(options)

能通过pageBackSDK.initRecord(options)初始化回溯参数，Promise 接口

参数options：

| 名称 | 类型 | 可选 | 默认值 | 描述 | | -------------- | ------ | ---- | ------ | ------------------------------------ | | initUrl | string | 否 | | 回溯生成全局唯一序列号的接口地址 | | confirmUrl | string | 否 | | 回溯结束视频上报的接口地址 | | saveUrl | string | 否 | | 回溯实时上传视频的接口地址 |

示例：

this.$pageBack.initRecord({
  initUrl: "http://test.com/ltapp/rrv/v/vbtrack/get_snowflake_id",
  confirmUrl: "http://test.com/ltapp/rrv/v/vbtrack/up_trace",
  saveUrl: "http://test.com/ltapp/rrv/v/vbtrack/up_video"
});

注：若需要获取当前实例信息，可在执行 initRecord 之后从实例pageBack中按需获取，实例属性包含以下内容

| 名称 | 描述 | | -------------- | ------------------------------------ | | tractId | 视频回溯序列号 | | index | 视频节点序号 | | firstStartTime | 视频流程开始时间 | | emitData | 当前内存中保存的采集数据 |

示例：

this.$pageBack.initRecord({
  initUrl: "http://test.com/ltapp/rrv/v/vbtrack/get_snowflake_id",
  confirmUrl: "http://test.com/ltapp/rrv/v/vbtrack/up_trace",
  saveUrl: "http://test.com/ltapp/rrv/v/vbtrack/up_video"
}).then(() => {
  console.log('tractId', this.$pageBack.tractId)
});

startRecord(options)

能通过packBack.startRecord(options) 开启回溯，Promise 接口

参数options：

| 名称 | 类型 | 可选 | 默认值 | 描述 | | ----------------- | ------ | ---- | ------------ | ---------------------------------------------------------------------------------------------- | | page_id | string | 是 | '' | 页面id，默认 '' | | page_name | string | 是 | '' | 页面名称，默认 '' | | thresholdSize | number | 是 | 512*1024 | 实时上报字符数量阈值，number类型，默认 512*1024，上限 3 M | | recordConfig | object | 是 | | 录制配置参数，具体见下方 recordConfig 参数参考 |

recordConfig 参数参考

| key | 默认项 | 功能 | | --- | --- | --- | | isPack | false | 是否开启单数据压缩 | | blockClass | 'rr-block' | 字符串或正则表达式，可用于自定义屏蔽元素的类名 | | blockSelector | null | 字符串或正则表达式，可用于自定义屏蔽元素的类名 | | maskTextClass | 'rr-mask' | 字符串或正则表达式，可用于自定义忽略元素 text 内容的类名 | | maskTextSelector | null | null 所有 element.matches(maskTextSelector)为 true 的元素及其子元素的 text 内容将会被屏蔽 | | maskAllInputs | false | 将所有输入内容记录为 * | | recordCanvas | false | 是否记录 canvas 内容, 可用选项：false, true | | assetsUrl | null | 静态资源服务地址。通过该参数可以将项目内图片、css资源路径改写成指定的静态资源服务地址 | | assetsVersion | null | 静态资源服务资源路径。通过该参数可以将项目内图片、css资源路径改写成指定的静态资源服务地址 | | assetsReplace | [] | 参数类型 {origin: string; target: string}[] 。静态资源路径替换。例如：当配置参数如下：[{origin:"http://www.aaa.com",target:"http://www.bbb.com"}],会将录制页面中域名为http://www.aaa.com 的图片替换成 http://www.bbb.com ,最终回放界面以http://www.bbb.com 的资源进行回放 |

更多录制参数参见：rrweb 配置参数

示例：

this.$pageBack.startRecord({
  page_id: "0001",
  page_name: "测试1",
  thresholdSize: 512,
  recordConfig: {
    inlineStylesheet: true,
    recordCanvas: true,
    sampling: {
      canvas: 10,
    },
    // 图像的格式
    dataURLOptions: {
      type: 'image/webp',
      quality: 0.6,
    },
    blockClass: "vc-panel"
  }
});

stopRecord(type, bizInfo)

能通过packBack.stopRecord暂停或结束回溯，Promise 接口

参数：

| 名称 | 类型 | 可选 | 默认值 | 描述 | | ----------- | ------ | ---- | ------ | -------------------------------------------------------- | | type | number | 是 | 0 | 停止录制类型。0:暂停录制，1:结束录制 | | bizInfo | object | 否 | '' | 回溯流程标记相关参数，暂停录制时可不填，结束录制必选 |

bizInfo

| 名称 | 类型 | 可选 | 默认值 | 描述 | | ------------------- | ------ | ---- | ------ | ---------------------------------------------- | | biz_no | string | 否 | | 流程号，必传，必须在平台存在，否则无法上报 | | sdk_version | string | 否 | | sdk版本 | | product_id | string | 是 | | 产品id | | product_name | string | 是 | | 产品名 | | product_version | string | 是 | | 产品版本 |

示例：

this.$pageBack.stopRecord(1, {
  biz_no: "LC0001", // 流程号
  sdk_version: "0.0.1", // sdk版本
  product_id: "index-A", // 产品id
  product_name: "测试demopdf", // 产品名
  product_version: "0.1.1", // 产品版本
});