企业官网建设流程全解析

ScreenArc 是一款跨平台屏幕录制与视频剪辑工具，录制结束后会自动进入编辑器，支持电影感缩放、鼠标轨迹跟随等效果。本文带你逐一拆解 ScreenArc 的导出设置：MP4 还是 GIF、720p/1080p/2K 分辨率怎么挑、30 帧率与画质档位意味着什么，帮助新手快速选对导出参数。

一、导出设置入口：4 个核心选项

在编辑器右上角点击Export按钮（ExportButton.tsx），会弹出导出设置窗口，共 4 个选项加一个输出路径：

完整选项定义见 ExportModal.tsx 中的ExportSettings类型。

二、格式怎么选：MP4 还是 GIF？

选 MP4：做完整视频的首选 🎬

• 适用场景：教程录屏、操作演示、发布会回放等完整视频
• 编码方式：MP4 由内置 FFmpeg 使用libx264编码（yuv420p像素格式），见 export-manager.ts
• 优点：体积可控、几乎所有播放器与视频网站都支持
• 默认就是 MP4，一般不需要改动

选 GIF：短片段动图神器 🖼️

• 适用场景：3~10 秒的功能演示、聊天窗口/文档/网页动图
• 编码方式：GIF 走palettegen + paletteuse两步调色板滤镜生成，保证颜色更稳定，见 export-manager.ts
• 注意：GIF 不带声音，且时长越长体积越大；超过 15 秒建议改用 MP4

💡 经验法则：给别人看过程 → MP4；给别人看效果 → GIF。

三、分辨率怎么选：720p / 1080p / 2K

分辨率的基准高度定义在 constants.ts 中：

两个容易忽略的细节：

1. 宽度会随画幅比自动计算：ScreenArc 按你项目的画幅比（如 16:9）等比缩放宽度，并强制取偶数，见 utils.ts 的calculateExportDimensions。录的是竖屏或 4:3 区域时，2K 输出的宽度并不是 2560。
2. 分辨率越高，导出越慢：ScreenArc 是逐帧渲染再编码的，2K 每帧像素量约为 720p 的 4 倍，长视频请谨慎使用 2K。

四、帧率为什么固定 30 FPS？

当前版本中 FPS 选项锁定为 30（界面上呈禁用状态，见 ExportModal.tsx）。

对屏幕录制来说 30 FPS 是"流畅度与体积"的平衡点：日常鼠标移动、窗口拖拽完全够用，同时保证导出速度和文件大小可控。如果你追求"丝滑"感，可以在剪辑阶段用**变速区域（Speed Regions）**做局部慢放，而不必提高整体帧率。

五、Quality（画质）档位说明

界面上提供 Low / Medium / High 三档，默认Medium。

• MP4 的实际编码参数由后端固定为libx264 -preset medium，属于"中速 + 高压缩效率"的主流档位
• 简单理解：Medium 档足以应付绝大多数教程与演示；Low 档可用于快速生成草稿版本

六、导出全流程与实用技巧 🚀

点击Start Export后，整个流程分为三个阶段（详见 user-flow.md 的 "Editing & Exporting Flow" 一节）：

1. 设置页：选参数、确认输出路径。窗口底部会显示Estimated Duration——它已自动扣除剪掉（Cut）的片段并按变速区域换算，是更准确的成片时长
2. 进度页：隐藏渲染窗口逐帧绘制 → 交给 FFmpeg 编码，进度条实时更新，可随时Cancel。取消后半成品文件会被自动删除，不留垃圾
3. 结果页：成功后一键Open Folder直达文件位置

三组常用组合，直接抄作业：

七、常见问题 FAQ

Q：导出中途可以取消吗？可以。进度页有 Cancel 按钮，FFmpeg 进程会被终止且半成品文件自动清理，实现逻辑见 export-manager.ts。

Q：GIF 文件太大怎么办？缩短片段长度、降回 720p，或直接改用 MP4——MP4 在同等观感下体积通常小一个数量级。

Q：为什么导出的宽度和我选的不一样？宽度由"高度 × 画幅比"自动计算（如 1080p 录 4:3 区域输出 1440×1080），属正常行为。

Q：导出过程卡死了吗？不是。ScreenArc 采用"逐帧 seek + canvas 绘制"的渲染方式（RendererPage.tsx），长视频 + 2K 时进度推进较慢属正常现象，可先关窗口等待或降低分辨率重试。

相关文件参考

• 导出设置界面：src/components/editor/ExportModal.tsx
• 导出流程 Hook：src/hooks/useExportProcess.ts
• FFmpeg 编码主进程：electron/main/features/export-manager.ts
• 分辨率常量：electron/main/lib/constants.ts
• 导出流程文档：docs/user-flow.md