@ts-org/recorder 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 +104 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# @ts-org/recorder
|
|
2
|
+
|
|
3
|
+
基于 [rrweb](https://github.com/rrweb-io/rrweb) `2.2.0` + rrweb-player `2.2.0` 的 **Vue 3** H5 录屏 / 回放组件，自带 TypeScript 类型。支持分片 gzip 压缩、阿里云 OSS（STS）直传、失败重传、关页面后补传。
|
|
4
|
+
|
|
5
|
+
Vue 2 请使用 [`@ts-org/recorder-vue2`](https://www.npmjs.com/package/@ts-org/recorder-vue2)。
|
|
6
|
+
|
|
7
|
+
## 安装
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @ts-org/recorder
|
|
11
|
+
# 需要上传到 OSS 时
|
|
12
|
+
pnpm add ali-oss@6
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
要求 `vue >= 3.4`。
|
|
16
|
+
|
|
17
|
+
## 录制与回放
|
|
18
|
+
|
|
19
|
+
```ts
|
|
20
|
+
import { createApp } from 'vue';
|
|
21
|
+
import RecordPlay from '@ts-org/recorder';
|
|
22
|
+
import App from './App.vue';
|
|
23
|
+
|
|
24
|
+
createApp(App).use(RecordPlay); // 全局注册 ScreenRecorder / ScreenPlayer，也可按需引入
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
```vue
|
|
28
|
+
<script setup lang="ts">
|
|
29
|
+
import { shallowRef } from 'vue';
|
|
30
|
+
import { ScreenPlayer, ScreenRecorder } from '@ts-org/recorder';
|
|
31
|
+
import type { RecorderStopPayload, eventWithTime } from '@ts-org/recorder';
|
|
32
|
+
|
|
33
|
+
const events = shallowRef<eventWithTime[]>([]);
|
|
34
|
+
|
|
35
|
+
function onStop(payload: RecorderStopPayload) {
|
|
36
|
+
events.value = payload.events.slice();
|
|
37
|
+
}
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<template>
|
|
41
|
+
<ScreenRecorder :record-options="{ maskAllInputs: true, blockClass: 'rr-block' }" @stop="onStop">
|
|
42
|
+
<template #default="{ recording, start, stop }">
|
|
43
|
+
<button :disabled="recording" @click="start()">开始录制</button>
|
|
44
|
+
<button :disabled="!recording" @click="stop()">停止录制</button>
|
|
45
|
+
</template>
|
|
46
|
+
</ScreenRecorder>
|
|
47
|
+
|
|
48
|
+
<ScreenPlayer :events="events" />
|
|
49
|
+
</template>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
事件数组请用 `shallowRef`，不要放进深层响应式。
|
|
53
|
+
|
|
54
|
+
## 上传到 OSS
|
|
55
|
+
|
|
56
|
+
每个分片：写入 IndexedDB → gzip → ali-oss 直传 → 成功后删除本地。默认每 30 秒或切后台 / 关页面时落盘一次，每 5 分钟打一个全量快照；失败指数退避重试，下次打开页面补传遗留分片。
|
|
57
|
+
|
|
58
|
+
```ts
|
|
59
|
+
// upload.ts —— 应用级单例
|
|
60
|
+
import OSS from 'ali-oss';
|
|
61
|
+
import { createUploadQueue, createAliOssUploader, createSessionIndexReporter } from '@ts-org/recorder';
|
|
62
|
+
|
|
63
|
+
export const uploadQueue = createUploadQueue({
|
|
64
|
+
upload: createAliOssUploader({
|
|
65
|
+
OSS,
|
|
66
|
+
// 后台返回 STS 临时凭证：{ accessKeyId, accessKeySecret, stsToken, bucket, region, expiration, prefix? }
|
|
67
|
+
getCredentials: () => api.getOssSts(),
|
|
68
|
+
// 可选：上传成功后把分片索引上报到录屏服务，供管理端按平台 / 用户 / 时间筛选回放
|
|
69
|
+
afterUpload: createSessionIndexReporter({
|
|
70
|
+
endpoint: 'https://record.example.com/api/ingest',
|
|
71
|
+
platform: 'mall',
|
|
72
|
+
token: import.meta.env.VITE_RECORD_INGEST_TOKEN,
|
|
73
|
+
}),
|
|
74
|
+
}),
|
|
75
|
+
onDropped: (chunk, reason) => console.warn('录屏分片被丢弃', chunk.id, reason),
|
|
76
|
+
});
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
```vue
|
|
80
|
+
<ScreenRecorder
|
|
81
|
+
:upload-queue="uploadQueue"
|
|
82
|
+
:upload-meta="() => ({ username, memberId, page: route.path })"
|
|
83
|
+
:keep-events="false"
|
|
84
|
+
auto-start
|
|
85
|
+
/>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
自行回放 OSS 上的分片：
|
|
89
|
+
|
|
90
|
+
```ts
|
|
91
|
+
import { loadSessionEvents } from '@ts-org/recorder';
|
|
92
|
+
const { events, failed } = await loadSessionEvents(signedUrls); // 自动解压、排序
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## 安全
|
|
96
|
+
|
|
97
|
+
- 浏览器端只下发 **STS 临时凭证**，RAM Policy 只授予 `oss:PutObject`，Resource 限制到 `bucket/prefix/*`。
|
|
98
|
+
- Bucket CORS：AllowedOrigin 填业务域名，AllowedMethod 至少 `PUT`（回放还需 `GET`），ExposeHeader `ETag`。
|
|
99
|
+
- 默认建议 `maskAllInputs: true`，敏感区域加 `rr-block` 类名；用户退出登录时调用 `uploadQueue.clear()`。
|
|
100
|
+
|
|
101
|
+
## 限制
|
|
102
|
+
|
|
103
|
+
- 仅浏览器端工作，SSR 下不执行。
|
|
104
|
+
- 同一页面只支持一个 recorder。
|