摘要：動態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之中，開發者通過極小的作業量就可以快速集成并擁有此功能，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/287021.html
標籤：其他