摘要：你是否羡慕 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 拦截。解决方法如下：

1. 安装应用。

2. 打开终端，运行以下命令（移除隔离属性）：

   Bash

   xattr -rd com.apple.quarantine /Applications/Openscreen.app
   

3. 进入 系统偏好设置 > 安全性与隐私，授予 App “屏幕录制” 和 “辅助功能” 的权限。

🐧 Linux 用户

下载 .AppImage 文件后，需要赋予执行权限：

Bash

chmod +x Openscreen-Linux-*.AppImage
./Openscreen-Linux-*.AppImage

---

5. 实际操作体验

打开 OpenScreen 后，你会看到一个简洁的界面：

1. 录制：选择录制整个屏幕或特定窗口。

2. 编辑：录制完成后进入编辑器。

   • 在时间轴上点击，添加 Zoom（缩放） 节点。

   • 调整右侧面板的 Padding（边距）、Roundness（圆角） 和 Shadow（阴影），让视频窗口看起来像悬浮在背景上一样立体。

   • 打开 Motion Blur 开关，瞬间丝滑。

3. 导出：渲染视频并保存。

---

6. 总结与展望 📝

OpenScreen 是一个典型的“小而美”的开源工具。虽然作者谦虚地表示它不是 Screen Studio 的 1:1 克隆，且处于 Beta 阶段可能会有 Bug，但它已经能够解决 80% 的高颜值录屏需求。

适用人群：

• 独立开发者（Indie Hackers）

• 技术博主/教程制作者

• 前端开发爱好者（学习 Electron + Canvas 视频处理）

如果你也想免费制作出令人眼前一亮的演示视频，不妨去 GitHub 给作者点个 Star 🌟 并试用一下！

🔗 项目地址：https://github.com/siddharthvaddem/openscreen

---

如果你觉得这篇文章对你有帮助，欢迎点赞、收藏、关注！