# 视频回溯 packBack-sdk 使用指南

## 使用方式

### 方式1：npm 安装

```
npm i pageback-sdk
```

```js
import Pageback from "pageback-sdk";

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

### 方式2：CDN

CDN 下载地址为： [pageback-sdk](https://www.jsdelivr.com/package/npm/pageback-sdk)， 可选择对应版本使用或下载
```html
    <script src="https://cdn.jsdelivr.net/npm/pageback-sdk@1.0.0/dist/index.umd.js"></script>
```

## 接口说明

###  initRecord(options)

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

**参数options：**

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


示例：
```js
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` | 当前内存中保存的采集数据 |

示例：
```js
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 配置参数](https://github.com/rrweb-io/rrweb/blob/master/guide.zh_CN.md#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0)

示例：
```js
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 | 是   |        | 产品版本                                |

示例：
```js
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", // 产品版本
});
```