GitHub 25k Star！这款开源录屏工具，免费无水印可商用，彻底告别付费

最近在学习视频的录制但是录制的工具始终是一个头疼的问题。试过几款免费软件导出的视频不是糊成一团就是画面挂着一个大水印。想用 Screen Studio功能确实好但29美刀/月的订阅费对于一个还在学习阶段的人来说实在下不去手。直到在 GitHub 上刷到了这个项目OpenScreen基于Electron React TypeScript实现最新版支持中英文切换。目前 25k Star三天前还在更新。它打的口号正中我的痛点免费、高清、无水印、可商用做 Screen Studio 的开源替代品。Windows 直接上手01、下载与安装打开 OpenScreen 的 GitHub 仓库搜openscreen打开后可以看到右边有官网地址可以进入下载双击运行一路下一步30 秒装完。02、录制前的设置启动软件可以看到一个小悬浮框。你需要做三个选择选择屏幕、是否打开系统音频、麦克风然后点击开始录制就可以了。03、进入编辑界面核心功能区停止录制后自动跳转到编辑界面。界面分三个区域中间上方实时预览窗口底部时间轴视频被切成一条右侧属性编辑面板04、四大核心编辑功能① 裁剪片段想剪掉某一段先在时间轴上定位然后用分割工具切开再删。② 自动/手动缩放灵魂功能缩放功能让观众的视线始终跟着你的操作走。用法很简单1在时间轴上点一下你想放大的位置。2点旁边的「」按钮选择Z。3预览窗口出现白色框拖动它框选要放大的区域 。4右侧面板调整缩放的倍数你可以加多个缩放点画面会平滑地从一个焦点移动到下一个焦点。看下我的效果我是直接导出的gif。③ 更换背景录制时如果桌面比较乱或者不想让观众看到桌面壁纸可以一键换背景。选中时间轴上的视频条在右侧属性面板找到「Background」选项效果Wallpaper内置抽象壁纸Solid纯色背景Gradient渐变色Custom上传自己的图片选好之后背景立刻替换主体内容保持清晰。④ 添加标注需要在视频里加文字说明、指向箭头或 Logo 时用标注功能。可添加三种元素Text输入任意文字调整字号颜色Arrow画一个箭头指向你想强调的按钮或区域Image插入图片比如公司 Logo每个标注都可以设置出现时长和位置。⑤ 其他实用功能还有其它变速、运动模糊视频的导出功能16:9横屏、1:1你可以自己亲身体验一下。技术实现深度解析01、技术栈一览根据项目代码和依赖配置OpenScreen 的技术选型如下层级技术占比/说明桌面框架Electron跨平台桌面应用前端框架ReactTypeScript界面与逻辑构建工具Vite快速开发构建渲染引擎PixiJS高性能 2D 渲染时间轴组件dnd-timeline拖拽式时间轴样式Tailwind CSS原子化 CSS代码规范Biome格式化 Lint02、屏幕录制是怎么实现的核心录屏功能依赖 Electron 的desktopCapturerAPI用户点击录制 ↓ 调用 desktopCapturer.getSources() ↓ 获取可录制的窗口和屏幕列表 ↓ 用户选择后用 navigator.mediaDevices.getUserMedia() 获取视频流 ↓ 用 MediaRecorder API 把流录下来存成 WebM 格式音频部分系统音频走desktopCapturer的audio: loopback参数麦克风走单独的音频流最后两条流合并说明Windows 上系统音频之所以“开箱即用”是因为 Electron 在 Windows 上直接调用了底层的Windows Audio Session API不需要额外配置虚拟声卡。03、缩放和平滑动画怎么做的这是 OpenScreen 最核心的编辑功能。实现思路第一步录制时保存原始视频第二步用户在时间轴上添加“缩放关键帧”记录时间位置、缩放区域坐标、放大倍率、持续时间第三步渲染时用PixiJS实时计算每一帧的变换矩阵第四步两个缩放点之间用缓动函数插值产生平滑过渡为什么用 PixiJSPixiJS 基于 WebGL处理实时视频纹理变换时性能更好缩放动画才能保持 60fps 流畅。Canvas 2D 做不了这个复杂度。运动模糊也是 PixiJS 的能力在快速平移时对画面施加方向性模糊滤镜视觉上更接近专业剪辑软件的效果。04、时间轴的拖拽编辑编辑界面底部的时间轴支持拖拽调整片段位置、拉伸裁剪、添加关键帧这些交互用的是dnd-timeline这个库。它是一个专门为 React 设计的可拖拽时间轴组件支持时间轴缩放Zoom In/Out 时间精度拖拽移动片段拖拽边缘裁剪在时间轴上任意位置添加标记点OpenScreen 把缩放点、标注点都抽象成了时间轴上的“标记”统一用 dnd-timeline 管理。05、导出视频的流程导出时的渲染不是实时播放而是离屏渲染根据时间轴数据 ↓ 逐帧计算画面应用缩放、背景、标注等 ↓ 每一帧用 PixiJS 渲染到 Canvas ↓ 用 Canvas.captureStream() 把 Canvas 内容编码成视频 ↓ 最终输出 MP4注意这个过程比较耗 CPU所以导出进度条走的时间通常比视频时长要长这是正常的。优缺点总结优点优点说明完全免费无水印、可商用个人和商业用户都没有门槛Windows 体验完美系统音频、安装流程都无需折腾核心功能扎实自动缩放、背景替换、标注都流畅可用技术栈现代代码可读性好适合二次开发注意事项注意事项说明Beta 版本作者坦言可能有 bug但日常轻度使用基本稳定功能深度有限没有高级光标效果、点击涟漪、3D 倾斜等获取方式GitHub 地址https://github.com/siddharthvaddem/openscreen作者在 README 里写了一句话让我印象很深“I’m new to open source, idk what I’m doing lol. If something is wrong please raise an issue.”一个自称“不知道自己在干嘛”的开源新人居然做出了一款 25k Star、功能扎实、文档齐全的工具简直太牛了。如果觉得文章还不错请给我点个喜欢吧