云端内容采集( 如何在云端录制中支持录制完整动态PPT效果成为越来越迫切需求)

　　云端内容采集(

如何在云端录制中支持录制完整动态PPT效果成为越来越迫切需求)

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

　　文字 | 即时云录音引擎团队

　　在远程会议和在线教育场景中，使用带有*敏*感*词*效果的动态PPT可以快速引起观众的兴趣。通过在PPT中加入丰富的*敏*感*词*效果和音视频内容，观众也可以快速了解演讲者表达的观点。

　　随着动态PPT用于远程交互的场景越来越多，支持云录制动态PPT已成为迫切需求。本文讨论基于Chromium浏览器的云端动态PPT录制技术。

　　本文分为四个部分：

　　一、动态PPT图片捕捉

　　远程共享文件时，动态PPT会被转码生成HTML页面，所以如果要截取PPT内容画面，需要启动浏览器进行渲染。这里我们选择开源的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 都可以将自己绘制到单个背衬表面上，但实际上这在内存（尤其是 VRAM）方面可能非常浪费。因此，在进入合成器之前，需要对其进行复用并引入GraphicsLayers（图形层），它对应一个或多个渲染层。每个图形层都有一个GraphicsContext，用于绘制与之关联的渲染层，合成器最终负责在后续的合成过程中将GraphicsContexts的位图输出组合成最终的屏幕图像。总之，逻辑上有四种并行的树结构，分别是：节点对象树、渲染对象树、渲染层树和图形层树。其结构如下图所示。

　　5、 将之前生成的图形层的格式转换抽象后，交给合成器。合成器经过两个阶段：1. 绘图和 2. 合成。经过这两个过程，合成器将不同层次、不同部位的图像进行叠加、合成、光栅化，绘制到显示设备上。如果是软件光栅化，则生成位图，否则生成纹理。在 Chromium 75 版本之后，compositor 被单独分成了 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中。开发者可以以极小的工作量快速集成并拥有此功能。