recording

Name: recording
Author: MatrixReligio

37stars7forks

How to install recording?

matrixreligio/productvideocreator/recording

$npx -y skills add MatrixReligio/ProductVideoCreator --skill recording

Installs into the current project.

Summary

使用 Playwright 进行浏览器自动化录屏。当需要录制 Web 应用操作演示、生成带时间线的屏幕录像时使用。

Files · 1

View on GitHub

SKILL.md

1	# 浏览器录屏技能
2
3	## 核心要求
4
5	1. 单次连续录制 - 不要分段录制
6	2. 记录时间线 - 每个操作的精确时间戳
7	3. 真实数据 - 使用真实或有意义的测试数据
8	4. 适当节奏 - 留足够时间让画面呈现
9
10	## 录屏脚本结构
11
12	```javascript
13	const { chromium } = require("playwright");
14	const path = require("path");
15	const fs = require("fs/promises");
16
17	const BASE_URL = "http://localhost:5173";
18	const OUTPUT_DIR = path.join(__dirname, "..", "public", "recordings");
19	const VIEWPORT = { width: 1920, height: 1080 };
20
21	// 测试数据 - 使用真实有意义的数据
22	const TEST_DATA = {
23	// 定义测试数据
24	};
25
26	// 时间线记录器 - 关键组件
27	class TimelineRecorder {
28	constructor() {
29	this.startTime = Date.now();
30	this.events = [];
31	}
32
33	mark(event) {
34	const elapsed = (Date.now() - this.startTime) / 1000;
35	this.events.push({ time: elapsed, event });
36	console.log(` [${elapsed.toFixed(1)}s] ${event}`);
37	return elapsed;
38	}
39
40	getTimeline() {
41	return this.events;
42	}
43	}
44
45	async function recordDemo() {
46	await fs.mkdir(OUTPUT_DIR, { recursive: true });
47
48	const browser = await chromium.launch({
49	headless: false,
50	slowMo: 50, // 稍微放慢操作，更自然
51	});
52
53	const context = await browser.newContext({
54	viewport: VIEWPORT,
55	recordVideo: {
56	dir: OUTPUT_DIR,
57	size: VIEWPORT,
58	},
59	locale: "zh-CN",
60	});
61
62	const page = await context.newPage();
63	const timeline = new TimelineRecorder();
64
65	try {
66	// 场景录制...
67
68	} finally {
69	// 保存时间线
70	const timelineData = {
71	totalDuration: (Date.now() - timeline.startTime) / 1000,
72	events: timeline.getTimeline(),
73	};
74
75	await fs.writeFile(
76	path.join(OUTPUT_DIR, "timeline.json"),
77	JSON.stringify(timelineData, null, 2)
78	);
79
80	await page.close();
81	await context.close();
82	await browser.close();
83	}
84	}
85	```
86
87	## 录屏最佳实践
88
89	### 1. 等待时间设置
90
91	```javascript
92	// 页面加载后等待
93	await page.goto(url, { waitUntil: "networkidle" });
94	await page.waitForTimeout(1500);
95
96	// 点击后等待响应
97	await element.click();
98	await page.waitForTimeout(2000);
99
100	// 表单输入后等待
101	await input.fill(value);
102	await page.waitForTimeout(500);
103
104	// 弹窗打开后等待
105	await dialog.waitFor({ state: "visible" });
106	await page.waitForTimeout(1500);
107	```
108
109	### 2. 操作节奏
110
111	\| 操作类型 \| 建议等待时间 \|
112	\|----------\|--------------\|
113	\| 页面加载 \| 1.5-3 秒 \|
114	\| 点击按钮 \| 1-2 秒 \|
115	\| 表单输入 \| 0.5-1 秒 \|
116	\| 弹窗出现 \| 1.5-2 秒 \|
117	\| 数据加载 \| 2-3 秒 \|
118	\| 场景切换 \| 2-3 秒 \|
119
120	### 3. 悬停展示
121
122	```javascript
123	// 悬停显示 tooltip
124	await element.hover();
125	timeline.mark("悬停显示提示");
126	await page.waitForTimeout(3000); // 留足时间让观众看清
127	```
128
129	### 4. 逐字输入效果
130
131	```javascript
132	// 更真实的输入效果
133	for (const char of text) {
134	await input.type(char, { delay: 80 });
135	}
136	```
137
138	## 时间线记录规范
139
140	### 必须记录的事件
141
142	- 页面加载完成
143	- 主要区域就绪
144	- 每次点击操作
145	- 每次数据加载完成
146	- 弹窗打开/关闭
147	- 录制结束
148
149	### 事件命名规范
150
151	```javascript
152	timeline.mark("页面加载完成");
153	timeline.mark("点击[按钮名]按钮");
154	timeline.mark("输入用户名: xxx");
155	timeline.mark("[弹窗名]弹窗打开");
156	timeline.mark("显示查询结果");
157	timeline.mark("录制结束");
158	```
159
160	## 视频格式转换
161
162	录制完成后转换为 MP4：
163
164	```javascript
165	// 使用 FFmpeg 转换
166	const { execSync } = require("child_process");
167
168	execSync(`ffmpeg -y -i ${webmPath} -c:v libx264 -preset fast -crf 23 ${mp4Path}`);
169	```
170
171	## 故障排除
172
173	### Chromium 未安装
174
175	```bash
176	npx playwright install chromium
177	```
178
179	### 录制黑屏
180
181	确保 `headless: false`
182
183	### 操作太快
184
185	增加 `slowMo` 值或 `waitForTimeout`
186
187	### 元素未找到
188
189	使用更稳定的选择器：
190	```javascript
191	// 推荐
192	page.locator('button:has-text("查询")')
193	page.locator('.el-button--primary')
194
195	// 避免
196	page.locator('button:nth-child(2)')
197	```

People who liked this also viewed

6 picks

Type

ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026292k642
imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026165k66k
hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026145k37k
media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026144k37k
general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026124k37k
product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026121k37k

recording

37stars7forks

View on GitHub

How to install recording?

matrixreligio/productvideocreator/recording

$npx -y skills add MatrixReligio/ProductVideoCreator --skill recording

Installs into the current project.

Summary

使用 Playwright 进行浏览器自动化录屏。当需要录制 Web 应用操作演示、生成带时间线的屏幕录像时使用。

Files · 1

View on GitHub

SKILL.md

1	# 浏览器录屏技能
2
3	## 核心要求
4
5	1. 单次连续录制 - 不要分段录制
6	2. 记录时间线 - 每个操作的精确时间戳
7	3. 真实数据 - 使用真实或有意义的测试数据
8	4. 适当节奏 - 留足够时间让画面呈现
9
10	## 录屏脚本结构
11
12	```javascript
13	const { chromium } = require("playwright");
14	const path = require("path");
15	const fs = require("fs/promises");
16
17	const BASE_URL = "http://localhost:5173";
18	const OUTPUT_DIR = path.join(__dirname, "..", "public", "recordings");
19	const VIEWPORT = { width: 1920, height: 1080 };
20
21	// 测试数据 - 使用真实有意义的数据
22	const TEST_DATA = {
23	// 定义测试数据
24	};
25
26	// 时间线记录器 - 关键组件
27	class TimelineRecorder {
28	constructor() {
29	this.startTime = Date.now();
30	this.events = [];
31	}
32
33	mark(event) {
34	const elapsed = (Date.now() - this.startTime) / 1000;
35	this.events.push({ time: elapsed, event });
36	console.log(` [${elapsed.toFixed(1)}s] ${event}`);
37	return elapsed;
38	}
39
40	getTimeline() {
41	return this.events;
42	}
43	}
44
45	async function recordDemo() {
46	await fs.mkdir(OUTPUT_DIR, { recursive: true });
47
48	const browser = await chromium.launch({
49	headless: false,
50	slowMo: 50, // 稍微放慢操作，更自然
51	});
52
53	const context = await browser.newContext({
54	viewport: VIEWPORT,
55	recordVideo: {
56	dir: OUTPUT_DIR,
57	size: VIEWPORT,
58	},
59	locale: "zh-CN",
60	});
61
62	const page = await context.newPage();
63	const timeline = new TimelineRecorder();
64
65	try {
66	// 场景录制...
67
68	} finally {
69	// 保存时间线
70	const timelineData = {
71	totalDuration: (Date.now() - timeline.startTime) / 1000,
72	events: timeline.getTimeline(),
73	};
74
75	await fs.writeFile(
76	path.join(OUTPUT_DIR, "timeline.json"),
77	JSON.stringify(timelineData, null, 2)
78	);
79
80	await page.close();
81	await context.close();
82	await browser.close();
83	}
84	}
85	```
86
87	## 录屏最佳实践
88
89	### 1. 等待时间设置
90
91	```javascript
92	// 页面加载后等待
93	await page.goto(url, { waitUntil: "networkidle" });
94	await page.waitForTimeout(1500);
95
96	// 点击后等待响应
97	await element.click();
98	await page.waitForTimeout(2000);
99
100	// 表单输入后等待
101	await input.fill(value);
102	await page.waitForTimeout(500);
103
104	// 弹窗打开后等待
105	await dialog.waitFor({ state: "visible" });
106	await page.waitForTimeout(1500);
107	```
108
109	### 2. 操作节奏
110
111	\| 操作类型 \| 建议等待时间 \|
112	\|----------\|--------------\|
113	\| 页面加载 \| 1.5-3 秒 \|
114	\| 点击按钮 \| 1-2 秒 \|
115	\| 表单输入 \| 0.5-1 秒 \|
116	\| 弹窗出现 \| 1.5-2 秒 \|
117	\| 数据加载 \| 2-3 秒 \|
118	\| 场景切换 \| 2-3 秒 \|
119
120	### 3. 悬停展示
121
122	```javascript
123	// 悬停显示 tooltip
124	await element.hover();
125	timeline.mark("悬停显示提示");
126	await page.waitForTimeout(3000); // 留足时间让观众看清
127	```
128
129	### 4. 逐字输入效果
130
131	```javascript
132	// 更真实的输入效果
133	for (const char of text) {
134	await input.type(char, { delay: 80 });
135	}
136	```
137
138	## 时间线记录规范
139
140	### 必须记录的事件
141
142	- 页面加载完成
143	- 主要区域就绪
144	- 每次点击操作
145	- 每次数据加载完成
146	- 弹窗打开/关闭
147	- 录制结束
148
149	### 事件命名规范
150
151	```javascript
152	timeline.mark("页面加载完成");
153	timeline.mark("点击[按钮名]按钮");
154	timeline.mark("输入用户名: xxx");
155	timeline.mark("[弹窗名]弹窗打开");
156	timeline.mark("显示查询结果");
157	timeline.mark("录制结束");
158	```
159
160	## 视频格式转换
161
162	录制完成后转换为 MP4：
163
164	```javascript
165	// 使用 FFmpeg 转换
166	const { execSync } = require("child_process");
167
168	execSync(`ffmpeg -y -i ${webmPath} -c:v libx264 -preset fast -crf 23 ${mp4Path}`);
169	```
170
171	## 故障排除
172
173	### Chromium 未安装
174
175	```bash
176	npx playwright install chromium
177	```
178
179	### 录制黑屏
180
181	确保 `headless: false`
182
183	### 操作太快
184
185	增加 `slowMo` 值或 `waitForTimeout`
186
187	### 元素未找到
188
189	使用更稳定的选择器：
190	```javascript
191	// 推荐
192	page.locator('button:has-text("查询")')
193	page.locator('.el-button--primary')
194
195	// 避免
196	page.locator('button:nth-child(2)')
197	```

People who liked this also viewed

6 picks

Type