Recordly 开源屏幕录制器全指南：从录制、智能缩放编辑到 MP4/GIF 导出的完整工作流

Recordly 开源屏幕录制器全指南从录制、智能缩放编辑到 MP4/GIF 导出的完整工作流【免费下载链接】RecordlyCreate polished demo videos without editing skills. Mac/Windows/Linux项目地址: https://gitcode.com/gh_mirrors/re/RecordlyRecordly 是一款面向演示场景的开源桌面屏幕录制与编辑器内置自动缩放建议、光标润色、摄像头气泡叠加与样式化边框等动态呈现工具让创作者无需动效设计背景即可一站式产出精致的产品演示视频。本文以官方 READMEREADME.zh-CN.md为主线结合仓库源码与测试完整讲解其核心功能、安装构建、系统要求、使用流程、平台限制与底层工作原理读完即可上手录制、编辑并导出成品。Recordly 是什么Recordly 是一款桌面应用用于录制并编辑屏幕内容内置面向演示视频的动态呈现工具。传统工作流中创作者需要把原始录制素材交给动效设计师去补缩放、光标润色或样式化背景Recordly 的目标是在一个地方免费完成整套流程——录制完直接进编辑器套用自动缩放与光标效果选好背景样式导出为 MP4 或 GIF。项目定位见 package.json 描述是 A free, creator-focused screen recorder with auto-zoom, cursor effects, backgrounds, annotations, and more - built for polished videos out of the box。仓库当前版本为 1.4.0采用 AGPL 3.0 开源协议发布。Recordly 支持的平台macOS14.0Windows10 Build 19041Linux现代发行版平台捕获方案差异这是理解后续限制章节的关键前提macOS使用基于 ScreenCaptureKit 的原生捕获辅助程序。Windows在支持的系统版本上使用原生 Windows Graphics CaptureWGC辅助程序并支持原生 WASAPI 音频。Linux通过 Electron 捕获 API 录制目前尚不支持隐藏真实光标。核心功能一览自动缩放、光标润色与样式化画面Recordly 可以根据操作自动强调重点区域生成自动缩放建议平滑光标运动添加动态效果并将最终画面放进带有壁纸、纯色、渐变、模糊、留白和阴影的样式化边框中。实现层面自动缩放建议的逻辑位于 zoomSuggestionUtils.ts光标运动平滑与摆动效果在 motionSmoothing.ts 与 cursorSway.ts 中实现并配套了对应的 zoomSuggestionUtils.test.ts、cursorSway.test.ts 等测试来保证行为可预期。动态摄像头气泡叠加可以把摄像头素材作为气泡叠加层加入画面使用预设位置或自定义 X/Y 坐标摆放支持镜像、阴影和圆角调节也可以让它跟随缩放变化保证动态镜头里整体视觉更协调。为演示设计的时间线编辑使用拖拽式时间线工具处理缩放、裁剪、变速区域、注释、额外音频区域以及裁切感知编辑并将工作保存为.recordly项目文件之后随时回来继续编辑。时间线主体位于 TimelineEditor.tsx拖拽排序与布局计算分别由timeline/dnd与 timelineLayout.ts 承担。扩展与市场Recordly 拥有社区驱动的扩展系统任何人都可以构建和发布扩展来添加新功能例如光标点击音效、设备边框、浏览器模拟外壳、壁纸、渲染钩子、设置面板等。扩展开发的完整指南见仓库根目录的 EXTENSIONS.md。全部功能详解录制录制整个显示器或单个应用窗口录制完成后直接进入编辑器录制麦克风音频和系统音频在支持的平台上使用原生捕获后端从保存的.recordly项目文件继续编辑可在应用中打开已有录像或已有项目文件录制目录默认位于用户数据目录下的recordings子目录其定义见 appPaths.tsRECORDINGS_DIR path.join(USER_DATA_PATH, recordings)应用启动时会自动创建该目录main.ts。时间线与编辑拖拽式时间线编辑裁掉不需要的片段添加手动缩放区域根据光标活动生成自动缩放建议添加加速和减速区域添加文本、图片和图形注释在时间线上添加额外音频区域裁切录制画面保存并重新打开项目保留编辑状态变速、裁剪、缩放等区域命令分别实现在 useClipRegionCommands.ts、useZoomRegionCommands.ts 与 useAnnotationRegionCommands.ts 中编辑历史可撤销/重做由 useEditorHistory.ts 管理。光标控制显示或隐藏渲染后的光标叠加层调整光标大小光标平滑光标运动模糊点击弹跳效果光标摆动效果光标循环模式方便导出更自然的循环片段使用 macOS 风格的渲染光标素材渲染后的光标叠加层通过 cursorRenderer.ts 合成光标素材资源存放在 src/assets/cursors 下按 macOScustom / tahoe与 Windows 11 风格分组其中tahoe目录对应 macOS Tahoe 风格光标macos/custom为经典 macOS 风格windows11为 Windows 11 风格均为 SVG 矢量素材。摄像头叠加启用或禁用摄像头叠加素材上传、替换或移除摄像头素材镜像摄像头画面调整尺寸使用预设位置或自定义 X/Y 坐标调整边距调整圆角程度调整阴影强度可选的缩放联动摄像头缩放效果摄像头叠加的几何计算与缩放联动逻辑见 webcamOverlay.ts 及其测试 webcamOverlay.test.ts。画面样式与背景内置壁纸运行时自动发现 wallpapers 目录中的壁纸上传自定义背景图片纯色背景渐变背景画面留白圆角背景模糊投影阴影最终画面的宽高比预设内置壁纸清单定义于 src/lib/wallpapers.ts共 25 个内置条目含tahoe-light、sonoma-dark、ventura、iridescent-9等还支持wispysky.mp4这类视频壁纸壁纸资源本体位于 public/wallpapers 目录。运行时发现机制getAvailableWallpapers会通过window.electronAPI.listAssetDirectory(wallpapers)扫描该目录并按\.(avif|gif|jpe?g|png|svg|webp)$与\.(avi|m4v|mkv|mov|mp4|webm)$过滤出可用的图片/视频壁纸wallpapers.ts。导出MP4 导出GIF 导出导出质量选择GIF 帧率选择GIF 循环开关GIF 尺寸预设宽高比和输出尺寸控制在系统文件管理器中定位导出文件导出模块位于 src/lib/exporter其中 GIF 导出由 gifExporter.ts 实现依赖 gif.js见 package.json 依赖列表MP4 导出走 modernVideoExporter.ts 与 videoExporter.ts预览与导出共用同一套场景逻辑的设计可参考 modernFrameRenderer.ts 与 frameRenderer.ts。尺寸、宽高比、比特率等导出参数由 exportDimensions.ts、exportBitrate.ts 控制并配有对应测试。工作流与易用性可自定义键盘快捷键应用内快捷键说明在编辑器中直接打开反馈和问题链接编辑器偏好设置持久化导出后更快恢复预览快捷键体系定义于 src/lib/shortcuts.ts并通过 ShortcutsContext.tsx 提供给整个应用快捷键配置对话框见 ShortcutsConfigDialog.tsx。偏好持久化由 editorPreferences.ts 及 useEditorPreferencesPersistence.ts 负责。此外Recordly 还内置了多语言支持src/i18n共 12 个语言目录含简中/繁中/英/德/法/西/意/日韩/俄/葡/荷等与自动字幕/字幕编辑能力electron/ipc/captions。安装下载构建版本可从项目的 GitHub Releases 页面获取预构建发布版本macOS / Windows / Linux。Arch Linux / Manjaroyay可通过 AUR 安装recordly-binyay -S recordly-binPKGBUILD、桌面入口、发布同步以及可选的本地源码打包都维护在独立的 recordly-aur 仓库中因此 Recordly 主仓库本身不承担 Arch 发布维护工作。从源码构建前置依赖macOS安装 Xcode Command Line Toolsxcode-select --installLinuxUbuntu / Debiansudo apt install build-essential cmake libx11-dev libxtst-dev libxrandr-dev libxt-devWindows安装 Visual Studio 2022或 Build Tools并勾选 C 工作负载和 CMake。构建步骤git clone https://gitcode.com/gh_mirrors/re/Recordly recordly cd recordly npm install npm run dev如果需要打包构建npm run build也可以使用平台专用构建命令见 package.json 的 scripts 字段npm run build:macnpm run build:winnpm run build:linux说明构建脚本build:platform-native-helpers会依次触发 whisper 运行时、原生辅助程序、Windows 捕获、Windows GPU 导出、NVIDIA CUDA 合成器与光标监控等原生组件的编译package.json因此首次构建耗时较长。仓库已提供运行测试的命令npm testvitest见 vitest.config.ts。macOSApp cannot be opened本地构建的应用可能会被 macOS 隔离可以用以下命令移除隔离标记xattr -rd com.apple.quarantine /Applications/Recordly.app系统要求平台最低版本说明macOSmacOS 14.0 (Sonoma)使用 ScreenCaptureKit 捕获音频和麦克风所必需。WindowsWindows 10 20H1Build 190412020 年 5 月原生 Windows Graphics CaptureWGC辅助程序及最佳光标隐藏行为所必需。Linux任意现代发行版通过 Electron 捕获录制。系统音频通常需要 PipeWire。重要提示在 Windows 19041 之前的版本上录制仍可能通过回退捕获方式工作但真实系统光标可能仍会出现在视频中。Windows 原生 WGC 捕获辅助程序含 DXGI 会话、WASAPI 回环音频与 Media Foundation 编码的 C 实现位于 electron/native/windows-capture 与 electron/native/wgc-capture 目录macOS 侧则对应 ScreenCaptureKitRecorder.swift 与 NativeCursorMonitor.swift。使用方法录制启动 Recordly。选择屏幕或窗口。选择麦克风和系统音频选项。开始录制。停止录制后进入编辑器。编辑在编辑器中你可以添加裁剪、缩放、变速区域和注释调整光标行为和预览音量使用壁纸、纯色、渐变、模糊、留白和圆角来美化画面添加或调整摄像头叠加素材添加额外音频区域裁切画面并选择宽高比你可以随时将工作保存为.recordly项目。项目文件的快照模型与读写逻辑见 useProjectSnapshotModel.ts项目级生命周期与脏状态跟踪见 useProjectLifecycle.ts 和 projectDirtyState.ts。导出支持以下导出格式MP4适合常规视频输出GIF适合轻量分享和循环片段你可以在导出前调整格式相关设置例如质量、GIF 帧率、GIF 循环方式和输出尺寸。GIF 参数帧率、循环开关、尺寸预设由 gifExporter.ts 处理导出对话框与导出状态机分别见 ExportSettingsMenu.tsx 与 useExportSession.ts。平台限制光标捕获Recordly 会在录制画面上渲染一个经过美化的光标叠加层但真实系统光标是否能被隐藏仍取决于平台能力macOSScreenCaptureKit 可以较干净地排除真实光标。Windows最佳效果需要 Windows 10 Build 19041 和原生捕获辅助程序。较旧版本会回退到 Electron 捕获因此真实光标可能仍会显示。LinuxElectron 桌面捕获目前不支持隐藏真实光标。如果同时启用渲染光标叠加导出中可能会同时看到真实光标和样式化光标。系统音频系统音频支持因平台而异Windows原生 WASAPI 支持见 electron/native/windows-capture 中的 wasapi_loopback 实现。Linux通常需要 PipeWire。macOS需要 macOS 14.0 和基于 ScreenCaptureKit 的工作流ScreenCaptureKitRecorder.swift。工作原理Recordly 将平台相关的捕获层与基于渲染器的编辑、导出流程结合在一起。捕获Electron 负责录制流程和应用级控制。主进程入口 electron/main.ts 负责创建各窗口编辑器窗口、HUD 叠加窗口、源选择窗口、注册 IPC 处理器registerIpcHandlers、管理 GPU 开关与自动更新。macOS 使用原生 ScreenCaptureKit 辅助程序主进程会拉起原生 helper 进程并等待其 stdout 中出现Recording started标记以确认录制真正开始electron/ipc/recording/mac.ts。Windows 在可用时使用原生 Windows Graphics CaptureWGC辅助程序和原生音频辅助程序WASAPI 回环。编辑时间线区域定义缩放、裁剪、变速、音频叠加和注释光标和摄像头样式都保存在编辑器状态中。渲染场景合成由PixiJS负责。渲染器生命周期初始化、超时保护、销毁清理封装在 pixiApplicationLifecycle.ts包括初始化超时兜底initializePixiApplicationWithTimeout与安全销毁逻辑避免已销毁对象重复释放并有 pixiApplicationLifecycle.test.ts 验证。导出预览使用的同一套场景逻辑会被用于导出 MP4 或 GIF预览与导出共用 PixiJS 场景可参考 frameRenderer.ts 与 modernFrameRenderer.ts 的实现及配套测试。项目.recordly文件会保存源媒体路径和编辑器状态方便后续继续编辑。工作区与项目打开动作见 useProjectOpenActions.ts 与 useProjectSaveActions.ts。贡献与社区欢迎贡献。特别需要帮助的方向包括Linux 录制与光标行为改进导出性能与稳定性优化UI 和 UX 打磨本地化工作更多编辑工具与工作流优化请尽量让 Pull Request 保持聚焦测试录制、编辑、导出流程并避免无关重构。具体指南见 CONTRIBUTING.md。此外仓库还提供了应用内公告机制docs/announcements.md可通过编辑根目录的 announcements.json 远程发布公告或通过 src/content/announcements.ts 随版本内置。许可证与致谢Recordly 基于AGPL 3.0发布见 LICENSE.md。它最初从 OpenScreen 项目分叉而来此后逐步演变为一个不同的项目许多 OpenScreen 的功能如缩放动画也从早期版本的 Recordly 中直接移植而来。【免费下载链接】RecordlyCreate polished demo videos without editing skills. Mac/Windows/Linux项目地址: https://gitcode.com/gh_mirrors/re/Recordly创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考