10分钟部署属于自己的在线录屏工具：screenREC完整部署教程

昨天发完那篇文章后，收到了很多朋友的关心，在这里先谢谢大家了。

最近准备长期更新，所以要录制一些视频发布。我这人比较懒，不想装太多软件，正好最近天天跟AI混，就问它有没有什么好用的在线录屏工具。

AI二话不说就给我推荐了个叫screenREC的开源项目，说这玩意挺好使。我一看还真不错，是个纯网页版的录屏工具，不用装任何软件。体验了一下后，我就把它部署到了自己的域名上：https://rec.530.news/

▲ screenREC的简洁界面，功能齐全

今天就给大家分享下怎么搞，保证简单实用。说是十分钟，其实照着下面的步骤来，五分钟就能搞定。

为啥要自己部署？

可能有朋友会问，人家不是有现成的网站吗，干嘛要自己搭建？

这么说吧，我这人有个习惯，但凡经常要用的工具，都喜欢掌握在自己手里：

1. 别人的网站说不定哪天就挂了或者收费了
2. 自己的域名好记，也方便分享给别人用
3. 想改就改，想加什么功能都行
4. 最重要的是，这种部署方式完全免费，何乐而不为呢？

准备工作

首先需要这几样东西：

1. GitHub账号 - 没有的话用邮箱注册一个，2分钟的事
2. Vercel账号 - 可以直接用GitHub账号登录
3. 一个域名（可选） - 没有域名也能用，但有的话会更专业点

具体步骤

第一步：Fork项目到GitHub

1. 先访问这个地址：https://github.com/heysagnik/screenREC
2. 找到"Deploy with Vercel"按钮点一下
3. 用GitHub账号登录Vercel
4. 保持默认配置，直接点"Deploy"

到这里基本就完成了，等它部署好就能用了。Vercel会给你一个xxx.vercel.app的域名。

第二步：测试功能

部署完成后，你可以直接访问Vercel提供的域名测试功能：

• 屏幕录制 - 支持全屏、窗口、标签页录制
• 音频录制 - 可以录制系统声音和麦克风
• 实时预览 - 录制过程中可以看到实时画面
• 格式支持 - 直接生成MP4文件，方便分享

设置自己的域名（可选）

如果你想用自己的域名，比如我用的rec.530.news，还要多设置几步：

DNS设置步骤

1. 在Vercel的项目设置里找到"Domains"
2. 添加你要用的域名，比如rec.yourdomain.com
3. Vercel会给你两条DNS记录，一般是这样的：
   • CNAME记录：rec指向cname.vercel-dns.com
   • A记录：rec指向76.76.21.21
4. 去你的域名管理后台添加这些记录
5. 等几分钟DNS生效就可以用自己的域名访问了

常见域名服务商设置

实际体验

部署完后我自己用了几天，体验还不错：

优点

• ✅ 完全免费，不限次数
• ✅ 可以录全屏或者单个窗口
• ✅ 声音也能录
• ✅ 直接下载MP4，方便分享
• ✅ 界面简洁，不花里胡哨

功能特点

• 多种录制模式 - 全屏、窗口、浏览器标签页
• 音频选择 - 系统音频、麦克风、或两者同时
• 实时控制 - 暂停、继续、停止录制
• 即时下载 - 录制完成后直接下载MP4文件

扩展思路

其实用这种方式，能部署的工具多了去了：

• 文件格式转换
• 图片处理
• PDF工具
• Markdown编辑器
• 代码片段分享

感兴趣的朋友可以去GitHub上搜搜，有很多好东西。

推荐的开源项目

注意事项

Vercel限制

1. Vercel免费版够用，但也有些限制：

   • 每月100GB流量
   • 部署次数有限
   • 构建时间有限

2. 建议选维护活跃的项目

3. 最好用纯前端的项目，不要选太复杂的

安全考虑

• 录制的视频都在本地处理，不会上传到服务器
• 使用HTTPS确保数据传输安全
• 可以随时删除部署，完全掌控

故障排除

常见问题

Q: 部署后无法访问？ A: 检查DNS设置是否正确，通常需要等待几分钟生效

Q: 录制没有声音？ A: 确保浏览器已授权麦克风和音频权限

Q: 录制的视频文件很大？ A: 这是正常的，可以用其他工具压缩

Q: 在某些浏览器不工作？ A: 建议使用Chrome或Edge，兼容性最好

最后说两句

再次感谢昨天那么多朋友给我加油打气。说实话，我这人平时话不多，但看到大家的留言还挺感动的。

最近确实在专注做AI这块，每天都在研究和尝试新东西。这些心得和经验，我也会慢慢整理出来跟大家分享。毕竟折腾这些技术的意义，不就是让生活和工作变得更简单一点嘛。

如果按照我说的操作还是有问题，欢迎留言讨论。

技术栈总结

这个部署方案的技术栈：

• 前端: HTML5 + JavaScript + WebRTC API
• 部署: Vercel (CDN + 静态托管)
• 源码: GitHub (版本控制)
• 域名: 自定义域名 + DNS解析

整个方案的优势是：

• 零成本运行
• 全球CDN加速
• 自动HTTPS
• 一键部署更新

PS: 以上内容为AI生成，除了截图。另外我刚刚上传了视频在YouTube，不习惯看文字的可以看视频：https://youtu.be/_9NkAr0h57A

---

我的录屏工具：rec.530.news 更多实用工具部署教程，欢迎关注我的个人网站 dalong.ai