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

ZEGO即构

于 2021-06-11 10:53:36 发布

阅读量1.6k

点赞数 3

分类专栏：行业热门技术 #技术教程实时音视频文章标签：云端录制 RTC 音视频

本文链接：https://blog.csdn.net/zego_0616/article/details/117808826

版权

实时音视频同时被 3 个专栏收录

100 篇文章 42 订阅

订阅专栏

行业热门技术

68 篇文章 9 订阅

订阅专栏

#技术教程

52 篇文章 12 订阅

订阅专栏

摘要：动态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。