技术干货 | 如何实现对动态 PPT 的云端录制？

摘要：动态 PPT 使用场景日益增多，如何在云端录制中支持录制完整动态 PPT 效果成为一项越来越迫切的需求。

文｜即构云端录制引擎团队

在远程会议、在线教育场景中，使用具备动画效果的动态 PPT 可以快速引起观看者的兴趣，通过在 PPT 内添加丰富的动画效果和音、视频内容，也可以让观众快速理解主讲人所表达的观点。

随着在远程互动中使用动态 PPT 的场景日益增多，在云端录制中支持录制动态 PPT 越来越成为一项迫切需求，本篇文章就基于 Chromium 浏览器进行云端动态 PPT 录制技术进行探讨。

本文共四部分：

• 动态 PPT 图像采集

• 音频数据采集

• 同步动态 PPT 交互效果

• 白板图元的录制

一、动态 PPT 图像采集

在远程共享文件时，动态 PPT 会经过转码生成 HTML 页面，所以如果要采集 PPT 内容画面就需要在启动浏览器进行渲染，这里我们选择的是开源的 Chromium 浏览器，所以在介绍采集环节之前，我们先来了解一下 Chromium 的渲染原理。

• Chromium 渲染原理
  

Chromium 的渲染引擎是 Blink，渲染会经历以下 5 个阶段：

1、首先，网页的内容被解析后会被 Blink 存储为节点对象树（称为 DOM 树）。节点对象树用于将页面上的每个 HTML 元素以及元素之间的文本和对应的节点进行关联。

2、引擎中的 GraphicsContext 负责将像素写入最终显示到屏幕上的位图中，为了能让其知道如何绘制每一个节点，要将输出的 DOM 树中的每个节点都生成相应的 Render Object（渲染对象）Render Object 知道如何绘制对应节点中的内容，渲染对象存储在一个与节点对象树平行的树结构中，称为渲染树。

3、为了能够正确显示重叠的内容、半透明的元素，以及 CSS 变换等，需要引入 RenderLayer（渲染层）的概念，含有特定行为（根对象，透明等）的渲染对象都会创建一个 RenderLayer 并与之对应。RenderLayer 也形成了一个树层次结构。根节点是页面中根元素对应的 RenderLayer，每个节点的后代都是视觉上包含在父层中的层，每个渲染层节点都会进行 Z 轴的排序。

4、虽然理论上每个单独的 RenderLayer 都可以将自己绘制到一个单独的 backing surface 上，但实际上这在内存（尤其是 VRAM）方面可能会非常浪费。所以在进入合成器之前，要对其进行复用，并引入 GraphicsLayers（图形层），图形层对应一个或多个渲染层。每个图形层都有一个 GraphicsContext 用于绘制与之关联的渲染层绘制，合成器最终负责在随后的合成过程中将 GraphicsContexts 的位图输出组合成最终的屏幕图像。总之，逻辑上含有四个平行的树结构，分别为：节点对象树，渲染对象树，渲染层树，图形层树，结构如下图所示。

5、将前面生成的图形层进行格式的转换和抽像后，交由合成器（compositor），合成器经历两个阶段：1.绘制，2.合成。经过这两个过程后合成器将不同层级以及不同部分的图像进行重叠合成，光栅化，绘制等操作输出到显示设备中，如果是软件光栅化则生成位图，否则会生成纹理，在 Chromium 75 版本后，合成器被单独分离到 viz 进程中（GPU Process），具体的合成简化模型如下图所示，当采用软件渲染时，GL_framebuffer 将会变为 SoftwareOutputDevice。

• 页面数据采集

通过了解 Chromium 的渲染流程其实我们就可以很明显的发现，我们只需要拿到 OutputSurface 里面的纹理或者位图，即可进行采集到动态 PPT 的画面进行录制，Chromium 对此也有很方便 API 接口，可以通过 Chromium 的跨进程类相关接口访问共享内存的图像数据，完成页面的采集。

二、音频数据采集

除里页面采集的相关接口，Chromium 还提供了访问音频数据的接口 AudioLoopbackStreamCreator 来创建，使用 media :: AudioCapturerSource :: CaptureCallback 回调来接收音频参数和音频数据进行音频方面的录制。

三、同步动态 PPT 页面进程交互

通过前面两步我们已经可以采集到动态 PPT 的图像、房间内的音频了，对于动态 PPT 来讲，还需要同步动态 PPT 效果。

我们通过后台信令，使用 Chromium 的 C++和 JavaScript 通信完成，当渲染进程启动时我们向 Chromium 注册上下文对象，可以很方便的进行进程间通信。

四、白板图元的录制

白板图元指的是在白板上绘制的图形数据，通常在共享 PPT 之后，避免不了要对 PPT 上内容进行绘制、标注，因此需要支持对动态 PPT 上的标注录制。

我们在接收后台同步信令后进行绘制，最后通过局部脏区刷新，转换坐标矩阵，图像优化最终以极低的性能开销将白板图元合成到动态 PPT 的图像之中，并确保可以完美还原上课情况。

总结

云端录制动态 PPT 本质上是通过内嵌浏览器将采集数据进程修改并录制下来，由于录制是在服务端，所以对录制的稳定性和性能具有要较大的考验，我们在实践中进行的大量改进优化，使其具备高度稳定性，并将其封装在云端录制 API 之中，开发者通过极小的工作量就可以快速集成并拥有此功能。