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

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

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

优点

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

可以用来干嘛：

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

扩展：

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

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

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

superbai

2019-12-04 23:03:43 +08:00

@jobtesting #20 这个是开源到公司账号下面，没问题吧

rizon

2019-12-04 23:11:26 +08:00

@BlackHole1 #12
你的描述有些不明白
上课的页面与直播是相同的，以此为例子
1. 只需要录制一个人的页面就可以了对吧，因为所有人看到的内容是相同的。而且也不可能同时录制多个客户端的操作，这些操作是不可能同时集中作用到服务器的一个网页上的啊
2. 录制的内容大部分都是服务器已有的，比如摄像头数据，聊天内容，这些本来就会发送到服务器转发给其他客户端，这个还需要从客户端上传到服务端吗？应该是服务端直接获取才对啊。客户端也没有带宽去上传摄像头等视频内容啊
3. 如果以上两点成立，也就是你把服务端已有的数据和教师端的页面操作行为拼凑到服务器上的镜像网页中复现。但我觉得这个比较难，服务器上不是镜像网站这么简单，是需要定制化开发的啊，从描述上看你们应该不是这样做的，

所以说来说去还是不懂。。。。

jobtesting

2019-12-04 23:15:34 +08:00

@superbai 最好上报领导，经技术负责人评估，安全团队评估。

herozhang

2019-12-04 23:38:59 +08:00

如果是职务作品，所有权是公司的，开源是需要公司授权才行，哪怕是用公司账号做也是要授权的。

BlackHole1

2019-12-05 08:57:29 +08:00

@jobtesting @herozhang 这点可以放心，在开源之前已经得到了公司的授权，代码也经过了公司的 TC 委员会代码 review。没有问题后才进行开源的。并且开源所属账号是公司名下，且 docker images 管理账号也是公司名下的

BlackHole1

2019-12-05 09:36:34 +08:00

@rizon 提出的问题很棒。我这里逐一回答下。
1. 这个录制的基本实现原理
在服务器上启动一个 chrome 浏览器，并且使用 xvfb 进行虚拟桌面。只所以使用 xvfb 虚拟出一个桌面，是因为项目中使用了 chrome 插件，而 chrome 目前不支持在 headless 模式下注入插件，所以 chrome 启动也不是 headless 模式。启动 chrome 后，同时也会为启动的 chrome 注入一个插件，这个插件会和服务端启动的 server 进行一个通信，打开要录制的网站，并在网站里植入一些 api(start、pause、resume、stop、fail、setExtraInfo)。当网站本身调用了 start 接口开始录制时，会通知到 chrome 插件，插件会调用 chrome extension 插件 api(chrome.tabCapture.capture)。但是这个 api 会有一个需要用户确认的操作，所以我当时翻了下相关的 chrome 的源码。找到了--whitelisted-extension-id 参数，可以绕过。从而达成自动化，但是因为这个 chrome 启动参数需要一个固定的 chrome 插件 id，所以就自己生成了一个 key，来保证 id 固定。整理大致流程就是这样，但是里面的细节非常多，所以后面我会写篇文章进行一个分析、疏通。

2. 是在服务端同步了客户端的所有操作行为，然后服务端进行录制？
是的

3. 那比如在网页播放视频的时候怎么保证服务端和客户端的视频播放进度一致的？
这个问题其实是一个难点，当时要录制的网站是由我的 leader 写的，据我所知，他使用了一个 timingsrc 项目来做相关同步的( https://webtiming.github.io/timingsrc/index.html)。而且我们其实不会说必须 100%和客户端同步，我们客户端每个用户操作其实都会触发一个信令，这个信令数据包含了用户的操作、时间等，在准备录制的时候，后端会基于信令数据生成相关的 json 数据，将要录制的网站就是根据这个 json 数据进行回放操作的，而因为我们是多个视频流(老师、多个学生)，多个视频流同步就是我刚刚提到的 timingsrc 项目。

4. 这个同时只能录制一个客户端么？
其实是支持多个的，我在设计之初其实就是设计成了一个 chrome 录制多个客户端，其实就是打开多个 tab 页，而且 A Tab 页的声音不会影响 B Tab 页的声音。只不过这种设计不够“最小集”，而且这样对一个 docker(k8s 里为 pod)。占用的资源太大，不利于后面的管理。所以就砍掉了。

5. 这个 docker 镜像是做什么用的？是个演示用的还是服务端？
其实都可以，做成 docker 是因为这个是为了方便演示，以及有人使用 k8s 进行集群部署时方便一点

6. docker 提供了两个接口，一个是 unbuntu 的 vnc 端口？一个 chrome 的 debug 端口？
是的，这里应该改为提供了两个端口

7. 然后你在本地的 chrome 打开远程 debug，调试 docker 中的 Chrome 页面，然后本地执行 rebirth 的录制命令，然后服务器就会录制。。但是好懵逼。。。实际的应用中是怎么个流程呢？
我在演示时只所以这么做有两个原因。1: 当时我不能对我要录制的网站有完整可控权; 2: 我想演示下 vnc 和 remote debug 的连接方式。之所以没有可控权，是因为我无权更改网站代码，所以我不能再网站里写上：“准确就绪后调用 start 接口，等 20 秒调用 stop 接口”。所以你可以看下 https://github.com/alo7/rebirth/tree/master/examples/webm2mp4。这个例子中，录制的是 https://www.bugs.cc/self_page/github/rebirth/webm2mp4/这个网站，而这个网站我写了一个定时器，网站打开后一秒钟开始录制，5 分钟后完成录制。

8. 怎么把你的这个东西安装到我们的服务里来？怎么去部署？？服务器录制是服务器自动化的操作还是需要谁去触发？
我们公司使用的是 k8s 部署方案，所以 docker 其实就是部署在 k8s 上的 pod 而已。我们公司是这节课上完后，server 把信令转化成 json 格式后，往数据库里插入一条数据。而我写了另一个项目，这个项目就是会定时 3 分钟去扫这个数据，一旦发现有新的录制任务，则会调用 k8s 的 api，启动一个 Job->Pod。来进行录制。并自动回收，因为这个项目代码简单，而且不太方面开源，就没有放出来，可以看下我之前针对这个项目写的文章：基于任务量进行 k8s 集群的灵活调度处理( https://juejin.im/post/5d5ba474f265da03b638aee1)