使用騰訊云Serverless云函數(shù)和Headless Chrome進行實時渲染錄制合流

Chrome不只是一個瀏覽器，還可以是一個渲染引擎和混流器，而Headless Chrome更是打開了瀏覽器在服務(wù)器中使用的場景，讓我們不僅可以把多個WebRTC的視頻畫面錄制下來，還可以把白板，各種動畫一起同步的錄制下來，完成一個所見即所得的頁面錄制合流方案。

01.

在線教育場景中錄制的痛點

在線教育場景的錄制往往比較復(fù)雜，像上圖中，我們錄制的時候往往不是單純的只錄制老師和學(xué)生的音視頻，還有白板互動、動畫課件、PPT、以及聊天內(nèi)容，有的還會有家長旁聽功能，需要專門給家長旁聽錄制一路流。在線教育場景中的錄制有很多痛點：

1.多路音視頻同步困難，以及學(xué)生上下麥導(dǎo)致的錄制布局不斷變化

比如小班課場景，連麥場景，UI布局是不斷變化的，目前的mcu的錄制方案要么是固定布局要么需要一個一個用戶指定布局，靈活性被大大限制。

2.音視頻和PPT錄制比較難同步

由于音視頻是通過UDP傳輸，PPT的同步往往是通過TCP信令來控制，這就導(dǎo)致音視頻和PPT難以同步，為了解決這個問題又引入了各種SEI插入時間戳的方案。

3.課件白板中的動畫不易還原

在一些K12的教課過程中會有比較復(fù)雜的動畫效果，比如演示一個物理實驗，一些動畫效果來激勵學(xué)生，這些動畫過程也比較難在服務(wù)端渲染。

4.真實上課過程中的互動效果難以還原

真實的上課過程中可能還會有彈幕，聊天，聲?特效等等，要把這些整個還原下來難度也比較高。

02.

行業(yè)中現(xiàn)有的解決方案

行業(yè)中各家解決上述痛點的方案各不相同，大致可以分為兩個方案：

1.在老師端完整錄制下來

這么做確實能很好的還原上課過程，但帶來的問題是老師端除了要進行上課過程中的功能外還要再額外錄制一路流，對老師設(shè)備的硬件性能和網(wǎng)絡(luò)都帶來了更多的挑戰(zhàn)。還有可能的情況是老師端的頁面中可能有一些沒法完全錄制下來給學(xué)生看的內(nèi)容。

2.視頻和課件分別錄制，交互通過信令來異步還原

開發(fā)成本高，沒法做到回放的實時生成。

03.

我們探索了一個新方案：「頁面錄制」

我們使用Headless Chrome加載一個用戶要錄制的頁面，并跑在云函數(shù)的Docker鏡像中，通過HTTP API的方式來觸發(fā)錄制，把該頁面中的內(nèi)容進?完整錄制下來。云函數(shù)SCF幫助我們做好了資源調(diào)度和資源隔離，不需要額外部署服務(wù)，免去了大量運維的工作。而且該錄制的頁面可以是以一個學(xué)生的身份進行進入，或者特制的一個專門用于錄制的頁面。這樣錄制的方案有很多好處：

1.極優(yōu)的錄制效果

所見即所得的錄制，頁面中的音視頻，課件內(nèi)容，白板交互，動畫特效，甚至聊天都可以錄制下來?？梢钥刂埔浿频腇PS，以及編碼質(zhì)量。

2.集成成本低

基于頁面錄制，免去了設(shè)置各種布局參數(shù)的成本。通過云端API控制控制何時開始錄制，何時結(jié)束錄制，錄制完成之后可以設(shè)置回調(diào)。

3.定制容易

通過調(diào)整錄制頁面的布局即可完成錄制布局的調(diào)整，甚至可以復(fù)?現(xiàn)有的課堂頁面，作為一個旁觀者加入房間。

4.運維開發(fā)成本低

基于云函數(shù)開發(fā)，云函數(shù)提供了完備的資源調(diào)度，隔離方案。完備的日志監(jiān)控工具，可以做到即用即開，毫秒級別的計費顆粒度。減少了大量的開發(fā)運維的成本。

04.

使用Headless Chrome錄制的幾種方案

1.通過getDisplayMedia方法來采集當(dāng)前頁面Tab

使用MediaDevices.getDisplayMedia可以獲取當(dāng)前頁面的Tab，此?案實現(xiàn)起來比較簡單。問題是我們在測試此方法的時候只能采集當(dāng)前mic的聲音。另外此方法需要運行在錄制頁面中，對頁面會有侵入，如果錄制頁面完全受我們控制該方案沒有問題，但我們的目標(biāo)是要做到對錄制頁面沒有侵入，所以該方法并不特別滿足我們的需求。

2.Chrome渲染到虛擬X-server，并通過FFmpeg抓取系統(tǒng)桌面

通過啟動xvfb啟動虛擬X-server，Chrome進行全屏顯示渲染到到虛擬X-server上，并通過FFmpeg抓取系統(tǒng)屏幕以及采集系統(tǒng)聲音并進行編碼寫文件。這種方式的適配性非常好，不僅可以錄制Chrome，理論上也可以錄制其他的應(yīng)用。缺點是占用的內(nèi)存和CPU較多。

3.通過Chrome插件的方式采集當(dāng)前Tab

Chrome的拓展提供了錄制了當(dāng)前Tab的能力，并通過MediaRecorder或者WebCodecs進行編碼。這種方式的適配性比較好，對頁面沒有侵入。缺點是引入Chrome的插件，部署的時候引入了一定的復(fù)雜度。

05.

還存在哪些問題？

當(dāng)然任何方案都不可能是完美的，如果只是想進行音視頻的錄制以及合流，相應(yīng)的錄制云方案早就是完備且非常成熟的，頁面錄制的方案比較適合復(fù)雜的錄制場景，常見的就是教育場景的錄制。我們在測試的過程中還發(fā)現(xiàn)了頁面加載不全錄制樣式錯亂的問題，另外為了能對Chrome做更多深度的定制我們采用了開源版本的Chromium。還有其他的很多工程問題，比如錄制任務(wù)的?；睿浿频墓收限D(zhuǎn)移，錄制完成后的異步通知等等。我們把此方案包裝成了一個基于云函數(shù)的解決方案，讓用戶只簡單的API調(diào)用就能擁有此能?。

騰訊實時音視頻TRTC（Tencent Real-Time Communication）是騰訊云面向開發(fā)者對外售賣的PaaS服務(wù)，主要提供音視頻的通信能力，覆蓋全平臺的SDK，不論是手機、PC、Web、小程序等。