最近在学习视频的录制，但是录制的工具始终是一个头疼的问题。
试过几款免费软件，导出的视频不是糊成一团，就是画面挂着一个大水印。
想用 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 | 跨平台桌面应用 |
| 前端框架 | React + TypeScript | 界面与逻辑 |
| 构建工具 | Vite | 快速开发构建 |
| 渲染引擎 | PixiJS | 高性能 2D 渲染 |
| 时间轴组件 | dnd-timeline | 拖拽式时间轴 |
| 样式 | Tailwind CSS | 原子化 CSS |
| 代码规范 | Biome | 格式化 + Lint |
02、屏幕录制是怎么实现的？
核心录屏功能依赖 Electron 的 desktopCapturer API：
用户点击录制
↓
调用 desktopCapturer.getSources()
↓
获取可录制的窗口和屏幕列表
↓
用户选择后，用 navigator.mediaDevices.getUserMedia() 获取视频流
↓
用 MediaRecorder API 把流录下来，存成 WebM 格式
音频部分：
- 系统音频：走
desktopCapturer的audio: 'loopback'参数 - 麦克风：走单独的音频流
- 最后两条流合并
说明：Windows 上系统音频之所以“开箱即用”，是因为 Electron 在 Windows 上直接调用了底层的 Windows Audio Session API，不需要额外配置虚拟声卡。
03、缩放和平滑动画怎么做的？
这是 OpenScreen 最核心的编辑功能。
实现思路：
第一步：录制时保存原始视频
第二步：用户在时间轴上添加“缩放关键帧”，记录时间位置、缩放区域坐标、放大倍率、持续时间
第三步：渲染时用 PixiJS 实时计算每一帧的变换矩阵
第四步：两个缩放点之间用缓动函数插值，产生平滑过渡
为什么用 PixiJS？
PixiJS 基于 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、功能扎实、文档齐全的工具，简直太牛了。
如果觉得文章还不错，请给我点个喜欢吧！
