用途
Velt Recorder 最佳实践是一份针对 Velt Recorder 系统的综合实现指南，适用于 React 和 Next.js 应用。它包含 25 条规则，分布在 8 个类别中，按影响程度排序，用于指导自动化代码生成和集成模式。
何时适用
在以下场景中参考这些指南：
- 为 React/Next.js 应用添加音频、视频或屏幕录制功能
- 设置 VeltRecorderTool、VeltRecorderControlPanel 和 VeltRecorderPlayer
- 配置 VeltRecorderNotes 用于固定录制
- 集成 VeltVideoEditor 进行录制后编辑
- 配置录制质量约束和编码选项
- 请求设备权限（摄像头、麦克风、屏幕）
- 订阅录制生命周期事件
- 管理录制数据（获取、订阅、删除、下载）
- 启用 AI 转录和摘要显示
- 为屏幕录制配置画中画模式
- 设置最大录制时长限制
- 在浮动和线程控制面板模式之间选择
- 使用模板变量（velt-data、velt-if、velt-class）绑定 Recorder 线框插槽
规则类别与优先级
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 核心设置 | 关键 | core- |
| 2 | 录制配置 | 高 | config- |
| 3 | 数据管理 | 高 | data- |
| 4 | 事件处理 | 中高 | events- |
| 5 | 视频编辑器 | 中 | editor- |
| 6 | UI/UX 配置 | 中 | ui- |
| 7 | 调试与测试 | 低中 | debug- |
| 8 | 线框变量 | 中 | wireframe-variables- |
快速参考
1. 核心设置（关键）
- core-setup — 添加 VeltRecorderTool、VeltRecorderControlPanel 和 VeltRecorderPlayer
- core-permissions — 请求摄像头、麦克风和屏幕捕获的设备权限
- core-webhooks — 处理 recorder.done 服务端 webhook 事件（RecorderPayload、RecorderTrigger）
2. 录制配置（高）
- config-type-and-mode — 选择录制类型（all、audio、video、screen）并自定义工具按钮
- config-max-length — 设置最大录制时长
- config-picture-in-picture — 为屏幕录制启用画中画（仅 Chrome）
- config-quality-encoding — 配置录制质量约束和编码选项
3. 数据管理（高）
- data-hooks — 使用 React hooks（useRecordings、useRecorderAddHandler）实现响应式数据
- data-fetch-subscribe — 通过 API 获取或订阅录制数据
- data-delete-download — 删除录制并下载最新视频版本
- data-rest-api — 通过 REST API 检索录制（服务端，支持分页）
4. 事件处理（中高）
- events-lifecycle — 通过 API 订阅全部 11 个录制事件
- events-hooks — 使用 useRecorderEventCallback hook 进行 React 事件订阅
5. 视频编辑器（中）
- editor-enable-configure — 启用视频编辑器，支持自动打开、重拍、时间线预览
- editor-standalone — 嵌入独立的 VeltVideoEditor 组件
6. UI/UX 配置（中）
- ui-control-panel-mode — 为 VeltRecorderControlPanel 选择浮动或线程模式
- ui-playback-options — 配置全屏播放和点击播放行为
- ui-countdown-settings — 控制倒计时计时器和嵌入式设置
- ui-ai-transcription — 配置 AI 转录和摘要显示
7. 调试与测试（低中）
- debug-common-issues — 常见录制器问题及解决方案
8. 线框变量（中）
- wireframe-variables-recorder — 使用 velt-data / velt-if / velt-class 绑定 Recorder 线框插槽（按钮、固定、控制面板、播放器、展开播放器）；涵盖六个命名冲突变量和共享播放器行为回调
- wireframe-variables-recorder-transcription — 使用 componentConfig.<name> 路径绑定 Transcription、Subtitles 和 Subtitles-Dialog 线框插槽；涵盖通过 content-item-wireframe 迭代 vttFileTextArray、segment / currentTime 上下文变量以及 transcript / subtitle 行为回调
如何使用
阅读各个规则文件以获取详细说明和代码示例：
- rules/shared/core/core-setup.md
- rules/shared/config/config-type-and-mode.md
每个规则文件包含：
- 为什么重要的简要说明
- 带有解释的错误代码示例
- 带有解释的正确代码示例
- 指向官方文档的来源指针
编译文档
- AGENTS.md — 所有规则的压缩索引及文件路径（从这里开始）
- AGENTS.full.md — 完整详细指南，所有规则内联展开
限制
资料中未提供关于收费、价格、平台支持范围（除画中画仅 Chrome 外）、具体效果或使用步骤的更多信息。