2025/01/06

AI辅助开发桌面录屏工具：从网页版到exe程序的完整实战

分享使用Cursor和AI开发Windows桌面录屏工具的完整过程，包括技术选型、开发流程、Cloudflare部署方案，以及非程序员如何借助AI实现复杂功能。

最近做了一个录屏工具，想着分享出来给大家使用。其实我之前做过一个网页版的录屏工具，但发现一个很大的问题：录制摄像头的时候不能离开当前页面，这就很尴尬了。比如我想一边录制自己讲解，一边切换到其他窗口演示操作，这就做不到。

为什么要做桌面端

前几天开始录视频，一开始用AI搜一下发现了个网页版本的，然后我做了个10分钟上站的视频，顺便把这个网站给做了：rec.530.news，然后还更新了摄像头的新功能：https://www.youtube.com/watch?v=ohQO6ZvaSXc，结果后面才意识到通过网页没法实现摄像头离开当开页面还能用，所以想着搞个win上的客户端，也就是exe程序，以前没搞过，试试看呗。

录屏工具界面 ▲ 录屏工具的主界面，简洁实用

开发过程

说实话，我对开发是一窍不通的。虽然做过网站，但那都是用WordPress做的。这次开发桌面端工具，完全是靠AI的帮助。我使用了Cursor这个AI辅助编程工具，从项目搭建、功能开发到最后的打包发布，基本都是在跟AI对话中完成的。

整个过程中我就像一个产品经理，告诉AI我想要什么功能，然后AI就会给出相应的代码和解决方案。比如我说需要录制系统声音，AI就会告诉我需要用到哪些API，怎么处理音频流。虽然我看不懂具体的代码实现，但通过不断的对话和调试，最终还是做出了一个还算满意的版本。

开发过程截图 ▲ 使用Cursor与AI对话开发的过程

核心功能实现

这个桌面录屏工具主要实现了以下功能：

基础录制功能

屏幕录制 - 支持全屏或选择区域录制
摄像头录制 - 可以离开页面继续录制，这是相比网页版的最大优势
系统音频 - 录制电脑内部声音
麦克风音频 - 同时录制外部声音

界面设计

简洁UI - 参考主流录屏软件的设计理念
实时预览 - 录制前可以预览摄像头画面
状态指示 - 清晰显示录制状态和时长

技术特点

Electron框架 - 跨平台桌面应用开发
WebRTC API - 处理音视频流
原生API调用 - 获取系统权限和硬件访问

部署方案

工具开发完成后，我选择了Cloudflare的R2和Pages服务来部署。为什么选择这个方案呢？主要有几个原因：

R2的价格比较实惠 - 存储费用和流量费用都很便宜
Pages可以免费托管静态网站 - 而且有CDN加速
两个服务都可以绑定自定义域名 - 方便管理和访问

Cloudflare部署架构 ▲ Cloudflare R2 + Pages的部署架构

具体的部署步骤是这样的：首先在Cloudflare R2创建了一个bucket，将打包好的安装包上传上去。然后创建了一个简单的下载页面，使用Cursor帮我写了个简约风格的界面，主要展示下载链接和版本信息。将这个页面部署到Cloudflare Pages上，然后在DNS设置中将download.530.news指向Pages。

遇到的问题

部署过程中也遇到了一些问题。最开始我是想把页面直接放在R2上的，但发现R2虽然可以托管静态文件，但不支持默认文档，也就是说访问域名根路径时不会自动加载index.html。

问题解决过程 ▲ 解决R2默认文档问题的思路

后来发现可以用Worker来做路由，但想了想还是用Pages更简单一些。Pages本身就是为了托管静态网站设计的，而且有很多便利的功能，比如自动构建、自动部署等。

还有一个问题是域名绑定。我原本想把R2和Pages都绑定到同一个域名上，但发现这样会有冲突。最后的解决方案是把下载页面放在Pages上，然后在页面中通过R2的链接来提供文件下载。

技术栈总结

技术/工具	用途	选择原因
Electron	桌面应用框架	跨平台，Web技术栈
Cursor	AI编程助手	强大的代码生成能力
WebRTC	音视频处理	浏览器原生支持
Cloudflare R2	文件存储	价格便宜，全球CDN
Cloudflare Pages	静态网站托管	免费，自动部署