做一个操作演示、录一段 bug 复现、把某个步骤转成能直接贴进聊天窗口的动图，这条链路上有三个环节：录、标、压。每一环都有几个「不知道就会白干一遍」的限制，尤其是录屏——录完才发现没声音或者分辨率不对，是没法回炉的，只能重录。所以这篇先把限制讲透，再讲参数。
一、能录到什么：三种范围各有取舍
在线录屏 使用浏览器的屏幕捕获能力，可以选整个屏幕、单个应用窗口、或者某个浏览器标签页。选择动作最终由浏览器自己弹出的系统级选择器完成——这是刻意的安全设计，网页无权替你决定录哪块内容，也无法在你不知情的情况下开始录制。这也意味着页面上的「录制区域」选项只是给浏览器的建议，最终录到什么以你在选择器里点的那一项为准。
三种范围的实际差别：
- 整个屏幕：能录到所有内容，包括其他应用、系统弹窗、任务栏。适合演示跨软件的操作流程。副作用是隐私风险最高——微信弹窗、邮件通知都会被录进去，录之前先开专注模式。
- 应用窗口：只录选定的那个窗口，窗口被挡住也不影响录制内容。但把窗口最小化通常会让画面冻结在最后一帧，另外弹出到窗口之外的对话框、右键菜单可能不被捕获。
- 浏览器标签页：范围最小、隐私最可控，也是唯一能稳定录到页面自身声音的选项。缺点是切到别的标签页后，很多浏览器会中止或暂停这一路捕获。
录屏输出的画面是「捕获到的原始尺寸」，不是你显示器的物理分辨率。缩放比例设成 150% 的高分屏，捕获到的逻辑分辨率可能只有 1280×800，事后再放大也补不回清晰度。想要清晰的录屏，最有效的办法是录制前把系统缩放调回 100%，其次是把要演示的窗口拉大到占满画面。
二、声音：这一环最容易失败
音频选项有四档：无音频、系统音频、麦克风、系统和麦克风。四档的可靠程度差别很大，原因在于「录系统声音」这件事在各平台上的支持度天差地别。
- 系统音频的支持是平台相关的。 桌面版 Chrome 和 Edge 在录标签页时能稳定拿到页面声音；录整个屏幕时能否带上系统混音，取决于操作系统和浏览器版本。Firefox 与 Safari 对这一项的支持一直很有限，macOS 上尤其容易拿不到。
- 麦克风走的是另一条通道。 选麦克风或「系统和麦克风」时，页面会额外申请麦克风权限，然后在浏览器里把系统声音和麦克风两路混成一路再交给录制器。如果麦克风权限被拒绝，录制不会中断，而是自动降级为只录系统音频——这就是「以为在讲解，录完发现只有电脑声音」的典型来源。看到浏览器的权限弹窗一定要点允许，地址栏里的麦克风图标应显示为已启用。
- 开麦讲解建议戴耳机。 混流时系统声音和麦克风是两个独立输入，扬声器放出来的声音会被麦克风再收一遍，形成叠加与轻微回声。工具在申请屏幕音频时启用了回声消除和噪声抑制，但这类处理是为通话场景调优的，对付不了明显的外放回灌。
一个稳妥的习惯：正式录之前先录 10 秒，回放确认画面范围和声音都对，再开始正式录制。这 10 秒省下的是重录整段的时间。
三、质量档位与格式：录完就定型了
质量三档对应的是向浏览器请求的画面参数：低档约 1280×720、15 帧，中档约 1920×1080、30 帧，高档约 1920×1080、60 帧。注意这些是「理想值」，浏览器会在实际能力范围内尽量靠近，捕获源本身达不到就以源为准。
选档的判断标准不是「越高越好」，而是内容类型：
- 纯界面操作、代码演示：低档或中档就够。界面内容大部分区域是静止的，编码器压得很好，帧率低一点也不影响看清步骤，文件还小得多。
- 有拖拽、动画、滚动、播放视频的内容：上中档或高档，低帧率下鼠标拖动会明显跳跃。
- 要长时间录制：优先低档。录屏是实时写入的，60 帧 1080p 一小时可以轻松占掉几个 GB，中途内存或磁盘吃紧就前功尽弃。
格式列表是动态生成的——页面会逐个询问浏览器是否支持某个封装与编码组合，只把真正支持的选项显示出来。所以你在 Chrome 上看到的可选项和在 Safari 上看到的可能不一样。没有特殊要求就选 WebM，它是浏览器录制能力里支持最广、最不容易出意外的组合；确实需要 MP4 交付给不认 WebM 的软件时，用视频格式转换再转一次比赌浏览器支持更稳。
录完的文件会进入页面上的录制记录列表，可以预览、下载、删除。这些数据存在浏览器的本地数据库里，换浏览器、换设备或者清理浏览数据都会丢，所以有价值的录制请第一时间下载到本地。
四、加水印：中文水印为什么不需要装字体
录屏素材要对外发布时，视频加水印 用来标注归属。它支持文字水印和图片水印两种。
文字水印这里有个值得一提的实现取巧：常规做法是让处理引擎自己渲染文字，但那需要把中文字体文件（动辄几 MB 到十几 MB）一起塞进浏览器，代价很高。这个工具改成先在浏览器里把文字画成一张背景透明的图片，再把这张图片叠到画面上——于是中文、emoji、任何你系统里能显示的字符都能用，且完全不需要额外下载字体。
参数上的实用建议：
- 透明度是关键，不是字号。 版权标注类水印建议透明度调到三成到五成，既能看出归属又不挡内容。想防盗用则要反过来——太淡的水印很容易被裁掉或用修复工具擦除。
- 位置优先选右上或左上。 视频平台的播放器会在底部叠进度条、时间、清晰度菜单，压在下方的水印经常被遮住。九宫格选好大致位置后，用边距微调避开画面里的固定元素。
- 图片水印用 PNG 并保留透明通道。 JPEG 没有透明通道，叠上去就是一个白色方块。缩放比例建议控制在画面宽度的 10% 到 15%，再大就抢注意力了。
- 先用短片段试。 叠加水印必须重新编码整段画面，长视频耗时可观。剪 10 秒确认字号、颜色、位置的观感，再对完整视频跑一遍，比直接跑完发现字太小要划算。
五、转 GIF：体积是三个数字的乘积
GIF 是分享链路里最方便也最容易失控的一环。它没有帧间压缩意义上的现代编码，每帧本质上是一张最多 256 色的索引图，所以体积增长非常直接：
GIF 体积 ≈ 宽 × 高 × 帧率 × 时长 × 每像素平均字节数
视频转GIF 里能调的正好是这几项：尺寸可选 320、480、640、720 像素宽或原始尺寸，帧率可选 5 / 10 / 15 / 20 / 30，时长由你框选的区间决定。这三者是乘法关系，任何一项翻倍，体积就大致翻倍。 反过来说，三项各砍一半，体积会降到八分之一——这是控体积最高效的思路，比在质量档位上纠结有用得多。
具体取值经验：
- 尺寸：贴聊天窗口、放进文档，480 像素宽足够。720 像素宽的 GIF 通常已经大到不适合当动图分享了。
- 帧率：界面操作演示 10 帧就很流畅，鼠标轨迹类内容 15 帧，30 帧几乎只在需要展示动画细节时才有必要。这一项的性价比最高，从 30 降到 10 直接省掉三分之二。
- 时长：动图的黄金长度是 2 到 5 秒，超过 8 秒基本就该考虑发视频而不是 GIF 了。工具默认框选前 3 秒，就是这个道理。
质量档位控制的是调色板颜色数——四档分别对应 256、200、128、64 色。减色是压缩 GIF 最有效的手段，因为它直接减少每个像素需要的索引位数。界面截图、纯色背景的内容用 64 色往往看不出差别；实拍画面、渐变背景减到 64 色会出现明显的色带。
工具在生成时做的是两遍调色板处理：先扫描整个片段统计颜色分布生成最优调色板，再用这张调色板配合有序抖动把每帧映射过去。这比只看第一帧取色的单遍做法效果好得多——单遍生成经常出现「后半段颜色全跑偏」的问题。缩放时用的是较高质量的重采样算法，缩小后文字边缘不会糊成一团。
界面上的「预计文件大小」是按上面那个乘法关系估的，用来对比不同参数组合的相对大小很有效，但它不是精确值：实际体积还取决于画面内容本身的复杂度，静止画面多的片段会远小于估算值，全屏运动的片段可能超出。
顺便说明这一步的运行环境：GIF 转换跑在浏览器内的 WebAssembly 引擎上，需要完整解码所选区间再逐帧重编码，比原生工具慢，且整个片段的数据要驻留内存。这也是不建议框选很长区间的技术原因——不只是体积问题，长片段本身就容易撑爆内存。
常见问题
录制过程中切到别的窗口，录屏会中断吗？
录整个屏幕时不会，切窗口只是被录进去而已。录单个窗口时，最小化通常会让画面停在最后一帧。录标签页时风险最大——不少浏览器会在标签页失焦后限制或暂停捕获。要边录边切界面，就选整个屏幕。
录完的 GIF 有明显色带和噪点，怎么改善？
先把质量档位往上提，把调色板颜色数从 64 提到 128 或 200，色带主要来自减色。如果提到最高还是有噪点，说明源内容是渐变或实拍画面，这类内容本来就不适合 256 色的 GIF——考虑改用短视频分享，或者把尺寸缩小，缩小后单位面积的色彩过渡跨度变小，色带会不那么显眼。
水印加完发现位置压住了字幕，能不能只改位置重跑？
只能重新处理一遍。水印是烧进画面像素里的，输出文件里已经没有「水印图层」这个概念，无法单独移动或删除。这正是建议先用短片段试位置的原因。要经常调整的场景，请保留一份没有水印的原片。
能不能录屏之后直接在同一个页面接着加水印、转 GIF？
这几个是独立工具，需要先把录屏结果下载到本地，再上传给下一个工具。好处是每一步的中间产物都在你手里，中途某一步参数不满意可以只重跑那一步；另外全部处理都在本机浏览器内完成，文件不会上传服务器，多一次下载上传换来的是流程可控。