摘要：你是否羡慕 Twitter/X 上那些带有平滑缩放、运动模糊和精美背景的产品演示视频？通常这些视频是由 Screen Studio 制作的，但其订阅价格让不少人望而却步。今天为大家介绍一个基于 Electron 和 React 的开源项目——OpenScreen，它能让你零成本制作出同款丝滑的演示视频！
1. 痛点：为什么我们需要 OpenScreen？
在展示代码、演示 APP 或制作教程时，普通的录屏往往平平无奇。Screen Studio凭借其自动变焦、光标平滑移动和美观的背景填充，成为了行业标杆。
但是，对于偶尔使用的开发者来说，每月 29 美元（或更高）的订阅费是一笔不小的开支。
OpenScreen的出现正是为了解决这个问题。正如作者在 README 中所说：
"如果你不想支付订阅费，但想要一个能够满足基本需求、制作精美产品演示的工具，这就是为你准备的。"
它完全免费，支持个人和商业用途，并且代码完全开源。
🚀 项目地址：https://github.com/siddharthvaddem/openscreen
2. 核心功能亮点 ✨
OpenScreen 虽然定位为“更简单的版本”，但核心功能非常能打，完美覆盖了制作高颜值演示视频的需求：
🔍 丝滑变焦（Zoom）：支持手动添加缩放关键帧，你可以自定义缩放的深度、持续时间和位置。
🌫️ 运动模糊（Motion Blur）：这是让视频看起来“高级”的关键，在移动视角时自动添加模糊效果。
🖼️ 自定义背景：录制移动端或非全屏内容时，可以自动填充壁纸、纯色、渐变色或自定义图片作为背景。
✂️ 视频裁剪与修剪：支持裁剪视频画面以隐藏不需要的部分，或剪辑掉多余的时间段。
📝 标注功能：可以在视频中添加文本、箭头或图片标注。
📱 多比例导出：支持导出不同的长宽比和分辨率，适应不同的社交媒体平台。
3. 技术栈大揭秘 🛠️
作为一个 CSDN 的技术博主，我们不仅要会用，还要了解它是怎么实现的。OpenScreen 是一个非常现代化的前端桌面应用项目，技术栈如下：
Electron：构建跨平台桌面应用的基础。
React & TypeScript：构建用户界面的核心逻辑，类型安全。
Vite：极速的构建工具。
PixiJS：这是重点！项目使用 PixiJS 处理高性能的 2D 渲染（视频画面的缩放、模糊等特效大概率由此实现）。
dnd-timeline：用于实现视频编辑轨道的时间轴拖拽功能。
如果你想学习如何用 Web 技术开发高性能的视频编辑工具，这个项目的源码非常有参考价值。
4. 安装与使用教程 🚀
由于项目还处于 Beta 阶段，目前需要在 GitHub Releases 页面下载安装包。
📥 下载
前往 Release 页面下载对应系统的安装包。
🍎 macOS 用户特别注意
由于开源项目没有购买昂贵的 Apple 开发者证书，安装后可能会被 macOS 的 Gatekeeper 拦截。解决方法如下：
安装应用。
打开终端，运行以下命令（移除隔离属性）：
Bashxattr -rd com.apple.quarantine /Applications/Openscreen.app进入系统偏好设置 > 安全性与隐私，授予 App“屏幕录制”和“辅助功能”的权限。
🐧 Linux 用户
下载.AppImage文件后，需要赋予执行权限：
Bash
chmod +x Openscreen-Linux-*.AppImage ./Openscreen-Linux-*.AppImage5. 实际操作体验
打开 OpenScreen 后，你会看到一个简洁的界面：
录制：选择录制整个屏幕或特定窗口。
编辑：录制完成后进入编辑器。
在时间轴上点击，添加Zoom（缩放）节点。
调整右侧面板的Padding（边距）、Roundness（圆角）和Shadow（阴影），让视频窗口看起来像悬浮在背景上一样立体。
打开Motion Blur开关，瞬间丝滑。
导出：渲染视频并保存。
6. 总结与展望 📝
OpenScreen是一个典型的“小而美”的开源工具。虽然作者谦虚地表示它不是 Screen Studio 的 1:1 克隆，且处于 Beta 阶段可能会有 Bug，但它已经能够解决 80% 的高颜值录屏需求。
适用人群：
独立开发者（Indie Hackers）
技术博主/教程制作者
前端开发爱好者（学习 Electron + Canvas 视频处理）
如果你也想免费制作出令人眼前一亮的演示视频，不妨去 GitHub 给作者点个 Star 🌟 并试用一下！
🔗 项目地址：https://github.com/siddharthvaddem/openscreen
如果你觉得这篇文章对你有帮助，欢迎点赞、收藏、关注！
