使用腾讯云Serverless云函数和Headless Chrome进行实时渲染录制合流

Chrome不只是一个浏览器，还可以是一个渲染引擎和混流器，而Headless Chrome更是打开了浏览器在服务器中使用的场景，让我们不仅可以把多个WebRTC的视频画面录制下来，还可以把白板，各种动画一起同步的录制下来，完成一个所见即所得的页面录制合流方案。

01.

在线教育场景中录制的痛点

在线教育场景的录制往往比较复杂，像上图中，我们录制的时候往往不是单纯的只录制老师和学生的音视频，还有白板互动、动画课件、PPT、以及聊天内容，有的还会有家长旁听功能，需要专门给家长旁听录制一路流。在线教育场景中的录制有很多痛点：

1.多路音视频同步困难，以及学生上下麦导致的录制布局不断变化

比如小班课场景，连麦场景，UI布局是不断变化的，目前的mcu的录制方案要么是固定布局要么需要一个一个用户指定布局，灵活性被大大限制。

2.音视频和PPT录制比较难同步

由于音视频是通过UDP传输，PPT的同步往往是通过TCP信令来控制，这就导致音视频和PPT难以同步，为了解决这个问题又引入了各种SEI插入时间戳的方案。

3.课件白板中的动画不易还原

在一些K12的教课过程中会有比较复杂的动画效果，比如演示一个物理实验，一些动画效果来激励学生，这些动画过程也比较难在服务端渲染。

4.真实上课过程中的互动效果难以还原

真实的上课过程中可能还会有弹幕，聊天，声?特效等等，要把这些整个还原下来难度也比较高。

02.

行业中现有的解决方案

行业中各家解决上述痛点的方案各不相同，大致可以分为两个方案：

1.在老师端完整录制下来

这么做确实能很好的还原上课过程，但带来的问题是老师端除了要进行上课过程中的功能外还要再额外录制一路流，对老师设备的硬件性能和网络都带来了更多的挑战。还有可能的情况是老师端的页面中可能有一些没法完全录制下来给学生看的内容。

2.视频和课件分别录制，交互通过信令来异步还原

开发成本高，没法做到回放的实时生成。

03.

我们探索了一个新方案：「页面录制」

我们使用Headless Chrome加载一个用户要录制的页面，并跑在云函数的Docker镜像中，通过HTTP API的方式来触发录制，把该页面中的内容进?完整录制下来。云函数SCF帮助我们做好了资源调度和资源隔离，不需要额外部署服务，免去了大量运维的工作。而且该录制的页面可以是以一个学生的身份进行进入，或者特制的一个专门用于录制的页面。这样录制的方案有很多好处：

1.极优的录制效果

所见即所得的录制，页面中的音视频，课件内容，白板交互，动画特效，甚至聊天都可以录制下来。可以控制要录制的FPS，以及编码质量。

2.集成成本低

基于页面录制，免去了设置各种布局参数的成本。通过云端API控制控制何时开始录制，何时结束录制，录制完成之后可以设置回调。

3.定制容易

通过调整录制页面的布局即可完成录制布局的调整，甚至可以复?现有的课堂页面，作为一个旁观者加入房间。

4.运维开发成本低

基于云函数开发，云函数提供了完备的资源调度，隔离方案。完备的日志监控工具，可以做到即用即开，毫秒级别的计费颗粒度。减少了大量的开发运维的成本。

04.

使用Headless Chrome录制的几种方案

1.通过getDisplayMedia方法来采集当前页面Tab

使用MediaDevices.getDisplayMedia可以获取当前页面的Tab，此?案实现起来比较简单。问题是我们在测试此方法的时候只能采集当前mic的声音。另外此方法需要运行在录制页面中，对页面会有侵入，如果录制页面完全受我们控制该方案没有问题，但我们的目标是要做到对录制页面没有侵入，所以该方法并不特别满足我们的需求。

2.Chrome渲染到虚拟X-server，并通过FFmpeg抓取系统桌面

通过启动xvfb启动虚拟X-server，Chrome进行全屏显示渲染到到虚拟X-server上，并通过FFmpeg抓取系统屏幕以及采集系统声音并进行编码写文件。这种方式的适配性非常好，不仅可以录制Chrome，理论上也可以录制其他的应用。缺点是占用的内存和CPU较多。

3.通过Chrome插件的方式采集当前Tab

Chrome的拓展提供了录制了当前Tab的能力，并通过MediaRecorder或者WebCodecs进行编码。这种方式的适配性比较好，对页面没有侵入。缺点是引入Chrome的插件，部署的时候引入了一定的复杂度。

05.

还存在哪些问题？

当然任何方案都不可能是完美的，如果只是想进行音视频的录制以及合流，相应的录制云方案早就是完备且非常成熟的，页面录制的方案比较适合复杂的录制场景，常见的就是教育场景的录制。我们在测试的过程中还发现了页面加载不全录制样式错乱的问题，另外为了能对Chrome做更多深度的定制我们采用了开源版本的Chromium。还有其他的很多工程问题，比如录制任务的保活，录制的故障转移，录制完成后的异步通知等等。我们把此方案包装成了一个基于云函数的解决方案，让用户只简单的API调用就能拥有此能?。

腾讯实时音视频TRTC（Tencent Real-Time Communication）是腾讯云面向开发者对外售卖的PaaS服务，主要提供音视频的通信能力，覆盖全平台的SDK，不论是手机、PC、Web、小程序等。