分享一个在公司花了半年开发的服务端录制项目

[BlackHole1]

在公司里花了半年时间写的服务端录制项目（开源的是阉割版，但是基本功能都有） https://github.com/alo7/rebirth/

Tips: 服务端意指在 docker、服务器上

优点

针对标签页进行录制，所以刷新网页、跳转也可以记录下来
也可以记录下网页的声音，即使你的服务器上没有声卡也可以
完善的崩溃、错误处理机制
可以对状态增加自己的代码，而且十分的方便
支持 Chrome 远程协议调试 和 VNC 调试
目前市面上我没找到相同类型的项目(可能有，但是我不知道？)

可以用来干嘛：

在客户端记录下用户操作，在服务端进行复现并录制下来
记录下指定网页的任何变化
如果有客户端录制的功能，则可以减少客户端的电脑要求

扩展：

改改代码，你甚至可以批量录制 P 站(不用买会员了...)

技术栈：NodeJS、TypeScript、Chrome Extension、Docker、Puppeteer、Chrome Remote Debugging Protocol

如果有兴趣的朋友，可以点个 star 支持下...(卑微)

[dreamerlv3ex]

是录 chrome 吗，抱歉不很理解．

[BlackHole1]

@dreamerlv3ex 是录制 chrome 下的 tab 页。tab 页内的网站任何变化都能录制下来（跳转、刷新、声音等）

[dreamerlv3ex]

@BlackHole1 没有过去文档和代码，提出一下疑问，如果在基础上增加爬虫行为，方便吗？ 或者说可能吗？

[superbai]

用户操作浏览器，在 server 上可以把用户的操作以视频的形式记录下来？是这个目的吗？

[dreamerlv3ex]

@dreamerlv3ex 比如自己加 Selenium. 各种自动化骚*２操作．还能录制．．．没关系我就是ＹＹ一下．实现应该没问题．

[BlackHole1]

@dreamerlv3ex 是可以的，但是这个项目核心是录制。除非爬虫的时候有录制需求，不然的话我还是推荐直接用 Puppeteer

@superbai 是的，当然也可以忽略用户的操作，只录制网页的变化

[dreamerlv3ex]

@BlackHole1 谢谢　虽然我目前用不上，但是挺开眼界的．

[superbai]

@BlackHole1 #6 需要用户授权吗？

[BlackHole1]

@superbai 不需要的。这个项目是在服务端进行录制的，如果有用户授权的行为，那其实是做不了自动化的。所以后来通过对 chrome 增加--whitelisted-extension-id 启动参数，来绕过了这个限制

[Latin]

哪个 P 站，手动狗头

[wudalang123]

应用场景是什么？》

[BlackHole1]

@wudalang123 把 README 上针对我们公司的应用场景介绍搬过来：

我们是一个在线教育的公司。在实际业务场景中有一个需求是把上课过程录制下来，并进行 AI 分析，生成本节课的精彩视频，供学生及老师查看。

因为我们的应用是 Electron 开发的，所以一开始我们使用的是在老师端启动一个屏幕录制，把上课过程录制下来，但是这样做有一个缺点，就是严重依赖了老师的电脑设备及网络带宽，导致我们公司在招聘老师的过程中，电脑性能也是一个非常重要的考察目标。

为了招聘到更多优秀的老师，避免因为非老师自身问题导致的没有招聘，所带来的影响。从而我们研发出 Rebirth 项目。

我们的做法是把上课页面完整的复制一份(这里称作 replay)，同时在上课过程中，记录下学生和老师的动作行为(鼠标移动、鼠标点击、键盘打字、课件翻页、老师及学生摄像头的画面等)，再根据这些动作行为数据，在 replay 里进行一次复现，在复现过程中由 Rebirth 进行录制。从而达到降低老师设备及网络带宽的要求，而且我们一节课可以为公司节省 6~8 元人民币的开销，因为之前屏幕录制使用的是第三方服务。

[Orenoid]

不错，挺有意思的，虽然暂时没什么这方面需求。

顺便吐槽两点：
Readme 写得太简略了，不看视频我都不知道怎么用
Docker 镜像分层多得丧心病狂，那一堆 apt 安装不能合并成一层吗

[richard1122]

https://logrocket.com/
之前看过这个，是不是类似的？

[BlackHole1]

@Orenoid README 我实在不知道应该怎么写了...较劲脑汁写成这样了...

以及那个 Dockerfile，是因为如果一次性安装过多时，有很大的几率会 build fail(至今想不明白...)

[BlackHole1]

@richard1122 看起来是很像，但是实现原理不同，这个貌似无法录制声音、刷新、跳转

[rizon]

看了一下后还是有些懵。。。

这个录制的基本实现原理是什么？是在服务端同步了客户端的所有操作行为，然后服务端进行录制？ 那比如在网页播放视频的时候怎么保证服务端和客户端的视频播放进度一致的？

这个同时只能录制一个客户端吧？

[rizon]

恕我愚钝，想了半天还是没明白。。。。

这个 docker 镜像是做什么用的？是个演示用的 还是服务端？
docker 提供了两个接口，一个是 unbuntu 的 vnc 端口？一个 chrome 的 debug 端口？
然后你在本地的 chrome 打开远程 debug，调试 docker 中的 Chrome 页面，然后本地执行 rebirth 的 录制命令，然后服务器就会录制。。
但是好懵逼。。。实际的应用中是怎么个流程呢？
怎么把你的这个东西安装到我们的服务里来？怎么去部署？？
在你们的业务场景中，老师端对应的是你视频里的哪部分？学生端对应的是哪部分？服务器录制是服务器自动化的操作还是需要谁去触发？

[rizon]

虽然没看懂，但是似乎这东西很厉害的样子。。。

[jobtesting]

在公司写的东西产权归公司，开源要公司同意，否则。。。。