timecut 快速上手：5分钟录出第一支网页视频（安装与使用教程）

timecut 快速上手5分钟录出第一支网页视频安装与使用教程【免费下载链接】timecutNode.js program to record smooth movies of web pages with JavaScript animations项目地址: https://gitcode.com/gh_mirrors/ti/timecuttimecut 是一个免费的 Node.js 网页视频录制工具能把带 JavaScript 动画的网页比如数据可视化、Canvas 动效页面一键录制成平滑流畅的 MP4 视频。本文是一份面向新手的 timecut 安装与使用教程从环境准备、一键安装到命令行参数速查和实战录屏5 分钟带你录出第一支网页视频。一、timecut 是什么为什么录网页动画首选它️ 普通录屏是实时的动画跑多快它就录多快还经常掉帧、卡顿。而timecut 网页视频录制走的是虚拟时间路线它会接管页面里的时间函数setTimeout、requestAnimationFrame、Date.now等让动画按虚拟时间轴逐帧推进每一帧都等 JavaScript 计算完成后再截图交给 ffmpeg 编码成视频因此可以**低于实时速度、或虚拟高帧率如 60fps**地捕捉画面最终视频非常平滑。⚠️ 一点限制timecut 只接管 JavaScript 驱动的时间逻辑纯CSS transition/animation驱动的动画可能无法正确录制详见 README.md 的 Limitations 一节。二、安装前准备环境要求与依赖检查timecut 对系统要求很低只需提前确认三样东西依赖版本要求用途Node.js≥ v8.9.0运行 timecut 程序npm随 Node 自带安装依赖包ffmpeg任意较新版本把逐帧图片编码成视频验证是否已安装node -v ffmpeg -version三、timecut 安装步骤三种方式任选其一方式 1全局安装推荐最省心npm install -g timecut 注意在 Linux 下以 root 用户全局安装可能遇到权限问题建议先用普通用户执行或按 npm 官方指南修改全局包目录。方式 2作为项目本地依赖安装cd /你的项目目录 npm install timecut方式 3从源码安装git clone https://gitcode.com/gh_mirrors/ti/timecut cd timecut npm install安装完成后命令行入口是 cli.js程序主体逻辑在 index.js版本号与依赖信息见 package.json。四、快速开始一条命令录出第一支网页视频安装好后进入任意目录直接运行timecut它的默认行为是打开当前目录的index.html设置 800×600 视口按60 帧/秒录制5 个虚拟秒最终在当前目录生成video.mp4。想录制远程网页把网址作为参数传入即可timecut https://example.com/demo小技巧网址中如果包含#或等特殊字符一定要加引号否则参数会解析错乱。五、最常用参数速查viewport、fps、duration 怎么配以下 4 个参数覆盖了 90% 的网页视频录制需求建议显式写出避免未来默认值变化timecut index.html --viewport800,600 --fps60 --duration5 \ --outputvideo.mp4参数作用默认值-O, --output输出文件名扩展名决定编码格式video.mp4-R, --fps每虚拟秒捕捉的帧数60-d, --duration录制时长虚拟秒5-V, --viewport视口尺寸如800,600800×600-S, --selector用 CSS 选择器裁剪到某个元素整个视口-s, --start先预热 n 个虚拟秒再开始保存帧0完整参数列表可在命令行运行timecut -h查看源码定义在 cli.js。六、实战示例只录页面中动画区域的高清视频假设drawing.html里有一段 canvas 动画只想录动画本身而不带网页边栏timecut drawing.html -S canvas,svg这条命令会把每一帧裁剪到第一个canvas或svg元素的包围盒再按默认设置录制成video.mp4。 如果页面动画依赖随机数每次录制结果都不一样加--unrandomize让Math.random变成固定种子的伪随机数画面完全可复现timecut https://example.com/random-demo -S #container \ --duration20 --unrandomize 42七、进阶玩法把 timecut 作为 Node.js 库集成除了命令行timecut 还能在代码里当库用适合批量录制多个页面、做自动化流水线npm install timecut --saveconst timecut require(timecut); timecut({ url: index.html, viewport: { width: 800, height: 600 }, fps: 60, duration: 5, output: video.mp4 }).then(() console.log(Done!));Node API 还支持命令行没有的能力比如preparePage截图前执行自定义准备逻辑、outputStream把视频流写入自定义管道等完整参数对照见 README.md 的 Node API 章节核心实现位于 index.js。八、常见问题速答故障排查Q1录制占用了大量磁盘空间默认的 frame-cache 模式会先把每一帧临时存到磁盘每秒约几百 MB。想省空间可改用实验性的--pipe-mode直接管道传给 ffmpeg若嫌不稳定可用--keep-frames保留帧文件自行检查。Q2动画录出来是冻结或跳变的多半是 CSS 动画/过渡驱动的画面——timecut 只接管 JS 时间函数这类页面建议改用 JS 重写动画逻辑。Q3想用自己浏览器或指定 ffmpeg 路径分别用--executable-path和--ffmpeg-path指定即可。Q4想看到浏览器窗口调试加--no-headless让 Chromium 以窗口模式运行。九、深入了解源码与文档指引文件说明cli.js命令行入口所有 CLI 参数在此定义index.js录制核心逻辑默认 60fps、5 秒时长等README.md完整官方文档参数、Node API、录制模式、工作原理package.json项目版本、依赖与引擎要求 小结timecut 用虚拟时间 逐帧截图 ffmpeg 编码的思路把网页 JS 动画变成平滑高清的视频。只要装好 Node.js 和 ffmpeg一条npm install -g timecut加上一句timecut 你的网址5 分钟就能产出第一支网页动画视频。祝录制愉快【免费下载链接】timecutNode.js program to record smooth movies of web pages with JavaScript animations项目地址: https://gitcode.com/gh_mirrors/ti/timecut创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考