Recordly 开源屏幕录制与演示视频编辑器:功能全景、跨平台架构与源码级解析

Recordly 开源屏幕录制与演示视频编辑器:功能全景、跨平台架构与源码级解析 Recordly 开源屏幕录制与演示视频编辑器功能全景、跨平台架构与源码级解析【免费下载链接】RecordlyCreate polished demo videos without editing skills. Mac/Windows/Linux项目地址: https://gitcode.com/gh_mirrors/re/RecordlyRecordly 是一款开源AGPL-3.0的桌面屏幕录制与演示视频编辑器面向操作讲解walkthrough、产品演示demo与产品视频场景内置自动缩放、光标润色、样式化边框、摄像头气泡叠加与时间线编辑能力无需专业剪辑技能即可产出精致成品。本文以仓库根目录 README.md 为主线结合 package.json、electron 原生捕获层、src/lib/exporter 导出管线等源码系统讲解其功能矩阵、跨平台架构、安装构建、使用流程与平台限制帮助读者快速上手并理解其底层实现原理。Recordly 是什么Recordly 是一款桌面应用用于录制并编辑屏幕内容内置面向演示视频的动态呈现工具。传统工作流中原始录屏素材通常需要交给动效设计师补缩放、光标润色或样式化背景Recordly 将这些动效能力内置到单一应用中在录制、编辑、导出一条链路里免费完成整套流程让创作者聚焦内容本身。从 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前端基于 React Vite桌面壳基于 Electron 43场景合成依赖 PixiJS 8。支持平台macOS14.0Windows10 Build 19041Linux现代发行版各平台捕获后端不同macOS 使用基于 ScreenCaptureKit 的原生捕获辅助程序Windows 在支持的系统版本上使用原生 Windows Graphics CaptureWGC辅助程序并支持原生 WASAPI 音频Linux 通过 Electron 捕获 API 录制且目前不支持隐藏真实光标。核心功能自动缩放、光标润色与样式化画面Recordly 可以根据光标活动自动生成缩放建议平滑光标运动添加动态效果并将最终画面放进带有壁纸、纯色、渐变、模糊、留白和阴影的样式化边框中。这一功能背后是完整的光标与场景系统。在源码中光标渲染逻辑位于 cursorRenderer.ts光标平滑、摆动、循环模式等效果分别由 cursorSway.ts、motionSmoothing.ts、cursorLoopTelemetry.ts 等模块实现并配套 cursorSway.test.ts、cursorScale.test.ts 等测试用例验证行为。光标遥测数据由 telemetry.ts 采集其采样间隔与容量上限定义在 constants.tsCURSOR_SAMPLE_INTERVAL_MS 33约 30Hz 采样最多 1 小时样本。动态摄像头气泡叠加你可以把摄像头素材作为气泡叠加层加入画面使用预设位置或自定义坐标摆放支持镜像、阴影和圆角调节也可以让它跟随缩放变化保证动态镜头里整体视觉更协调。对应实现见 webcamOverlay.ts 及其测试 webcamOverlay.test.ts缩放联动逻辑由 webcamSync.ts 处理。为演示设计的时间线编辑使用拖拽式时间线工具处理缩放、裁剪、变速区域、注释、额外音频区域以及裁切感知编辑并将工作保存为.recordly项目文件之后随时回来继续编辑。时间线 UI 位于 timeline底层布局算法见 timelineLayout.ts缩放建议工具见 zoomSuggestionUtils.ts。扩展与市场Recordly 拥有社区驱动的扩展系统任何人都可以构建和发布扩展为 Recordly 添加新能力——光标点击音效、设备边框、浏览器模拟外壳、壁纸、渲染钩子、设置面板等。扩展开发文档见 EXTENSIONS.md扩展运行于编辑器渲染进程通过权限门控的宿主 API 接入渲染管线、播放与导出事件、光标效果注册、设置面板以及打包素材边框、壁纸、光标样式。全部功能清单录制录制整个显示器或单个应用窗口录制完成后直接进入编辑器录制麦克风音频和系统音频在支持的平台上使用原生捕获后端从保存的.recordly项目文件继续编辑可在应用中打开已有录像或已有项目文件录制流程的 Electron 侧协调代码位于 recording.ts 与 recording 目录Windows 的原生捕获辅助程序源码位于 windows-capture基于 DXGI Media Foundation较新方案见 wgc-capture基于 Windows Graphics Capture WASAPI 回环捕获支持 60fps 配置。时间线与编辑拖拽式时间线编辑裁掉不需要的片段添加手动缩放区域根据光标活动生成自动缩放建议添加加速和减速区域添加文本、图片和图形注释在时间线上添加额外音频区域裁切录制画面保存并重新打开项目保留编辑状态时间线编辑的命令体系十分完整缩放区域命令 useZoomRegionCommands.ts、裁剪区域命令 useClipRegionCommands.ts、音频区域命令 useAudioRegionCommands.ts、注释区域命令 useAnnotationRegionCommands.ts、字幕命令 useCaptionCommands.ts全部接入历史记录系统 useEditorHistory.ts底层为 editorHistory.ts。裁切感知编辑由 clipSpanChange.ts、clipSpeedChange.ts、clipSplit.ts 提供均有对应测试。光标控制显示或隐藏渲染后的光标叠加层调整光标大小光标平滑光标运动模糊点击弹跳效果光标摆动效果光标循环模式方便导出更自然的循环片段使用 macOS 风格的渲染光标素材光标素材macOS 风格 SVG 光标、Tahoe 风格、Windows 11 风格存放于 cursors其中自定义光标见custom/minimal-cursor.svg。摄像头叠加启用或禁用摄像头叠加素材上传、替换或移除摄像头素材镜像摄像头画面调整尺寸使用预设位置或自定义 X/Y 坐标调整边距调整圆角程度调整阴影强度可选的缩放联动摄像头缩放效果画面样式与背景内置壁纸运行时自动发现 wallpapers 目录中的壁纸上传自定义背景图片纯色背景渐变背景画面留白圆角背景模糊投影阴影最终画面的宽高比预设壁纸系统有完整的源码实现wallpapers.ts 内置 25 个精选壁纸条目BUILT_IN_WALLPAPERS默认壁纸为tahoe-light.jpg。运行时通过electronAPI.listAssetDirectory(wallpapers)动态发现目录中的图片与视频壁纸支持avif/gif/jpg/png/svg/webp图片与mp4/webm等视频当内置壁纸缺失时会自动回退到默认壁纸。相关测试见 wallpapers.test.ts。实际壁纸素材位于 public/wallpapers包括 Tahoe、Sonoma、Sequoia、Ventura、iPad 17、Glassmorphism、Energy 等风格系列。导出MP4 导出GIF 导出导出质量选择GIF 帧率选择GIF 循环开关GIF 尺寸预设宽高比和输出尺寸控制在系统文件管理器中定位导出文件导出系统是仓库中实现最重的模块之一位于 src/lib/exporterModernVideoExportermodernVideoExporter.ts负责 MP4 导出并支持多种编码后端含 GPU/硬件路径与原生静态布局GifExportergifExporter.ts负责 GIF 导出mp4Support.ts 负责探测支持的 MP4 编码器与分辨率exportBitrate.ts 与 exportTuning.ts 负责码率与调优。MP4/GIF 帧率与 GIF 尺寸预设的合法值定义在 types.tsMP4_FRAME_RATES、GIF_FRAME_RATES、GIF_SIZE_PRESETS。工作流与易用性可自定义键盘快捷键应用内快捷键说明在编辑器中直接打开反馈和问题链接编辑器偏好设置持久化导出后更快恢复预览快捷键系统见 shortcuts.ts 与 ShortcutsContext.tsx编辑器偏好持久化见 editorPreferences.ts。安装下载构建版本预构建发布版本可通过项目的 Releases 页面获取。Arch Linux / Manjaroyay可通过 AUR 安装recordly-binyay -S recordly-binPKGBUILD、桌面入口、发布同步以及可选的本地源码打包均维护在独立的recordly-aur仓库中因此本仓库不需要承担 Arch 发布维护工作。仓库根目录的 recordly.rb 则是 Homebrew 风格的打包清单.rb 文件描述应用元数据、安装路径与资源清单。从源码构建前置依赖macOS安装 Xcode Command Line Toolsxcode-select --install。LinuxUbuntu / Debiansudo apt install build-essential cmake libx11-dev libxtst-dev libxrandr-dev libxt-devWindows安装 Visual Studio 2022或 Build Tools并勾选 C 工作负载和 CMake。步骤git clone https://github.com/webadderallorg/Recordly.git recordly cd recordly npm install npm run dev如果需要打包构建npm run build也可以使用平台专用构建命令npm run build:macnpm run build:winnpm run build:linux从 package.json 可以看到build会依次执行构建平台原生辅助程序build:platform-native-helpers→ TypeScript 编译tsc→ Vite 渲染层构建 → 主进程 CJS 规范化normalize:electron-main-cjs→ 主进程冒烟测试 →electron-builder打包。平台专用命令则追加--mac/--win/--linux参数。原生辅助程序包括 whisper 运行时、Windows 捕获、Windows GPU 导出、NVIDIA CUDA 合成器与光标监控cursor-monitor等其中 Windows 原生捕获与 GPU 导出源码位于 electron/native 的windows-capture、wgc-capture、gpu-export-probe、nvidia-cuda-compositor子目录macOS 侧为 ScreenCaptureKitRecorder.swift 与 NativeCursorMonitor.swift 等 Swift 实现。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[!IMPORTANT] 在 Windows 19041 之前的版本上录制仍可能通过回退捕获方式工作但真实系统光标可能仍会出现在视频中。使用方法录制启动 Recordly。选择屏幕或窗口。选择麦克风和系统音频选项。开始录制。停止录制后进入编辑器。录制窗口 UI 位于 src/components/launch其中 SourceSelector.tsx 负责屏幕/窗口源选择RecordingControls.tsx 负责录制控制CountdownOverlay.tsx 提供倒计时。Windows 上的窗口捕获选择逻辑见 windowsCaptureSelection.ts。编辑在编辑器中你可以添加裁剪、缩放、变速区域和注释调整光标行为和预览音量使用壁纸、纯色、渐变、模糊、留白和圆角来美化画面添加或调整摄像头叠加素材添加额外音频区域裁切画面并选择宽高比你可以随时将工作保存为.recordly项目。编辑器主界面为 VideoEditor.tsx整体布局由 layout 目录下的EditorShell、EditorHeader、EditorTimelinePanel、EditorPreviewPanel、EditorSidebar等组件构成。导出支持以下导出格式MP4适合常规视频输出GIF适合轻量分享和循环片段你可以在导出前调整格式相关设置例如质量、GIF 帧率、GIF 循环方式和输出尺寸。导出流程的控制器见 useEditorExportController.ts 与 useExportRunner.ts导出设置状态机见 exportStartSettings.ts。限制光标捕获Recordly 会在录制画面上渲染一个经过美化的光标叠加层但真实系统光标是否能被隐藏仍取决于平台能力。macOSScreenCaptureKit 可以较干净地排除真实光标。Windows最佳效果需要 Windows 10 Build 19041 和原生捕获辅助程序较旧版本会回退到 Electron 捕获因此真实光标可能仍会显示。LinuxElectron 桌面捕获目前不支持隐藏真实光标如果同时启用渲染光标叠加导出中可能会同时看到真实光标和样式化光标。系统音频系统音频支持因平台而异Windows原生 WASAPI 支持见 wasapi_loopback.cppLinux通常需要 PipeWiremacOS需要 macOS 14.0 和基于 ScreenCaptureKit 的工作流工作原理Recordly 将平台相关的捕获层与基于渲染器的编辑、导出流程结合在一起。捕获Electron 负责录制流程和应用级控制macOS 使用原生 ScreenCaptureKit 辅助程序Windows 在可用时使用原生 Windows Graphics CaptureWGC辅助程序和原生音频辅助程序编辑时间线区域定义缩放、裁剪、变速、音频叠加和注释光标和摄像头样式都保存在编辑器状态中渲染场景合成由PixiJS负责package.json 中声明pixi.js^8.14.0与pixi-filters^6.1.5渲染器生命周期管理见 pixiApplicationLifecycle.ts导出预览使用的同一套场景逻辑会被用于导出 MP4 或 GIF——例如 annotationRenderer.ts 与 captionRenderer.ts 在导出端复用注释与字幕渲染帧渲染由 frameRenderer.ts / modernFrameRenderer.ts 承担项目.recordly文件会保存源媒体路径和编辑器状态方便后续继续编辑.recordly项目文件格式从源码看.recordly项目文件的结构与加载校验逻辑非常清晰。扩展名常量定义在 constants.tsPROJECT_FILE_EXTENSION recordly同时兼容旧版openscreen扩展名。项目保存在录制备份目录下的Projects子目录manager.ts并附带.preview.png缩略图后缀。loadProjectFromPath 展示了加载校验逻辑项目文件必须是合法 JSON兼容 BOM且需要包含数值version、非空字符串videoPath以及对象类型的editor字段isLoadableProjectData。加载时会解析视频、摄像头、音频轨道与音频区域路径并把它们加入已批准的本地读取路径白名单随后写入最近项目记录上限 16 个见 constants.ts。渲染进程侧的保存逻辑在 useProjectSaveActions.ts支持静默保存与「另存为」保存队列串行执行queueSave并且只要存在未保存更改且已设置项目路径就会在 1 秒延迟后自动保存PROJECT_AUTOSAVE_DELAY_MS 1_000。项目数据组装函数createProjectData位于 projectPersistence.ts其格式校验与快照模型见 projectPersistence.test.ts 与 useProjectSnapshotModel.ts。文件落盘使用原子写入atomicSave.ts并有对应的 atomicSave.test.ts 测试保证保存过程不会因中途失败损坏项目文件。贡献欢迎贡献。特别需要帮助的方向包括Linux 录制与光标行为改进导出性能与稳定性优化UI 和 UX 打磨本地化工作更多编辑工具与工作流优化请尽量让 Pull Request 保持聚焦测试录制、编辑、导出流程并避免无关重构。具体贡献指南见 CONTRIBUTING.md。项目测试基于 Vitestvitest.config.ts运行全部测试使用npm test。许可证Recordly 基于AGPL 3.0发布许可文本见 LICENSE.md。值得注意的是CONTRIBUTING.md 中提及贡献按 MIT 许可授权该文件与其引用的 LICENSE 表述不一致以仓库实际文件为准。致谢Recordly 最初是从 OpenScreen 分叉而来之后已逐步演变为一个不同的项目。仓库中还保留了openscreen旧项目文件扩展名兼容constants.ts即为这段演进历史留下的痕迹。延伸阅读EXTENSIONS.md扩展系统 API 详解manifest 字段、权限、渲染管线阶段、光标效果、设置面板、事件系统electron/native跨平台原生捕获与硬件导出辅助程序源码src/lib/exporter导出管线MP4/GIF、码率调优、编码后端策略、流式解码public/wallpapers内置壁纸素材库docs/announcements.md版本发布公告【免费下载链接】RecordlyCreate polished demo videos without editing skills. Mac/Windows/Linux项目地址: https://gitcode.com/gh_mirrors/re/Recordly创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考