chrome devtools capturescreenshot 是最稳的网页视频生成起点，需显式设置设备指标、指定媒体类型、正确使用 ffmpeg 参数并配置 chromium 启动参数。
Chrome DevTools 的 captureScreenshot 是最稳的起点
直接用浏览器自动化生成视频，不是靠“录屏软件截网页”，而是让 Chrome 自己吐出帧——这是目前最可控、兼容性最好、且不依赖第三方渲染黑盒的方式。
常见错误现象：chrome://dino 页面能截，但带 WebGL 或 iframe 的页面截图空白；或截图尺寸和 viewport 不一致。
- 必须先用
Emulation.setDeviceMetricsOverride显式设置宽高与缩放，否则截图按默认 800×600，且可能忽略viewportmeta -
Page.captureScreenshot返回的是 base64，别直接写进 HTML；解码后存为.png，再用 FFmpeg 合成视频 - 若页面有动画/定时器，需在截图前用
Page.addScriptToEvaluateOnNewDocument注入requestAnimationFrame控制节奏，否则帧率飘忽
用 Puppeteer 脚本批量截图时，page.emulateMediaType('screen') 很关键
很多页面 CSS 里写了 @media print 或 @media speech，不显式指定媒体类型，Puppeteer 默认用 print，导致样式错乱、字体消失、Flex 布局塌陷。
使用场景：生成产品页动图、报表快照、邮件模板预览视频。
立即学习“前端免费学习笔记（深入）”；
- 截图前务必调用
page.emulateMediaType('screen')，哪怕你没改过 CSS 媒体查询 -
page.screenshot({ fullPage: true })在长页面中会自动滚动拼接，但 JS 动画/粘性定位（position: sticky）可能错位，建议改用{ clip: { x, y, width, height } }分区域截图 - 截图延迟别用
setTimeout，改用page.waitForFunction等待某个 DOM 节点就绪，比如() => document.querySelector('#chart canvas')
FFmpeg 合成视频时，-framerate 和 -r 别混用
这是合成视频失败最隐蔽的原因：输入帧率（-framerate）控制读图速度，输出帧率（-r）控制编码节奏。两者不一致，视频会加速、卡顿或音画不同步（虽然这里没音频，但时间轴照样崩）。
性能影响：用 libx264 编码比 libvpx-vp9 快 3–5 倍，但体积大 20%；若目标是微信/钉钉内嵌，优先选 -pix_fmt yuv420p，否则 iOS 播放器直接拒播。
- 正确命令示例：
ffmpeg -framerate 10 -i frame_%05d.png -c:v libx264 -r 10 -pix_fmt yuv420p out.mp4
- 如果截图命名不是连续数字（比如含时间戳），别硬凑
%05d，先用 shell 脚本重命名，或改用-pattern_type glob - 加
-y参数避免交互阻塞；加-v error可快速定位哪一帧 PNG 损坏（常因截图超时导致空文件）
遇到 ERR_CONNECTION_REFUSED 或白屏，先查 --no-sandbox 和 --disable-gpu
不是所有服务器都装了完整图形栈，Docker 容器、CI 环境、无头 CentOS 里，Chrome 启动失败往往不报错，只静默退出，结果 Puppeteer 报 Browser closed unexpectedly。
兼容性影响：新版 Chromium 对 --no-sandbox 越来越敏感，但 CI 环境不用它根本起不来；--disable-gpu 在 headless 下其实已默认启用，但某些旧版驱动仍需显式声明。
- 启动参数必加：
--no-sandbox --disable-dev-shm-usage --disable-gpu --single-process - 别信文档说 “
--headless=new更快” —— 目前（Chromium 120+）它对 SVG 渲染、transform动画支持仍有 bug，老老实实用--headless=chrome - 若用 Docker，基础镜像别选
node:alpine，缺字体、缺共享内存，换node:18-slim或官方puppeteer:latest
