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

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

01.

在線教育場(chǎng)景中錄制的痛點(diǎn)

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

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

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

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

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

3.課件白板中的動(dòng)畫不易還原

在一些K12的教課過(guò)程中會(huì)有比較復(fù)雜的動(dòng)畫效果，比如演示一個(gè)物理實(shí)驗(yàn)，一些動(dòng)畫效果來(lái)激勵(lì)學(xué)生，這些動(dòng)畫過(guò)程也比較難在服務(wù)端渲染。

4.真實(shí)上課過(guò)程中的互動(dòng)效果難以還原

真實(shí)的上課過(guò)程中可能還會(huì)有彈幕，聊天，聲?特效等等，要把這些整個(gè)還原下來(lái)難度也比較高。

02.

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

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

1.在老師端完整錄制下來(lái)

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

2.視頻和課件分別錄制，交互通過(guò)信令來(lái)異步還原

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

03.

我們探索了一個(gè)新方案：「頁(yè)面錄制」

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

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

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

2.集成成本低

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

3.定制容易

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

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

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

04.

使用Headless Chrome錄制的幾種方案

1.通過(guò)getDisplayMedia方法來(lái)采集當(dāng)前頁(yè)面Tab

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

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

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

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

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

05.

還存在哪些問(wèn)題？

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

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