如何在云端录制中录制完整动态 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。