OpenScreen - 完整学习教程

教程级别： 从零到一 预计学习时间： 1.5-2 小时（安装与基础使用 15 分钟 + 进阶功能 30 分钟 + 高级用法与源码 45-60 分钟） 前置知识： 基本的计算机操作能力（安装应用、使用鼠标和键盘）；了解视频基本概念（宽高比、帧率）有助于进阶部分；源码贡献部分需要 TypeScript、React 和 Electron 基础

环境搭建指南

系统要求

• 操作系统：
• macOS 13（Ventura）或更高版本（macOS 12 及以下仅支持麦克风，不支持系统音频捕获）
• Windows 10/11
• Linux — 主流发行版（Ubuntu 20.04+、Fedora 等），使用 AppImage 格式分发，需要 PipeWire 支持系统音频
• 硬件要求：
• 至少 4GB 可用内存（Electron 应用内存占用较高）
• 足够的磁盘空间用于录制和导出视频（建议 1GB+）
• 麦克风（可选，用于录制语音旁白）
• 权限要求：
• 屏幕录制权限（macOS 需在系统偏好设置中授权）
• 麦克风访问权限
• macOS 用户需要绕过 Gatekeeper（见安装步骤）

安装步骤

方式一：下载预编译安装包（推荐普通用户）

# 第一步：前往 GitHub Releases 页面下载对应平台的安装包
# macOS: OpenScreen-x.x.x.dmg
# Windows: OpenScreen-x.x.x.exe
# Linux: OpenScreen-x.x.x.AppImage

# 下载地址：
# https://github.com/siddharthvaddem/openscreen/releases

# 第二步（仅 macOS）：安装后需要绕过 Gatekeeper
# 因为应用未经 Apple 公证签名，macOS 会阻止打开
# 方法：右键点击应用 → 选择"打开" → 在弹出对话框中点击"打开"

# 或者使用命令行绕过：
xattr -rd com.apple.quarantine /Applications/OpenScreen.app

# 第二步（仅 Linux）：给 AppImage 添加执行权限
chmod +x OpenScreen-*.AppImage

# 某些 Linux 发行版可能需要 --no-sandbox 标志：
./OpenScreen-*.AppImage --no-sandbox

方式二：从源码构建（适合开发者）

# 第一步：确保已安装 Node.js（推荐 v18+）和 npm
node --version   # 确认 Node.js 版本
npm --version    # 确认 npm 版本

# 第二步：克隆 GitHub 仓库
git clone https://github.com/siddharthvaddem/openscreen.git
cd openscreen

# 第三步：安装依赖
npm install

# 第四步：启动开发模式
npm run dev

# 第五步（可选）：构建生产版本
npm run build

验证安装

# 方式一的用户：启动 OpenScreen 应用，应该看到录制控制面板界面
# 界面中央应该显示 "Select a window or screen to record" 或类似提示

# 方式二（源码构建）的用户：确认开发服务器已启动
# 终端应显示 Electron 窗口已打开，React DevTools 可用

预期结果：
- 应用窗口正常显示，无白屏或错误弹窗
- macOS 首次启动时，系统会请求屏幕录制和麦克风权限
  → 在"系统设置 → 隐私与安全性 → 屏幕录制"中勾选 OpenScreen
  → 在"系统设置 → 隐私与安全性 → 麦克风"中勾选 OpenScreen（如需录制语音）
- 授权后重启应用以使权限生效

注意事项： - macOS 用户如果跳过权限授予步骤，录制时将只能得到黑屏画面或无音频的视频。 - Linux 用户如果遇到 libgbm 相关错误，需要安装 libgbm1 包：sudo apt install libgbm1（Ubuntu/Debian）。 - Windows 用户可能需要允许应用通过 Windows Defender 防火墙。

练习题： 1. 按照上述步骤安装 OpenScreen，确认应用能正常启动 2. 检查你的操作系统是否满足系统音频捕获的要求

第一部分：入门篇

1.1 基本屏幕录制

概念讲解：

OpenScreen 的核心功能是屏幕录制。它基于 Electron 框架的 desktopCapturer API 捕获屏幕画面，支持两种录制目标：

• 窗口录制（Window）：录制指定应用程序的窗口，不包含其他窗口和桌面元素。适合录制单一应用的操作演示。
• 全屏录制（Full Screen）：录制整个屏幕的所有内容。适合需要展示多窗口切换的场景。

录制过程中，OpenScreen 同时记录鼠标的位置和点击事件，这些数据会在后处理阶段用于自动缩放功能（详见 1.2 节）。

操作示例：

1. 启动 OpenScreen 应用
2. 在主界面选择录制目标：
   a. 点击 "Window" 标签 → 从下拉列表中选择目标窗口
   b. 或点击 "Full Screen" 标签 → 选择要录制的显示器
3. 点击红色的录制按钮（或使用快捷键）开始录制
4. 录制过程中，正常操作你的应用
   → OpenScreen 会在后台捕获画面和鼠标事件
5. 完成录制后，点击停止按钮
6. 应用会自动切换到编辑界面，显示录制结果

预期结果：
- 录制过程中，OpenScreen 窗口会显示录制时长计时器
- 停止录制后，自动进入编辑界面
- 编辑界面左侧显示视频预览，右侧/下方显示时间轴
- 可以在预览中回放录制内容

注意事项： - 录制前建议关闭不必要的应用程序窗口，避免窗口切换干扰录制。 - 如果录制目标窗口被最小化或遮挡，录制内容可能不完整。 - 录制时 OpenScreen 自身的窗口不会被录制到画面中。

练习题： 1. 打开一个浏览器窗口，使用 OpenScreen 录制 30 秒的窗口操作视频 2. 尝试录制全屏，观察两种录制模式的区别

1.2 智能缩放（Auto Zoom）

概念讲解：

智能缩放（Auto Zoom）是 OpenScreen 最核心的差异化功能，也是它被称作"Screen Studio 开源替代品"的关键原因。

工作原理：在录制过程中，OpenScreen 持续追踪鼠标的点击事件。每次用户点击时，录制画面会自动缩放到点击区域附近，聚焦于用户的操作。缩放动画使用 Bézier（贝塞尔）曲线进行平滑过渡，避免生硬的画面跳转。这样生成的视频会自动引导观众的视线聚焦到操作的关键区域，无需手动添加缩放效果。

用户可以调节缩放深度（Zoom Depth）来控制放大倍数。较高的缩放深度意味着更强烈的放大效果，适合细节操作（如点击小按钮）；较低的缩放深度则更温和，适合展示整体操作流程。

操作示例：

1. 在录制设置界面（开始录制前），找到 "Auto Zoom" 选项
   → 默认是开启状态
2. 调节 "Zoom Depth" 滑块：
   - 低缩放深度（1x - 1.5x）：轻微放大，适合整体流程展示
   - 中缩放深度（1.5x - 2.5x）：推荐值，平衡聚焦效果和上下文可见性
   - 高缩放深度（2.5x - 3x+）：强烈放大，适合细节操作（如点击小按钮）
3. 开始录制
4. 在录制过程中，每次点击鼠标时：
   → 画面会自动以点击位置为中心进行缩放
   → 缩放过渡使用平滑的 Bézier 曲线动画
   → 点击结束后画面会缓慢回退到全屏视图
5. 停止录制后，在编辑界面可以预览自动缩放效果
6. 如果自动缩放位置不理想，可以在编辑界面手动调整缩放关键帧

预期结果：
- 录制完成的视频中，每次鼠标点击位置会被自动放大
- 缩放过渡动画流畅，使用 Bézier 曲线平滑效果
- 鼠标光标移动使用平滑的曲线动画（而非原始的线性移动）
- 点击区域周围的细节清晰可见，同时保留了全屏上下文

注意事项： - 缩放深度设置过高可能导致放大后的画面模糊（受屏幕分辨率限制）。建议在 1.5x - 2.5x 范围内选择。 - 如果操作节奏很快（频繁点击），自动缩放可能来不及完全展开就切换到下一个位置。建议适当放慢操作节奏。 - 在编辑界面中可以通过拖动时间轴上的缩放关键帧来手动调整缩放位置和时长。

练习题： 1. 使用中缩放深度（2x）录制一段展示浏览器中点击 3 个不同按钮的操作视频，观察自动缩放效果 2. 分别使用低（1x）和高（3x）缩放深度录制同一段操作，对比效果差异

1.3 音频捕获设置

概念讲解：

OpenScreen 支持同时录制麦克风音频和系统音频（System Audio，即电脑播放的声音）。但音频捕获的能力因平台而异，这是用户最常遇到问题的环节之一。

各平台音频支持情况：

操作示例：

1. 在录制设置界面，找到音频设置区域
2. 麦克风设置：
   - 勾选 "Record Microphone" 启用麦克风录制
   - 从下拉列表中选择要使用的麦克风设备
   - 调节麦克风音量（建议测试录制几秒钟确认音量合适）
3. 系统音频设置（如果平台支持）：
   - 勾选 "Record System Audio" 启用系统音频捕获
   - 系统音频会捕获电脑播放的所有声音（包括浏览器、音乐播放器等）

4. 验证音频设置：
   - 开始一段短录制（5-10 秒）
   - 对着麦克风说话
   - 播放一段音乐或视频（测试系统音频）
   - 停止录制后回放，确认两种音频都被正确录制

预期结果：
- 麦克风音频：录制期间说的话在回放中清晰可闻
- 系统音频：录制期间电脑播放的声音在回放中可以听到
- 两种音频混合在最终视频中，无需手动对齐

注意事项： - macOS 12 及以下用户：无法捕获系统音频。如果需要录制系统声音，可以使用虚拟音频驱动（如 BlackHole）将系统音频重定向到麦克风输入。 - Linux 用户：系统音频捕获需要 PipeWire。检查 PipeWire 是否运行：systemctl --user status pipewire。如果未运行，安装并启动：sudo apt install pipewire && systemctl --user start pipewire。 - 音频不同步是常见问题：如果录制的视频中出现音频和画面不同步的现象，尝试减少同时运行的应用程序以降低系统负载。

练习题： 1. 确认你的操作系统是否支持系统音频捕获 2. 录制一段同时包含语音旁白和系统音频的短视频（10 秒），验证音频捕获效果

第二部分：进阶篇

2.1 自定义背景设置

概念讲解：

自定义背景（Custom Backgrounds）功能允许你为录制视频设置一个视觉背景。录制画面（经过自动缩放处理后）会被居中放置在这个背景之上。这类似于在专业视频制作中将主体画面叠加在背景图上。

OpenScreen 支持三种类型的背景： - 壁纸图片（Wallpaper）：使用一张图片作为背景，适合品牌化视频 - 纯色（Solid Color）：使用单一颜色填充背景，简洁大方 - 渐变色（Gradient）：使用两种颜色的渐变作为背景，更具视觉吸引力

背景效果通过 PixiJS 2D 渲染引擎在 GPU 上完成合成，确保处理效率。

操作示例：

1. 在录制设置或编辑界面中，找到 "Background" 设置
2. 选择背景类型：
   a. 壁纸图片（Wallpaper）：
      - 点击 "Upload Image" 上传自定义图片
      - 推荐使用高分辨率图片（1920x1080 或更高）
      - 图片会自动缩放以填满背景区域
   b. 纯色（Solid Color）：
      - 点击颜色选择器选择颜色
      - 推荐使用品牌色或与录制内容协调的颜色
      - 常用选择：深色背景（#1a1a2e、#16213e）更显专业
   c. 渐变色（Gradient）：
      - 选择两种颜色作为渐变起点和终点
      - 选择渐变方向（线性/径向）
      - 推荐组合：深蓝到紫色、深灰到黑色
3. 预览效果：录制画面会显示在背景中央，四周被背景填充
4. 调整录制画面的圆角和阴影效果（如有选项）以增强视觉层次感

预期结果：
- 录制画面居中显示在自定义背景之上
- 缩放操作时，背景保持不变，录制画面在背景上缩放
- 最终导出的视频中背景效果完整呈现
- 视频整体视觉品质显著提升，看起来更加专业

注意事项： - 背景图片如果分辨率过低，在大屏幕上导出时可能出现模糊。建议使用至少 1920x1080 分辨率的图片。 - 纯色背景的选择应与录制内容的色调协调。避免使用过于鲜艳的颜色（如纯红、纯黄），以免分散观众注意力。 - 自定义背景功能在缩放时效果最佳——录制画面放大时，背景作为衬托变得更加明显。

练习题： 1. 分别尝试壁纸图片、纯色和渐变色三种背景类型，导出同一段录制视频的三个版本，对比视觉效果 2. 为你的品牌或项目选择一个合适的背景风格，说明选择理由

2.2 标注与注释

概念讲解：

标注（Annotations）功能允许你在录制视频上叠加文本、箭头和图片元素，用于引导观众的注意力和解释操作步骤。标注可以设置出现的时间和持续时长，实现精确的信息展示时机控制。

三种标注类型： - 文本标注（Text）：在视频画面上添加文字说明，用于解释当前操作的意图或提供上下文信息 - 箭头指示（Arrow）：用箭头指向画面中的特定元素，用于突出按钮、菜单项或其他交互元素 - 图片叠加（Image）：将图片叠加到视频画面上，用于显示 Logo、图标或其他视觉元素

标注系统与时间轴编辑器集成，每个标注在时间轴上都有对应的可拖拽片段，方便精确调整出现时机。

操作示例：

1. 在编辑界面中，点击标注工具栏（通常在画面预览上方或侧边）
2. 添加文本标注：
   a. 选择 "Text" 工具
   b. 在画面上点击要放置文本的位置
   c. 输入文本内容（如 "点击此处登录"）
   d. 在时间轴上拖拽标注片段，设置文本出现的时间段
   e. 调整文本样式（字体大小、颜色、背景等）
3. 添加箭头指示：
   a. 选择 "Arrow" 工具
   b. 在画面上拖拽绘制箭头（起点到终点）
   c. 将箭头指向需要突出的元素
   d. 在时间轴上设置箭头出现的时间段
4. 添加图片叠加：
   a. 选择 "Image" 工具
   b. 上传图片文件（如公司 Logo）
   c. 调整图片大小和位置
   d. 在时间轴上设置图片显示的时间段
5. 预览：点击播放按钮查看标注效果

预期结果：
- 文本标注在指定时间段内显示在画面上，清晰可读
- 箭头指示准确指向目标元素，颜色和样式与视频协调
- 图片叠加在指定位置正确显示，不遮挡重要内容
- 标注的出现和消失时机与操作步骤精确对齐

注意事项： - 标注不宜过多：过多的文本和箭头会让画面变得杂乱，反而分散观众注意力。建议每个关键操作步骤最多添加 1 个标注。 - 标注持续时间不宜过短：文本标注至少显示 2-3 秒，确保观众有足够时间阅读。 - 箭头颜色应与背景形成足够对比：在浅色背景上使用深色箭头，深色背景上使用浅色箭头。 - 自动缩放会改变画面的聚焦区域：确保标注的位置在缩放后仍然可见。

练习题： 1. 录制一段展示 Web 应用登录流程的视频，添加文本标注说明每个步骤，添加箭头指向输入框和按钮 2. 思考在什么情况下使用图片叠加比文本标注更有效

2.3 视频修剪与速度控制

概念讲解：

OpenScreen 提供基础的视频编辑功能，让你无需切换到其他视频编辑软件即可完成常用的后期处理操作：

• 修剪（Trim）：裁剪录制视频的前后不需要的部分。例如，录制开始时的准备时间、操作失误的部分、录制结束时的停顿等。
• 速度控制（Speed Control）：调整视频的播放速度。可以将冗长的操作过程加速播放（如安装过程），或将关键操作减速播放以突出细节。

编辑界面使用 dnd-timeline（拖拽时间轴）组件，支持直观的拖拽操作来调整视频片段。

操作示例：

1. 在编辑界面的时间轴上定位视频片段
2. 修剪视频：
   a. 拖拽时间轴左边缘的裁剪手柄 → 去除开头的多余部分
   b. 拖拽时间轴右边缘的裁剪手柄 → 去除结尾的多余部分
   c. 预览修剪后的视频，确认起止点合适
3. 调整播放速度：
   a. 找到速度控制选项（通常在编辑工具栏中）
   b. 选择速度倍率：
      - 0.5x：减速播放，突出细节
      - 1.0x：正常速度
      - 1.5x - 2.0x：加速播放，压缩冗长操作
   c. 预览速度调整后的效果
4. 完成编辑后，进入导出步骤（详见 2.4 节）

预期结果：
- 修剪后的视频精确保留需要的部分，去除了开头和结尾的无效内容
- 速度调整后的视频播放流畅，无卡顿或音调异常
- 编辑过程中可以随时预览效果，确认满意后再导出

注意事项： - 修剪操作会丢失裁剪掉的视频数据。建议在修剪前先导出一份原始录制作为备份。 - 速度调整会影响视频总时长，但不影响标注的出现时机——标注会跟随视频内容的时间位移。 - OpenScreen 的编辑功能相对基础，不支持多轨编辑、转场效果、字幕添加等高级功能。如果需要这些功能，建议将 OpenScreen 导出的视频导入 DaVinci Resolve（免费）或 Premiere Pro 进行进一步编辑。

练习题： 1. 录制一段 1 分钟的操作视频，使用修剪功能去掉前后各 5 秒的内容 2. 将修剪后的视频速度调整为 1.5x，观察加速效果

2.4 多宽高比导出

概念讲解：

OpenScreen 支持将录制视频按多种宽高比（Aspect Ratio）导出，适配不同社交媒体平台的视频规格要求。这是 OpenScreen 的一个实用功能——你只需录制一次，就可以导出适合不同平台的多个版本。

支持的宽高比： - 1:1 — 社交媒体方形视频（Instagram Feed、LinkedIn） - 16:9 — 标准横屏视频（YouTube、Twitter/X、博客嵌入） - 9:16 — 竖屏短视频（TikTok、Instagram Reels、YouTube Shorts、小红书） - 4:5 — Instagram 竖版方形（Instagram Feed 竖版） - 4:3 — 传统屏幕比例（演示文稿、旧设备兼容）

操作示例：

1. 完成录制和编辑后，点击 "Export" 或 "导出" 按钮
2. 在导出设置中，选择目标宽高比：
   a. 选择 "16:9" → 适合 YouTube 发布
   b. 选择 "9:16" → 适合 TikTok / Reels 发布
   c. 选择 "4:5" → 适合 Instagram Feed 发布
3. OpenScreen 会自动处理画面裁剪和缩放以适配目标比例：
   - 对于竖屏比例（9:16、4:5），会自动选取录制画面的垂直区域
   - 自动缩放功能会在新比例下重新计算缩放区域
4. 点击 "Export" 开始导出
5. 等待导出完成（时间取决于视频长度和渲染复杂度）
6. 导出的视频文件保存到指定位置

预期结果：
- 16:9 导出：标准横屏视频，适合 YouTube 等平台
- 9:16 导出：竖屏视频，自动聚焦于画面的关键区域
- 4:5 导出：Instagram 竖版方形视频
- 所有导出的视频中，自动缩放、背景和标注效果均正确保留

注意事项： - 不同宽高比导出时，画面边缘可能被裁剪。如果标注放置在画面边缘，导出为竖屏比例时可能被裁掉。建议将标注放在画面中心区域。 - 每次只能导出一个宽高比。如果需要多个版本，需要分别选择不同宽高比多次导出。 - 导出时间与视频长度和特效复杂度成正比。带有运动模糊和复杂背景的视频导出时间会更长。

练习题： 1. 将同一段录制视频分别导出为 16:9 和 9:16 两个版本，对比画面差异 2. 思考在导出 9:16 竖屏视频时，原始横屏录制中的哪些内容可能被裁剪

第三部分：高级篇

3.1 手动缩放与关键帧调整

概念讲解：

虽然自动缩放（Auto Zoom）能处理大多数场景，但有时自动缩放的效果可能不理想——例如缩放位置偏离了关键元素、缩放速度过快或过慢、或者需要在没有点击操作的位置添加缩放效果。这时就需要手动缩放和关键帧调整。

在 OpenScreen 的编辑界面中，时间轴上会显示自动缩放生成的关键帧。你可以： - 移动关键帧：改变缩放发生的时间点 - 调整缩放区域：改变缩放的目标位置和范围 - 添加新关键帧：在需要额外缩放效果的位置手动添加 - 删除关键帧：移除不需要的自动缩放效果

操作示例：

1. 在编辑界面的时间轴上，找到缩放关键帧标记（通常显示为菱形或圆形图标）
2. 调整现有关键帧：
   a. 拖拽关键帧在时间轴上的位置 → 改变缩放发生的时间
   b. 选中关键帧后，在预览画面中拖拽缩放区域 → 改变缩放目标位置
   c. 调整缩放深度滑块 → 改变放大倍数
3. 添加新关键帧：
   a. 在时间轴上需要添加缩放的位置双击（或使用 "Add Keyframe" 按钮）
   b. 在预览画面中拖拽选择缩放区域
   c. 设置缩放深度和过渡动画参数
4. 删除关键帧：
   a. 选中不需要的关键帧
   b. 按 Delete 键或使用 "Remove Keyframe" 按钮
5. 预览调整后的效果

预期结果：
- 手动调整后的缩放位置更加精确，聚焦在关键元素上
- 缩放时机与操作步骤完美对齐
- 添加的关键帧补足了自动缩放遗漏的场景
- 删除不需要的关键帧后，视频节奏更流畅

注意事项： - 手动关键帧调整是精细操作，建议先预览自动缩放效果，再有针对性地调整不理想的部分，而非全部手动调整。 - 过多的关键帧会使视频节奏显得急促。建议每个缩放区域至少保持 1-2 秒的稳定画面。 - 调整关键帧后，运动模糊效果会自动重新计算。

3.2 从源码构建与本地开发

概念讲解：

OpenScreen 基于 MIT 开源许可发布，任何人都可以 Fork 仓库进行定制开发。如果你希望修改 OpenScreen 的行为、修复 Bug 或添加新功能，需要从源码构建项目。

OpenScreen 的技术栈： - TypeScript — 主要编程语言 - React — 用户界面框架 - Electron — 桌面应用框架（提供跨平台能力） - Vite — 构建工具（开发模式的热重载） - PixiJS — 2D 渲染引擎（用于缩放、背景、运动模糊等视觉效果）

操作示例：

# 1. 确保已安装 Node.js v18+ 和 Git
node --version
# 预期输出: v18.x.x 或更高

git --version
# 预期输出: git version 2.x.x

# 2. Fork 并克隆仓库（在 GitHub 上 Fork 后）
git clone https://github.com/YOUR_USERNAME/openscreen.git
cd openscreen

# 3. 安装依赖
npm install
# 预期输出: added xxx packages in xx秒

# 4. 启动开发模式（带热重载）
npm run dev
# 预期输出:
# - Vite 开发服务器启动
# - Electron 窗口自动打开
# - 控制台显示开发日志

# 5. 修改源码后，Vite 会自动热重载
# 修改 React 组件 → 界面自动更新
# 修改 Electron 主进程代码 → 需要重启开发服务器

# 6. 运行测试（如有）
npm test

# 7. 构建生产版本
npm run build
# 预期输出: 构建产物在 dist/ 目录中

预期结果：
- npm run dev 启动后，Electron 窗口正常打开
- 修改 React 组件文件（如 src/renderer/ 下的文件）后，界面自动更新
- 修改 Electron 主进程文件（如 src/main/ 下的文件）后，需要手动重启
- npm run build 生成的安装包可以在目标平台上正常安装和运行

注意事项： - OpenScreen 项目结构可能随版本更新变化。建议在开始开发前阅读仓库中的 CONTRIBUTING.md（如有）和 README.md。 - Electron 应用有两种进程：主进程（Main Process，Node.js 环境）和渲染进程（Renderer Process，浏览器环境）。修改代码前需要理解目标文件属于哪个进程。 - PixiJS 渲染逻辑通常在渲染进程中。如果需要修改缩放算法、背景合成或运动模糊效果，重点查看渲染进程相关的代码。

练习题： 1. Fork OpenScreen 仓库，克隆到本地并成功启动开发模式 2. 在源码中找到处理自动缩放逻辑的文件，阅读并理解其核心算法

3.3 最佳实践

1. 录制前先规划操作流程。 在开始录制前，先在脑海中或纸上梳理演示的操作步骤。明确每一步要点击什么、展示什么。规划好的录制比即兴录制更流畅，自动缩放效果也更好。

2. 操作节奏放慢，给缩放留出时间。 每次点击操作之间保持 1-2 秒的间隔，让自动缩放有足够时间完成过渡动画。过快的连续点击会导致缩放效果互相干扰，画面频繁跳动。

3. 选择合适的缩放深度。 缩放深度不是越大越好。对于整体流程演示，使用 1.5x-2x 的低缩放深度；对于需要突出小按钮或细节操作的场景，临时切换到 2.5x-3x 的高缩放深度。

4. 录制完成后立即导出。 OpenScreen 处于 Beta 阶段，应用崩溃时未导出的录制内容可能丢失。养成录制完成后立即导出的习惯，避免数据丢失。

5. 为不同平台准备不同版本。 利用多宽高比导出功能，为每个目标平台准备专门的视频版本。YouTube 用 16:9，TikTok/Reels 用 9:16，Instagram Feed 用 4:5。不要试图用一个版本适配所有平台。

6. 音频录制先测试后正式录制。 音频捕获是 OpenScreen 用户的常见痛点。正式录制前先做一次 5-10 秒的测试录制，确认麦克风和系统音频都被正确捕获，避免录制完成后才发现无音频。

第四部分：实战项目

项目需求

项目名称： 多平台产品演示视频制作工作流

需求描述： 为一个开源项目制作一套完整的产品演示视频，用于 GitHub README（16:9）、Twitter/X（16:9）、TikTok（9:16）和 Instagram Feed（4:5）四个平台的发布。视频需要包含自动缩放、自定义背景、文本标注和箭头指示，展示项目从安装到使用的核心流程。

综合运用知识点： - 基本屏幕录制（1.1 节）— 录制安装和使用流程 - 智能缩放（1.2 节）— 自动聚焦关键操作 - 音频捕获（1.3 节）— 录制语音旁白 - 自定义背景（2.1 节）— 统一品牌风格 - 标注与注释（2.2 节）— 添加步骤说明 - 视频修剪（2.3 节）— 去除多余片段 - 多宽高比导出（2.4 节）— 适配不同平台

项目设计

multi-platform-demo-video/
├── planning/
│   └── script.md           # 录制脚本：每一步操作和对应旁白
├── recordings/
│   └── raw-recording.mp4   # 原始录制文件（备份）
├── exports/
│   ├── youtube-16x9.mp4    # YouTube 版本
│   ├── twitter-16x9.mp4    # Twitter/X 版本
│   ├── tiktok-9x16.mp4     # TikTok 版本
│   └── instagram-4x5.mp4   # Instagram 版本
└── README.md               # 工作流说明文档

完整实施步骤

步骤一：规划录制脚本

# 产品演示视频录制脚本

## 准备工作
- 打开终端，确保命令行工具已安装
- 打开浏览器，确保项目页面可访问
- 设置 OpenScreen 录制参数：
  - 目标：终端窗口
  - 自动缩放：开启，缩放深度 2x
  - 背景：深蓝渐变（#0f0c29 → #302b63）
  - 麦克风：开启

## 操作流程（每个步骤保持 3-5 秒）

步骤 1: 打开终端
  → 标注：文本 "安装 CLI 工具"
  → 操作：输入安装命令并回车

步骤 2: 等待安装完成
  → 无标注（让自动缩放追踪进度条）

步骤 3: 运行初始化命令
  → 标注：箭头指向命令提示符
  → 操作：输入初始化命令

步骤 4: 打开项目页面
  → 切换到浏览器窗口
  → 标注：文本 "查看生成的项目"

步骤 5: 展示关键功能
  → 标注：箭头指向功能入口
  → 操作：点击关键功能按钮

步骤 6: 结束
  → 保持 2 秒静止画面
  → 停止录制

步骤二：录制原始视频

1. 按照 OpenScreen 安装流程启动应用（1.1 节知识点）
2. 配置录制设置：
   - 录制目标：选择包含终端和浏览器的屏幕区域
   - 自动缩放：开启，缩放深度 2.0x（1.2 节知识点）
   - 麦克风：开启，录制语音旁白（1.3 节知识点）
3. 设置背景：选择深蓝渐变（2.1 节知识点）
4. 按照录制脚本逐步操作
5. 录制完成后立即导出原始视频作为备份

步骤三：后期编辑

1. 在编辑界面中修剪视频（2.3 节知识点）：
   - 去除录制开始时的 3 秒准备时间
   - 去除安装等待期间的多余部分（可加速到 2x）
   - 去除录制结束时的 2 秒停顿

2. 添加标注（2.2 节知识点）：
   - 步骤 1：添加文本标注 "安装 CLI 工具"
   - 步骤 3：添加箭头指向命令提示符
   - 步骤 4：添加文本标注 "查看生成的项目"
   - 步骤 5：添加箭头指向功能入口

3. 手动调整缩放关键帧（3.1 节知识点）：
   - 检查每个自动缩放的位置是否准确
   - 调整偏离的缩放区域
   - 确保缩放区域不超出画面边界

步骤四：多平台导出

1. 导出 YouTube 版本（2.4 节知识点）：
   - 宽高比：16:9
   - 文件名：youtube-16x9.mp4
   - 检查标注在横屏下的显示效果

2. 导出 TikTok 版本：
   - 宽高比：9:16
   - 文件名：tiktok-9x16.mp4
   - 检查标注是否在画面中心区域（竖屏会裁剪边缘）

3. 导出 Instagram 版本：
   - 宽高比：4:5
   - 文件名：instagram-4x5.mp4
   - 检查标注在竖版方形下的显示效果

4. 导出 Twitter/X 版本：
   - 宽高比：16:9
   - 文件名：twitter-16x9.mp4
   - 与 YouTube 版本相同（可选裁剪不同片段）

预期结果：
- youtube-16x9.mp4：标准横屏视频，自动缩放效果清晰
  → 适合嵌入 GitHub README 和博客文章
- tiktok-9x16.mp4：竖屏视频，画面聚焦于关键操作区域
  → 自动缩放在竖屏下重新计算，保持聚焦效果
- instagram-4x5.mp4：竖版方形视频，兼顾信息量和画面美感
  → 标注在 4:5 比例下完整可见
- 所有版本均包含语音旁白、自动缩放、自定义背景和标注效果

代码解析

1. 基本屏幕录制（1.1 节知识点）：选择录制目标和启动录制是整个工作流的基础。录制质量直接决定后续所有步骤的效果。

2. 智能缩放（1.2 节知识点）：2x 缩放深度在产品演示视频中提供了良好的聚焦效果。录制时放慢操作节奏，确保每次点击都有完整的缩放过渡。

3. 音频捕获（1.3 节知识点）：语音旁白让视频更加易于理解。录制前测试麦克风音量，确保旁白清晰。

4. 自定义背景（2.1 节知识点）：深蓝渐变背景为所有平台版本提供了统一的品牌风格。渐变色在横屏和竖屏下都有良好的视觉效果。

5. 标注与注释（2.2 节知识点）：文本标注和箭头指示配合使用，引导观众关注关键操作。标注放置在画面中心区域，确保在不同宽高比导出时都能完整显示。

6. 视频修剪（2.3 节知识点）：去除多余片段和加速安装等待过程，使最终视频节奏紧凑、信息密度高。

7. 多宽高比导出（2.4 节知识点）：一次录制、多次导出，最大化内容利用率。四个版本分别针对不同平台优化。

扩展挑战

1. 添加品牌水印。 在所有导出版本中添加统一的品牌 Logo 图片叠加。提示：使用标注功能中的图片叠加（Image）工具，将 Logo 放置在画面角落，确保在所有宽高比下都可见。

2. 制作 60 秒精简版。 将完整的演示视频浓缩为 60 秒的精简版，适合 Twitter/X 和短视频平台。提示：利用速度控制和修剪功能压缩冗长操作，保留最核心的 3-5 个步骤。

3. 自动化多平台导出工作流。 编写一个 shell 脚本，在 OpenScreen 导出 16:9 版本后，使用 FFmpeg 自动裁剪生成 9:16 和 4:5 版本。提示：ffmpeg -i input.mp4 -vf "crop=ih*9/16:ih" output_9x16.mp4

第五部分：常见问题与排查指南

常见错误及解决方案

调试技巧

1. 使用短录制快速测试。 遇到问题时，先录制一段 5-10 秒的短视频测试。短视频导出快，便于快速排查问题是否仍然存在。确认基本功能正常后再录制长视频。

2. 检查系统权限设置。 大多数录制问题（黑屏、无音频）与系统权限有关。在 macOS 上，检查"系统设置 → 隐私与安全性"中的屏幕录制、麦克风和辅助功能权限。在 Linux 上，检查 PipeWire 服务状态和用户权限。

3. 关注 GitHub Issue 列表。 OpenScreen 有 102 个未关闭 Issue。遇到问题时，先在 GitHub Issues 中搜索是否有其他人报告了相同问题。如果是已知 Bug，可以关注其修复进展或临时使用社区提供的 workaround。

第六部分：学习路线推荐

官方文档推荐阅读顺序

推荐进阶资源

1. Electron 桌面应用开发 — OpenScreen 基于 Electron 构建。如果希望参与源码贡献或 Fork 定制，推荐学习 Electron 官方文档。重点关注 desktopCapturer API（屏幕捕获）和 BrowserWindow API（窗口管理）。

2. PixiJS 2D 渲染引擎 — OpenScreen 的缩放、背景和运动模糊效果基于 PixiJS 实现。推荐学习 PixiJS 官方文档。理解 PixiJS 的 Sprite、Container、Filter 和 Ticker 概念有助于理解 OpenScreen 的渲染管线。

3. 视频制作与剪辑基础 — 如果希望提升视频制作技能，推荐学习基本的视频剪辑原理：镜头语言、节奏控制、色彩搭配。这些知识可以帮助你制作更专业的演示视频，与 OpenScreen 的自动缩放和背景功能配合使用效果更佳。

术语对照表

教程信息来源： - GitHub - siddharthvaddem/openscreen — 源码、README、功能说明 - GitHub API - siddharthvaddem/openscreen — 项目元数据 - OpenScreen 官方主页 — 功能介绍、下载链接 - Emelia.io - OpenScreen Review — Auto Zoom + Bézier cursor animations 详细评测 - ByteIota - OpenScreen Review — "Best Open Source Screen Recorder" 评测 - Hacker News Discussion — 作者访谈、社区反馈 - 信息获取日期：2026-04-10