Chrome 不只是⼀個瀏覽器，還可以是⼀個渲染引擎和混流器，而 Headless Chrome 更是打開了瀏覽器在服務器中使⽤的場景，讓我們不僅可以把多個 WebRTC 的視頻畫⾯錄製下來，還可以把⽩板，各種動畫⼀起同步的錄製下來，完成⼀個所見即所得的頁面錄製合流⽅案。
01. 在線教育場景中錄製的痛點
在線教育場景的錄製往往比較複雜，像上圖中，我們錄製的時候往往不是單純的只錄制⽼師和學⽣的音視頻，還有⽩板互動、動畫課件、PPT、以及聊天內容， 有的還會有家⻓旁聽功能，需要專⻔給家⻓旁聽錄製⼀路流。在線教育場景中的錄製有很多痛點：
1. 多路音視頻同步困難，以及學⽣上下⻨導致的錄製佈局不斷變化
⽐如⼩班課場景，連⻨場景，UI佈局是不斷變化的，⽬前的mcu的錄製⽅案要麼是固定佈局要麼需要⼀個⼀個⽤戶指定佈局，靈活性被⼤⼤限制。
2. 音視頻和PPT錄製比較難同步
由於⾳視頻是通過 UDP 傳輸， PPT 的同步往往是通過 TCP 信令來控制，這就導致音視頻和PPT 難以同步， 爲了解決這個問題⼜引⼊了各種 SEI 插⼊時間戳的⽅案。
3. 課件⽩板中的動畫不易還原
在⼀些 K12 的教課過程中會有比較複雜的動畫效果，比如演示⼀個物理實驗，⼀些動畫效果來激勵學⽣，這些動畫過程也⽐較難在服務端渲染。
4. 真實上課過程中的互動效果難以還原
真實的上課過程中可能還會有彈幕，聊天，聲⾳特效等等，要把這些整個還原下來難度也比較高。
02. 行業中現有的解決方案
⾏業中各家解決上述痛點的⽅案各不相同，⼤致可以分爲兩個⽅案：
1. 在老師端完整錄製下來
這麼做確實能很好的還原上課過程，但帶來的問題是⽼師端除了要進行上課過程中的功能外還要再額外錄製⼀路流，對⽼師設備的硬件性能和⽹絡都帶來了更多的挑戰。還有可能的情況是⽼師端的⻚⾯中可能有⼀些沒法完全錄制下來給學⽣看的內容。
2. 視頻和課件分別錄製，交互通過信令來異步還原
開發成本⾼，沒法做到回放的實時生成。
03. 我們探索了一個新⽅案：「頁面錄製」
我們使⽤ Headless Chrome 加載⼀個⽤戶要錄製的頁面，並跑在雲函數的 Docker 鏡像中，通過 HTTP API 的⽅式來觸發錄製，把該頁面中的內容進⾏完整錄製下來。雲函數 SCF 幫助我們做好了資源調度和資源隔離，不需要額外部署服務，免去了⼤量運維的⼯作。而且該錄製的頁面可以是以⼀個學⽣的身份進⾏進入， 或者特製的⼀個專⻔⽤於錄製的⻚⾯。這樣錄製的⽅案有很多好處：
1. 極優的錄製效果
所見即所得的錄製，頁面中的⾳視頻，課件內容，⽩板交互，動畫特效，甚⾄聊天都可以錄製下來。可以控制要錄製的 FPS，以及編碼質量。
2. 集成成本低
基於頁面錄製，免去了設置各種佈局參數的成本。通過雲端 API 控制控制何時開始錄製，何時結束錄製， 錄製完成之後可以設置回調。
3. 定製容易
通過調整錄製⻚⾯的佈局即可完成錄製佈局的調整，甚至可以復⽤現有的課堂頁面，作爲⼀個旁觀者加⼊房間。
4. 運維開發成本低
基於雲函數開發，雲函數提供了完備的資源調度，隔離⽅案。完備的⽇志監控⼯具，可以做到即⽤即開，毫秒級別的計費顆粒度。減少了⼤量的開發運維的成本。
04. 使用 Headless Chrome 錄製的幾種方案
1. 通過 getDisplayMedia ⽅法來採集當前⻚⾯ Tab
使⽤ MediaDevices.getDisplayMedia 可以獲取當前⻚⾯的 Tab，此⽅案實現起來比較簡單。問題是我們在測試此⽅法的時候只能採集當前 mic 的聲⾳。另外此⽅法需要運⾏在錄製⻚⾯中，對⻚⾯會有侵⼊，如果錄製⻚⾯完全受我們控制該⽅案沒有問題，但我們的⽬標是要做到對錄製⻚⾯沒有侵⼊，所以該⽅法並不特別滿⾜我們的需求。
2. Chrome 渲染到虛擬 X-server，並通過 FFmpeg 抓取系統桌⾯
通過啓動 xvfb 啓動虛擬 X-server，Chrome 進⾏全屏顯示渲染到到虛擬 X-server 上，並通過 FFmpeg 抓取系統屏幕以及採集系統聲⾳並進⾏編碼寫⽂件。這種⽅式的適配性⾮常好， 不僅可以錄製 Chrome，理論上也可以錄製其他的應⽤。缺點是佔⽤的內存和 CPU 較多。
3. 通過 Chrome 插件的⽅式採集當前 Tab
Chrome 的拓展提供了錄製了當前Tab的能力， 並通過 MediaRecorder 或者WebCodecs 進⾏編碼。這種⽅式的適配性比較好， 對頁面沒有侵⼊。缺點是引入 Chrome 的插件，部署的時候引⼊了⼀定的複雜度。
05. 還存在哪些問題？
當然任何⽅案都不可能是完美的，如果只是想進⾏⾳視頻的錄製以及合流，相應的錄製雲方案早就是完備且⾮常成熟的，⻚⾯錄製的⽅案⽐較適合複雜的錄製場景，常⻅的就是教育場景的錄製。我們在測試的過程中還發現了頁面加載不全錄制樣式錯亂的問題，另外爲了能對 Chrome 做更多深度的定製我們採⽤了開源版本的 Chromium。還有其他的很多⼯程問題，⽐如錄製任務的保活，錄製的故障轉移，錄製完成後的異步通知等等。我們把此⽅案包裝成了⼀個基於雲函數的解決⽅案，讓⽤戶只簡單的 API 調⽤就能擁有此能⼒。
⽬前已經有內部團隊在使⽤，如果您也想參與此⽅案的測試，點此完成內測表單填寫，我們將在 1-3 個工作日與聯繫，感謝您的關注與支持。
騰訊實時音視頻 TRTC（Tencent Real-Time Communication）是騰訊雲面向開發者對外售賣的 PaaS 服務，主要提供音視頻的通信能力，覆蓋全平臺的 SDK，不論是手機、PC、Web、小程序等。
One More Thing
立即體驗騰訊雲 Serverless Demo，領取 Serverless 新用戶禮包 👉 騰訊雲 Serverless 新手體驗
歡迎訪問：Serverless 中文網！