Menu
使用 Playwright 进行浏览器自动化录屏。当需要录制 Web 应用操作演示、生成带时间线的屏幕录像时使用。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
为视频添加背景音乐。支持免版权音乐来源、音量混合、淡入淡出效果。当需要为视频添加背景音乐、调整音乐与配音音量平衡时使用。
使用 Remotion 合成最终视频。当需要将片头、录屏、配音、片尾组合成完整视频时使用。包含动画效果、时间线管理、多尺寸模板和故障处理。
自动生成视频字幕。解析配音文案，生成同步字幕，使用 Remotion 组件渲染。支持中英文双语字幕。
使用 edge-tts 生成多语言配音（中文/英文）。当需要为视频生成语音旁白、基于时间线同步配音时使用。支持语速调整、多种声音选择和配音验证。
从公开网站收集视频素材（图片、Logo、图标）。当需要为图文视频准备素材时使用。包含免版权图片来源、下载规范和素材组织方式。
产品介绍视频自动化生成。当用户需要创建产品演示视频、公司介绍短片、宣传片时使用。支持录屏演示型、图文展示型、混合型三种视频类型。
| name | recording |
| description | 使用 Playwright 进行浏览器自动化录屏。当需要录制 Web 应用操作演示、生成带时间线的屏幕录像时使用。 |
| argument-hint | ["目标URL"] |
const { chromium } = require("playwright");
const path = require("path");
const fs = require("fs/promises");
const BASE_URL = "http://localhost:5173";
const OUTPUT_DIR = path.join(__dirname, "..", "public", "recordings");
const VIEWPORT = { width: 1920, height: 1080 };
// 测试数据 - 使用真实有意义的数据
const TEST_DATA = {
// 定义测试数据
};
// 时间线记录器 - 关键组件
class TimelineRecorder {
constructor() {
this.startTime = Date.now();
this.events = [];
}
mark(event) {
const elapsed = (Date.now() - this.startTime) / 1000;
this.events.push({ time: elapsed, event });
console.log(` [${elapsed.toFixed(1)}s] ${event}`);
return elapsed;
}
getTimeline() {
return this.events;
}
}
async function recordDemo() {
await fs.mkdir(OUTPUT_DIR, { recursive: true });
const browser = await chromium.launch({
headless: false,
slowMo: 50, // 稍微放慢操作，更自然
});
const context = await browser.newContext({
viewport: VIEWPORT,
recordVideo: {
dir: OUTPUT_DIR,
size: VIEWPORT,
},
locale: "zh-CN",
});
const page = await context.newPage();
const timeline = new TimelineRecorder();
try {
// 场景录制...
} finally {
// 保存时间线
const timelineData = {
totalDuration: (Date.now() - timeline.startTime) / 1000,
events: timeline.getTimeline(),
};
await fs.writeFile(
path.join(OUTPUT_DIR, "timeline.json"),
JSON.stringify(timelineData, null, 2)
);
await page.close();
await context.close();
await browser.close();
}
}
// 页面加载后等待
await page.goto(url, { waitUntil: "networkidle" });
await page.waitForTimeout(1500);
// 点击后等待响应
await element.click();
await page.waitForTimeout(2000);
// 表单输入后等待
await input.fill(value);
await page.waitForTimeout(500);
// 弹窗打开后等待
await dialog.waitFor({ state: "visible" });
await page.waitForTimeout(1500);
| 操作类型 | 建议等待时间 |
|---|---|
| 页面加载 | 1.5-3 秒 |
| 点击按钮 | 1-2 秒 |
| 表单输入 | 0.5-1 秒 |
| 弹窗出现 | 1.5-2 秒 |
| 数据加载 | 2-3 秒 |
| 场景切换 | 2-3 秒 |
// 悬停显示 tooltip
await element.hover();
timeline.mark("悬停显示提示");
await page.waitForTimeout(3000); // 留足时间让观众看清
// 更真实的输入效果
for (const char of text) {
await input.type(char, { delay: 80 });
}
timeline.mark("页面加载完成");
timeline.mark("点击[按钮名]按钮");
timeline.mark("输入用户名: xxx");
timeline.mark("[弹窗名]弹窗打开");
timeline.mark("显示查询结果");
timeline.mark("录制结束");
录制完成后转换为 MP4：
// 使用 FFmpeg 转换
const { execSync } = require("child_process");
execSync(`ffmpeg -y -i ${webmPath} -c:v libx264 -preset fast -crf 23 ${mp4Path}`);
npx playwright install chromium
确保 headless: false
增加 slowMo 值或 waitForTimeout
使用更稳定的选择器：
// 推荐
page.locator('button:has-text("查询")')
page.locator('.el-button--primary')
// 避免
page.locator('button:nth-child(2)')