我做了一个给网站截图或录制滚屏视频的在线小工具

我8月份做了一个小工具网站，用来给任何public权限的网站截图或录制滚屏视频

刚开始我想的也比较简单，就是简单的给网站截个屏而已，然后随着调研的展开，我发现这样的小工具也可以做得很深入。

如何截屏比较干净清爽且完整的网站截图？会有这些因素要考虑到：

首先支持各种设备分辨率（desktop、pad、手机），这个需求不用多说；
截图是截取屏幕显示区内容，还是全网页尺寸，这里提供一了个“Full Size”开关；
截屏图片输出什么格式，图片输出JPEG/PNG两种足够用了；有的网页是知识型的，可能是很长的文章，会有用户想通过PDF保存下来慢慢学习，所以支持输出PDF格式；
截屏时机的把握，如果截屏过早会截取到加载中的状态，所以需要等到网站加载完成再截屏，比如等到load事件甚至等到network idle再截屏，但有些网站还涉及到client异步加载，这样就需要主动再多等一定时间再加载，所以加了个“Capture Delay”参数；
有些网站会有广告，我们截屏肯定不希望把广告也截取进去，那就需要屏蔽广告，所以加了个Block Ads的选项；
有些网站，尤其是面向欧洲的网站，会有Cookies Consent & GDPR Banners弹出，所以加了个“Block Cookies & GDPR Banners”选项；

以上是目前我针对截图做的一些尝试，主要体现在使用时的各个参数的调配上，一图胜千言，网站截图界面：

接下来就是网站滚屏视频录制功能，这个有部分功能参数与截图类似，比如分辨率、Block Ads、Block Cookies & GDPR Banners、Initial Delay。

如果要截屏出相对平滑效果过得去的视频，还有很多需要打磨的点，比如：

录制视频采用的工具一般要从打开网页就开始了录制了，所以前面会有一段加载过程的视频，需要精确计时从开始加载网页到开始滚动网页前这段时长，后期处理需要把这部分剪掉；
录屏时滚动和间歇的节奏控制，这里就涉及两个参数“Scroll Distance”和“Scroll Delay”，分别是一次滚动多少距离和两次滚动之间停顿的时长；
输出格式，默认录屏格式是webm，视频应用更广泛的是MP4格式，另外一种就是GIF，网站录屏社交媒体分享也是一部分需要（Twitter上很多分享GIF录像的）；所以提供WEBM/MP4/GIF三种格式输出；初始拿到webm格式视频后，切掉开始的加载部分，以及转换格式，这个通过ffmpeg就可以做到了。

以上是目前我针对网站视频录制做的一些尝试，同样主要体现在使用时的各个参数的调配上，一图胜千言，网站视频录制界面：：

下面这个附件视频是默认参数下，对stripe网站录屏的效果，文件大概4M多点 https://github.com/user-attachments/assets/8ab22ba0-23cd-42ac-a2be-67f1927fb7be

还有很多值得深挖的点，比如目前想到但还没做的深浅色模式切换后再截图录屏，比如提供API服务，比如如何并行高效处理让服务更稳定健壮等等；

欢迎大家试用和提建议：