我用 WebCodecs 做了个「慢速录屏」工具:10小时录制只要几 MB

7 阅读2分钟

前言

你有没有这样的经历:

  • 跑一个 AI 模型训练,想录下整个过程方便回看
  • 和 AI 助手 pair programming 了一下午,想留个完整记录
  • 远程工作需要录屏留痕,但不想占用太多系统资源

传统录屏软件的问题是:10 小时录制 = 几十 GB 文件 + CPU 飙升

所以我做了一个不一样的工具。

产品介绍

慢速录屏(re.sum.pub)是一个专为「超长时间录制」设计的屏幕录制工具。

核心理念很简单:降低帧率,换取极小体积和极低占用。

指标传统录屏慢速录屏
10小时录制20-50 GB3-10 MB
CPU 占用15-30%< 1%
帧率30-60 fps0.1 fps(1帧/10秒)
适用场景游戏/视频AI 工作流/开发录制

为什么这个思路可行?

想想你平时写代码的场景:

  • 看文档,想问题,写代码,调试... 大部分时间屏幕其实没什么变化
  • 即使有变化,一般人也不需要毫秒级的精度
  • 我们只是想记录「发生了什么」,不是制作电影

所以,每 10 秒截一帧,完全够用。

技术实现

核心使用了浏览器的 WebCodecs API

// 基本流程
1. getDisplayMedia() 获取屏幕流
2. 每隔 N 秒截取一帧
3. VideoEncoder 编码为 H.264/VP9
4. 写入 WebM/MP4 容器

为什么选 WebCodecs:

  • 硬件加速编码,几乎不占 CPU
  • 浏览器原生,无需安装任何软件
  • 编码效率高,输出文件小

播放时,我们把实际 0.1fps 的录制转成 20fps 播放,效果就是:

  • 10 小时的录制 → 3 分钟的回放
  • 快进式浏览你一整天的工作

适用场景

AI 开发者

  • 训练过程录制,方便回溯问题
  • Agent 运行记录
  • 与 AI 助手协作的完整过程

远程工作者

  • 工作留痕,但不想要几十 GB 的文件
  • 项目交付存证

教程作者

  • 录制长流程操作
  • 后期再剥出关键片段

运维/测试

  • 长时间稳定性监控
  • Bug 复现记录

在线体验

直接访问:re.sum.pub

无需注册,打开即用。

操作很简单:

  1. 调整「捕获间隔」(1-60 秒)
  2. 点击开始录制
  3. 选择要录制的窗口/屏幕
  4. 录完下载

小结

并不是所有场景都需要 60fps。

当你只是想记录「发生了什么」而不是「怎么发生的」,慢速录屏可能正是你需要的。

欢迎试用,有问题欢迎评论区交流 👋


🔗 体验地址:re.sum.pub