
10分钟部署属于自己的在线录屏工具:screenREC完整部署教程
详细教程:如何使用Vercel和GitHub快速部署开源录屏工具screenREC,包含域名绑定、DNS设置等完整步骤,让你拥有专属的免费在线录屏网站。
昨天发完那篇文章后,收到了很多朋友的关心,在这里先谢谢大家了。
最近准备长期更新,所以要录制一些视频发布。我这人比较懒,不想装太多软件,正好最近天天跟AI混,就问它有没有什么好用的在线录屏工具。
AI二话不说就给我推荐了个叫screenREC的开源项目,说这玩意挺好使。我一看还真不错,是个纯网页版的录屏工具,不用装任何软件。体验了一下后,我就把它部署到了自己的域名上:https://rec.530.news/
▲ screenREC的简洁界面,功能齐全
今天就给大家分享下怎么搞,保证简单实用。说是十分钟,其实照着下面的步骤来,五分钟就能搞定。
为啥要自己部署?
可能有朋友会问,人家不是有现成的网站吗,干嘛要自己搭建?
这么说吧,我这人有个习惯,但凡经常要用的工具,都喜欢掌握在自己手里:
- 别人的网站说不定哪天就挂了或者收费了
- 自己的域名好记,也方便分享给别人用
- 想改就改,想加什么功能都行
- 最重要的是,这种部署方式完全免费,何乐而不为呢?
准备工作
首先需要这几样东西:
- GitHub账号 - 没有的话用邮箱注册一个,2分钟的事
- Vercel账号 - 可以直接用GitHub账号登录
- 一个域名(可选) - 没有域名也能用,但有的话会更专业点
具体步骤
第一步:Fork项目到GitHub
- 先访问这个地址:https://github.com/heysagnik/screenREC
- 找到"Deploy with Vercel"按钮点一下
- 用GitHub账号登录Vercel
- 保持默认配置,直接点"Deploy"
到这里基本就完成了,等它部署好就能用了。Vercel会给你一个xxx.vercel.app的域名。
第二步:测试功能
部署完成后,你可以直接访问Vercel提供的域名测试功能:
- 屏幕录制 - 支持全屏、窗口、标签页录制
- 音频录制 - 可以录制系统声音和麦克风
- 实时预览 - 录制过程中可以看到实时画面
- 格式支持 - 直接生成MP4文件,方便分享
设置自己的域名(可选)
如果你想用自己的域名,比如我用的rec.530.news,还要多设置几步:
DNS设置步骤
- 在Vercel的项目设置里找到"Domains"
- 添加你要用的域名,比如rec.yourdomain.com
- Vercel会给你两条DNS记录,一般是这样的:
- CNAME记录:rec指向cname.vercel-dns.com
- A记录:rec指向76.76.21.21
- 去你的域名管理后台添加这些记录
- 等几分钟DNS生效就可以用自己的域名访问了
常见域名服务商设置
服务商 | 设置位置 | 注意事项 |
---|---|---|
Cloudflare | DNS管理 | 记得关闭橙色云朵(仅DNS) |
阿里云 | 域名解析 | 直接添加记录即可 |
腾讯云 | DNS解析 | 支持快速添加 |
Namecheap | Advanced DNS | 需要删除默认的停放页记录 |
实际体验
部署完后我自己用了几天,体验还不错:
优点
- ✅ 完全免费,不限次数
- ✅ 可以录全屏或者单个窗口
- ✅ 声音也能录
- ✅ 直接下载MP4,方便分享
- ✅ 界面简洁,不花里胡哨
功能特点
- 多种录制模式 - 全屏、窗口、浏览器标签页
- 音频选择 - 系统音频、麦克风、或两者同时
- 实时控制 - 暂停、继续、停止录制
- 即时下载 - 录制完成后直接下载MP4文件
扩展思路
其实用这种方式,能部署的工具多了去了:
- 文件格式转换
- 图片处理
- PDF工具
- Markdown编辑器
- 代码片段分享
感兴趣的朋友可以去GitHub上搜搜,有很多好东西。
推荐的开源项目
项目类型 | 推荐项目 | 部署难度 |
---|---|---|
录屏工具 | screenREC | ⭐⭐ |
图片处理 | Photopea | ⭐⭐⭐ |
PDF工具 | pdf-tools | ⭐⭐ |
代码分享 | carbon | ⭐⭐ |
文件转换 | convertio-clone | ⭐⭐⭐ |
注意事项
Vercel限制
-
Vercel免费版够用,但也有些限制:
- 每月100GB流量
- 部署次数有限
- 构建时间有限
-
建议选维护活跃的项目
-
最好用纯前端的项目,不要选太复杂的
安全考虑
- 录制的视频都在本地处理,不会上传到服务器
- 使用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
更多文章

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


2023环法自行车赛观赛记:温格高的王者之路与我的骑行感悟
分享2023年环法自行车赛的精彩观赛体验,从温格高与波加查的激烈竞争到范阿尔特的六边形战士风采,记录一个骑行爱好者的观赛心得。


从年入一百万到负债一百万,我都经历了什么?
如果要用四个字形容2024年,那就是"大起大落"。从OA暴富到Web3爆仓,从开滴滴到转型AI,这一年经历的比前几年加起来还多...一个普通人的真实创业血泪史。


从亚马逊OA到All in AI:我的2024年转型血泪史
分享从亚马逊OA业务转型到AI领域的完整经历,包括参与生财有术航海、学习AI工具、自动化工作流搭建,以及找到正确方向的心路历程。
