[个人体验]使用 selenium 和 OBS 录制极客时间视频

我正在参与掘金创作者训练营第4期，点击了解活动详情，一起学习吧！

我所在的公司为员工绑定了极客时间限时体验 SVIP 权益，最近即将到期。到期后订阅的课程将无法学习。因此将视频保存到本地是唯一的选择。

然而极客时间的视频课程使用了阿里云的视频加密方案，想要离线缓存到本地成为了一种奢望。

万不得已，选择了使用自动化平台 Selenium 控制 OBS 录制极客时间视频，终于成功保存到本地。

下面就将整体方案和实现分享给各位。

方案整体架构

整体架构.png

整套方案分为主控端、屏幕录制模块、浏览器控制模块三部分。

主控端基于 Node.js，主要对自动化录制流程进行编排。

屏幕录制模块基于 OBS 整套方案，其中：

OBS Studio 负责抓取视频播放的窗口并将其录制成视频。
obs-websocket 插件对外开放 websocket 服务，提供 OBS 的被控能力。
主控端通过 obs-websocket-js 向 websocket 服务发送控制指令，实现开始和停止屏幕录制的功能。

浏览器控制模块基于 Selenium 平台。

主控端调用 selenium-driver 发送自动化控制指令，如网页跳转、模拟点击、JavaScript 脚本执行。
selenium-driver 调用 geckodriver 驱动控制 Firefox 浏览器。

准备运行环境

屏幕录制，依赖 OBS 环境

OBS Studio，需要安装 27 以上版本
obs-websocket

自动化操作，依赖 selenium-driver

在这里选择浏览器驱动下载

参照配置文档进行驱动关联。建议使用环境变量配置方式，简单方便

浏览器

Firefox Browser

程序启动前配置

配置 obs-websocket 服务器的端口和密码，方便程序调用连接。

打开服务器设置.png

打开工具 - WebSockets 服务器设置菜单，可以看到右侧的服务器设置对话框，勾选“启用 WebSockets 服务器”选项，配置端口和密码，然后点击确定即可。

配置 obs 的场景和捕捉的窗口

如果你很熟悉 obs 的操作，这一步可以跳过

图片.png

点击场景区域左下角的十字键，弹出“添加场景”的对话框，随便输入一个名字，点击确定即可

点击来源区域左下角，弹出来源菜单，选择“窗口采集”

图片.png

之后点击新建，随便输入一个名字，勾选左下角的“使源可见”选项，点击确定。会弹出一个属性窗口。

图片.png

由于程序还没有启动，你想抓取的窗口也没打开，随便选一个窗口就行。

窗口匹配优先级记得选择“窗口标题必须匹配”，否则可能会出现捕捉窗口偏移的情况。

点击确定按钮保存。

自动化流程

整个流程可以分为授权登录和课程录制两个部分，不过在这之前，需要做一点点准备工作。

准备工作

当启动程序时，执行 obs 的 connect 操作，配置为在 obs-websocket 插件中设置的地址和密码。密码可以留空。

授权登录

访问极客时间企业培训网页。

谢天谢地，企业培训站可以在外置浏览器中运行。

此时极客时间会检测用户是否登录，如果用户没有登录，则重定向到扫码登录页面。

在自动化脚本中，默认情况会启动一个干净的浏览器进程，所以必定会发生重定向。

自动化控制的导航栏还挺好看.png

如果用户不做扫码登录操作，将始终停留该页面。

用户指定采集窗口，同时扫码登录。

当弹出的自动化浏览器打开了“企业微信登录”页面时，点击 OBS 的窗口选项，选择当前打开的“企业微信登录”窗口，这样后续视频录制将始终捕获这个进程。

图片.png

当扫码登录成功后，会跳转到首页

稍微等待一段时间，然后跳转到你想录制的课程链接
1. 如果立即跳转页面，可能会出现二次登录的情况。

课程录制页面操作

打开课程页面，执行录制。这段操作将无限循环，直到视频全部播放完成后跳出循环。

使用选择器获取课程视频列表
使用选择器获取播放器元素
操作播放器元素
1. 选中播放器标题部分，并获取到标题文本。
2. 将标题文本和课程视频列表对比，得到真正的标题。
3. 将上一步获取到的标题设置为录制文件名称
4. 选中播放器播放时间文本，并解析出视频时长
5. 设置视频播放进度为 0。如果是你曾经学习过这一部分课程，下次访问时可能进度不在开头，因此需要手动重置
6. 选中全屏按钮，并执行模拟点击。当页面全屏打开时，Firefox 浏览器会有一个提示框
7. 稍等一段时间，提示框消失，然后调用 obs 的 start 开启录制
8. 创建监听器，比较当前播放进度和总进度，当相差小于固定阈值时，认为视频已经播放完成
9. 当视频播放完成时，调用 obs 的 stop 停止录制
10. 判断当前视频是否是最后一个，如果是，则跳出循环。如果不是，则等待一段时间后执行后续循环。
  1. 通过比较当前视频标题和视频列表最后一条是否相同，确定是否为最后一个视频

收尾工作

当程序结束时，执行 obs 的 disconnect 操作，之后调用 quit 方法退出 selenium 的进程。

如果异常结束，记得先停止视频录制后再断开连接

总结

这就是使用 selenium 和 OBS 录制极客时间视频的完整方案和注意事项了。相信大家看到这里对整个过程已经很清楚了。

欢迎有兴趣的同学自行去实现符合自身使用习惯的自动化脚本。

祝你成功。

开发参考资料

selenium javascript api

后续

和同事交流了一番，他给了我一个网盘链接，我想要的课程也在里面。