@ts-org/recorder-vue2 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +133 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
# @ts-org/recorder-vue2
|
|
2
|
+
|
|
3
|
+
基于 [rrweb](https://github.com/rrweb-io/rrweb) `2.2.0` + rrweb-player `2.2.0` 的 **Vue 2** H5 录屏 / 回放组件（Vue 2.6.10+ / 2.7）。支持分片 gzip 压缩、阿里云 OSS（STS）直传、失败重传、关页面后补传。
|
|
4
|
+
|
|
5
|
+
Vue 3 请使用 [`@ts-org/recorder`](https://www.npmjs.com/package/@ts-org/recorder)。
|
|
6
|
+
|
|
7
|
+
## 安装
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm i @ts-org/recorder-vue2
|
|
11
|
+
# 需要上传到 OSS 时
|
|
12
|
+
npm i ali-oss@6
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## 选择入口（webpack）
|
|
16
|
+
|
|
17
|
+
rrweb 2.x 的 dist 含 `??` 语法，所以提供两个入口：
|
|
18
|
+
|
|
19
|
+
| 入口 | rrweb | 语法 | 适用 |
|
|
20
|
+
| --- | --- | --- | --- |
|
|
21
|
+
| `@ts-org/recorder-vue2` | 外部化，从 `node_modules` 解析 | 本库 ES2015，rrweb 为 ES2020 | webpack 5，且目标机器支持 ES2020 |
|
|
22
|
+
| `@ts-org/recorder-vue2/legacy` | 打进产物 | 全部 ES2015 | webpack 4（Vue CLI 3/4）、旧 WebView |
|
|
23
|
+
|
|
24
|
+
webpack 5 需要兼容旧 WebView（Chrome < 80 / iOS < 13.4）时，可在 `vue.config.js` 加 `transpileDependencies: ['rrweb', 'rrweb-player', /@rrweb/, 'rrweb-snapshot']`，或直接用 `/legacy`。
|
|
25
|
+
|
|
26
|
+
不想改 import 时可以 alias（两个入口不要混用，否则会打进两份 rrweb）：
|
|
27
|
+
|
|
28
|
+
```js
|
|
29
|
+
// vue.config.js
|
|
30
|
+
module.exports = {
|
|
31
|
+
configureWebpack: {
|
|
32
|
+
resolve: { alias: { '@ts-org/recorder-vue2$': '@ts-org/recorder-vue2/legacy' } },
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
`vue` 始终外部化，CSS 已内联进 JS，无需额外 loader。
|
|
38
|
+
|
|
39
|
+
## 录制与回放
|
|
40
|
+
|
|
41
|
+
```js
|
|
42
|
+
import Vue from 'vue';
|
|
43
|
+
import RecordPlay from '@ts-org/recorder-vue2/legacy';
|
|
44
|
+
|
|
45
|
+
Vue.use(RecordPlay); // 全局注册 ScreenRecorder / ScreenPlayer，也可按需引入
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
```vue
|
|
49
|
+
<template>
|
|
50
|
+
<div>
|
|
51
|
+
<ScreenRecorder :record-options="{ maskAllInputs: true, blockClass: 'rr-block' }" @stop="onStop">
|
|
52
|
+
<template #default="{ recording, start, stop }">
|
|
53
|
+
<button :disabled="recording" @click="start()">开始录制</button>
|
|
54
|
+
<button :disabled="!recording" @click="stop()">停止录制</button>
|
|
55
|
+
</template>
|
|
56
|
+
</ScreenRecorder>
|
|
57
|
+
|
|
58
|
+
<ScreenPlayer v-if="hasEvents" :events="playbackEvents" />
|
|
59
|
+
</div>
|
|
60
|
+
</template>
|
|
61
|
+
|
|
62
|
+
<script>
|
|
63
|
+
import { ScreenPlayer, ScreenRecorder } from '@ts-org/recorder-vue2/legacy';
|
|
64
|
+
|
|
65
|
+
export default {
|
|
66
|
+
components: { ScreenPlayer, ScreenRecorder },
|
|
67
|
+
data() {
|
|
68
|
+
return { hasEvents: false };
|
|
69
|
+
},
|
|
70
|
+
created() {
|
|
71
|
+
this.playbackEvents = []; // 非响应式字段，避免 Vue 2 深度观察大数组
|
|
72
|
+
},
|
|
73
|
+
methods: {
|
|
74
|
+
onStop(payload) {
|
|
75
|
+
this.playbackEvents = Object.freeze(payload.events.slice());
|
|
76
|
+
this.hasEvents = true;
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
</script>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## 上传到 OSS
|
|
84
|
+
|
|
85
|
+
每个分片：写入 IndexedDB → gzip → ali-oss 直传 → 成功后删除本地。默认每 30 秒或切后台 / 关页面时落盘一次，每 5 分钟打一个全量快照；失败指数退避重试，下次打开页面补传遗留分片。
|
|
86
|
+
|
|
87
|
+
```js
|
|
88
|
+
// upload.js —— 应用级单例
|
|
89
|
+
import OSS from 'ali-oss';
|
|
90
|
+
import { createUploadQueue, createAliOssUploader, createSessionIndexReporter } from '@ts-org/recorder-vue2/legacy';
|
|
91
|
+
|
|
92
|
+
export const uploadQueue = createUploadQueue({
|
|
93
|
+
upload: createAliOssUploader({
|
|
94
|
+
OSS,
|
|
95
|
+
// 后台返回 STS 临时凭证：{ accessKeyId, accessKeySecret, stsToken, bucket, region, expiration, prefix? }
|
|
96
|
+
getCredentials: () => api.getOssSts(),
|
|
97
|
+
// 可选：上传成功后把分片索引上报到录屏服务，供管理端按平台 / 用户 / 时间筛选回放
|
|
98
|
+
afterUpload: createSessionIndexReporter({
|
|
99
|
+
endpoint: 'https://record.example.com/api/ingest',
|
|
100
|
+
platform: 'erp',
|
|
101
|
+
token: process.env.VUE_APP_RECORD_INGEST_TOKEN,
|
|
102
|
+
}),
|
|
103
|
+
}),
|
|
104
|
+
onDropped: (chunk, reason) => console.warn('录屏分片被丢弃', chunk.id, reason),
|
|
105
|
+
});
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
```vue
|
|
109
|
+
<ScreenRecorder
|
|
110
|
+
:upload-queue="uploadQueue"
|
|
111
|
+
:upload-meta="() => ({ username, memberId, page: $route.path })"
|
|
112
|
+
:keep-events="false"
|
|
113
|
+
auto-start
|
|
114
|
+
/>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
自行回放 OSS 上的分片：
|
|
118
|
+
|
|
119
|
+
```js
|
|
120
|
+
import { loadSessionEvents } from '@ts-org/recorder-vue2/legacy';
|
|
121
|
+
const { events, failed } = await loadSessionEvents(signedUrls); // 自动解压、排序
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
## 安全
|
|
125
|
+
|
|
126
|
+
- 浏览器端只下发 **STS 临时凭证**，RAM Policy 只授予 `oss:PutObject`，Resource 限制到 `bucket/prefix/*`。
|
|
127
|
+
- Bucket CORS：AllowedOrigin 填业务域名，AllowedMethod 至少 `PUT`（回放还需 `GET`），ExposeHeader `ETag`。
|
|
128
|
+
- 默认建议 `maskAllInputs: true`，敏感区域加 `rr-block` 类名；用户退出登录时调用 `uploadQueue.clear()`。
|
|
129
|
+
|
|
130
|
+
## 限制
|
|
131
|
+
|
|
132
|
+
- 仅浏览器端工作，SSR 下不执行。
|
|
133
|
+
- 同一页面只支持一个 recorder。
|