屏幕录制与演示
脚本化录制是可重复执行的。当UI发生变化时，你只需更新脚本，而非重新手动录制。
选择方法
| 场景 | 方法 |
|---|---|
| 可以在浏览器中打开的Web应用 | Playwright脚本化录制 |
| 桌面应用或全屏工作流 | OS录屏工具（OBS Studio、Windows Game Bar、macOS Screenshot） |
| 应用源代码可用，且追求无卡顿的完美效果 | 在Remotion中将屏幕重建为静态组件（参见remotion-programmatic-video） |
| CLI | 终端录制工具（asciinema、VHS）或动画终端组件 |
Playwright录制（Python）
pip install playwright && playwright install chromium
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
ctx = browser.new_context(
viewport={"width": 1920, "height": 1080},
record_video_dir="recordings/",
record_video_size={"width": 1920, "height": 1080},
)
page = ctx.new_page()
page.goto("https://example.com")
page.wait_for_load_state("networkidle")
page.wait_for_timeout(800) # 让观众有时间阅读
page.get_by_role("button", name="Sign in").click()
page.get_by_label("Email").type("[email protected]", delay=60) # 可见的输入过程
page.wait_for_timeout(1200)
ctx.close() # 视频在关闭上下文时完成
browser.close()
输出为WebM格式。转换命令：
ffmpeg -i recordings/xyz.webm -c:v libx264 -crf 18 -pix_fmt yuv420p -r 30 out/demo.mp4
让视频看起来更专业
- 演示数据： 使用预置的演示账户，填充真实且不敏感的数据。切勿录制真实的客户数据、令牌或邮箱。
- 窗口： 固定使用1920x1080视口，隐藏书签栏和通知，轻微缩放（110%到125%）以确保在手机上文字清晰可读。
- 节奏： 每次操作后暂停0.5到1秒。打字时加入延迟。避免瞬间跳转。
- 光标： Playwright不会绘制光标。可以注入一个小的DOM光标，或在后期制作中添加（Remotion或叠加层）。
- 确定性： 使用
expect(locator).to_be_visible()等待，而不是固定的睡眠时间，然后再故意暂停以方便观众观看。 - 敏感信息： 在录制前，通过页面脚本 (
page.add_style_tag) 对字段进行模糊处理或遮罩。
后期制作
# 裁剪空档时间：保留12秒到41秒
ffmpeg -ss 12 -i demo.mp4 -t 29 -c:v libx264 -crf 18 out/trimmed.mp4
# 加速无聊的等待（例如，从20秒到30秒加速4倍）需要分割；最简单的方法是裁剪、加速、重新拼接
# 放大某个区域：先裁剪再缩放（源像素中的x:y:w:h）
ffmpeg -i demo.mp4 -vf "crop=960:540:480:270,scale=1920:1080" out/zoom.mp4
如需跟随光标的平滑动画缩放/平移，请使用Remotion（在scale和translate上使用interpolate）。
与旁白同步
- 先编写脚本（
video-planning），录制旁白（voiceover-tts）。 - 录制屏幕，然后调整每个场景的速度，使每个动作准确地落在对应的语句上。计算公式：
speed = recorded_seconds / narration_seconds。 - 使用
ffmpeg-essentials中的速度调节方法，或在合成内部重新调整时间。
检查清单
- 无个人数据、API密钥或内部URL可见。
- 文本在缩放到手机屏幕的1080p分辨率下清晰可读。
- 没有超过1秒的加载旋转图标残留。
- 除非需要，否则机器音频已静音。