wx4766 /
html-to-video
一个把 HTML / Canvas 动画逐帧渲染成 MP4 的命令行工具。 不是录屏，也不是 AI 文生视频。做法是：把画面在 HTML 里写成 frame(t) 纯函数，用无头浏览器逐帧 seek 到指定时刻截图，再用 ffmpeg 编成 H.264。因为是逐帧推的，所以帧率是真的（60fps 不用插帧），每一帧都精确对齐，同样的输入永远得到同样的输出。 它解决的问题 现在想用代码做视频，主流选择是 Remotion（React）或 …
About
一个把 HTML / Canvas 动画逐帧渲染成 MP4 的命令行工具。 不是录屏，也不是 AI 文生视频。做法是：把画面在 HTML 里写成 frame(t) 纯函数，用无头浏览器逐帧 seek 到指定时刻截图，再用 ffmpeg 编成 H.264。因为是逐帧推的，所以帧率是真的（60fps 不用插帧），每一帧都精确对齐，同样的输入永远得到同样的输出。 它解决的问题 现在想用代码做视频，主流选择是 Remotion（React）或 Motion Canvas（场景式）。两者都好，但要先把内容组织成它们的世界观。而很多真实场景是：手上已经有一屏 HTML（常常是 AI 刚生成的），只想把它变成 mp4。为一屏画面建一个 React 工程，代价过大。 这个工具刻意不做框架 —— 输入是一个能跑的 HTML 文件，输出是 mp4： bash bash assets/render.sh my-video.html --duration=6 --fps=60 几个不太常见的点 确定性：冻结 wall-clock rAF，由外部逐帧推进，同一份代码重跑逐帧一致。可版本管理、可做视觉回归 自带验收：qa.js 检查六维（确定性 / 最长连续静止 / 跳变 / 文字框景 / 字体回退 / 控制台报错）。为了让验收本身可信，仓库里放了一个塞满六类真实缺陷的对照样本，测试要求它必须被判失败 横竖屏自适应：--width=1080 --height=1920 就是竖屏，模板跟视口重排而不是拉伸。1920×1080 下与旧版逐像素一致（PSNR 逐帧回归，average:inf） 断点续渲：--resume，长片子跑到 80% 崩了不用从零开始。帧先写 .part 再改名，参数变了直接拒绝，编码前逐个核帧号 —— 实测续渲出来的 mp4 与一次渲完的 MD5 完全相同 MIT，纯本地运行，不调任何 API，不按次计费。
Discovery history
- HelloGitHub·用户投稿
- 阮一峰周刊·用户投稿
- 阮一峰周刊·正刊推荐
Discuss this product