文 / 趙文傑
整理 / LiveVideoStack
大家好，我是來自學而思的趙文傑，現就職于學而思網校并擔任架構師的工作，接下來我将為大家分享互動白闆在線上教育上的應用。
今天的話題主要圍繞線上教育，也就是如何借助技術的力量将知識更生動地傳遞給學生，其中一種方式是電子白闆。可以說電子白闆在線上教育領域起着舉足輕重的作用，學而思網校今年的學員數量已達到百萬級别，在電子白闆相關領域積累了一定的實踐經驗。
本次我将圍繞相關實踐經驗和以下幾個方面進行分享。
1、線上教育的形式
線上教育主要分為大班課與小班課兩種形式，大班課的核心成員由一位主講老師與若幹位輔導老師組成。“線上主講 + 線下輔導” 也是近兩年線上教育較為成功的模式之一，甚至在一些方面超越了公辦教學的傳統課堂模式。我們可以把一堂大課分為多個小班并為其各配一位輔導老師而共用一位主講老師，包括學而思、騰訊課堂、學霸君在内的諸多線上教育平台主流采用此種模式，也驗證了其盈利模式的可行性；小班課是指一位老師給一位或幾位學生輔導學習，有的一個老師對六個學生就已經很多了。對家長而言，小班課的價值在于個性化定制教育與專業服務，如大家較為常見的 51Talk、Vipkid 等基本都是采取此模式。這裡需要強調的是大班課與小班課之間費用的差距很大，大班課一般為幾千而小班課幾乎都要上萬。
與傳統遊戲直播等領域的思路不同，由于對互動性與課堂表現形式的要求更高，線上教育中内容表現的重要性更大。線上教育白闆主要有以下兩種展現形式：視訊流傳輸或素材傳輸。2015 年之前，受限于寬帶性能，國内的大多數線上教育平台都基于素材傳輸，其優勢在于可穩定緩存所需資源。如需要 PPT 那麼伺服器首先将 PPT 轉成圖檔形式，學生進入課堂後以下載下傳離線檔案的形式擷取 PPT，國内如滬江英語、中公教育等都是采用上述素材傳輸模式；2015 年之後，學而思網校開辟了基于視訊流傳輸的白闆展現形式，首先将豐富的視覺内容融融入白闆，在通過圖像合成等技術完成視覺優化後再進行傳輸。其優勢在于強大的擴充能力與可被保證的視訊内容準确性和嚴肅性。
1.1 視訊流傳輸和素材傳輸的優缺點
基于視訊流與基于素材各自優劣明顯，主要在碼率大小、提前預緩存、傳輸内容豐富度、擴充性四個方面。基于視訊流的傳輸，碼率與分辨率一定是核心參數，分辨率與清晰度的提升意味着碼率的增大；而基于素材的傳輸其碼率基本不變，除了需要傳送聲音與老師頭像用以保持課堂教學之外，其他資料流所占碼率的比例很低。基于視訊流的實時傳輸不需要提前預緩存而基于素材的傳輸需要學生提前進入網頁用以加載上課素材，這就導緻在傳輸内容豐富度上基于視訊流的傳輸要遠優于基于素材的傳輸。例如老師想為學生呈現一段動态素材，對基于素材的傳輸而言需要進行素材上傳等步驟，無疑是困難而繁瑣的；而對基于視訊流的傳輸而言隻需借助離屏渲染等技術從顯示卡中抓取相應素材片段并與原始視訊畫面混合後直接推流即可完成。而在擴充性上基于視訊流的傳輸由于隻需抓取目标素材與整合畫面，無論素材是二維還是三維都可通過内容整合将混合後的畫面直接呈現給觀衆，并且其背後的運算壓力均被推流端所承擔，有效降低了用戶端的運算複雜性，進而保證了整個平台的穩定性與良好的使用者體驗。
1）基于視訊流傳輸
上圖展示的是基于視訊流的傳輸流程。首先，電子白闆通過圖像抓取技術獲得目标圖像并将其傳輸至解碼器，其中的圖像抓取主要通過抓取桌面或抓取視窗，但這兩種方式都不算效率最優的，最佳方案是直接從顯示卡緩沖區中抓取相應資料，此方案被廣泛運用于借助 OBS 錄屏的應用場景如遊戲直播等，因為 OBS 整合了 HOOK 顯示卡的 API，可輕易獲得目标畫面，更為輕量與高效；擷取目标圖像并進行畫面合成後的視訊流資料會進入編碼器，如輸入 RTMP 流就可編碼為 H.264；編碼完成後資料傳輸至流媒體源站，接下來的流程就是經典的流媒體分發網絡，通過節點傳輸至每一位使用者，在此就不再贅述。
2）基于素材傳輸
而基于素材的傳輸更為複雜，其中必要的硬體包括攝像頭與聲霸卡，其中攝像頭傳輸老師頭像而聲霸卡傳輸老師聲音，為了節省帶寬占用，其中的頭像一般分辨率為 480p。攝像頭與聲霸卡采集到的資料會進入編碼器進行處理并傳輸至流媒體源站，資料流所占帶寬很小；但由于電子白闆在此流程中不屬于視訊流的一部分，故而我們需要為使用者單獨傳輸與攝像頭和聲霸卡采集到的畫面内容同步的電子白闆資料，單獨傳輸的關鍵就是信令伺服器。而這一部分傳輸流程對學而思網校等平台而言可借助 RTMP 中的 Matadata 實作，主要用于傳輸上課闆書與筆記。我們需要将老師書寫的内容原封不動呈現給學生才能保持線上課堂的生動性，老師無法書寫或者學生無法觀看等情況都是不可接受的。我們平台學生的續訂率可達到 95%，可以說是業界最佳。其關鍵就是我們利用音視訊技術為學生呈現最佳上課體驗，隻有去除所有體驗障礙，真正傳授貨真價實的知識使他們體會到教育的魅力才能切實留住學生。如果老師需要為學生呈現較為複雜的闆書如複雜幾何圖形或在坐标軸上繪制一個不規則圖形，這時就牽扯到攝像頭采集、筆記還原、圖像疊加、編解碼與傳輸、平台相容、筆記還原、課程回放等諸多項目，原先給予素材的傳輸模式無法滿足這些複雜用的需求，于是我們采用了基于視訊流傳輸的處理模式。
1.2 電子白闆所占地位
接下來我們需要讨論電子白闆所占的地位，基于視訊流的傳輸解決方案當中最重要的是豐富的教學内容，緊接着是通過渲染将其以視訊流的形式呈現給服務端。而基于素材傳輸的電子白闆首先需要進行的是教學内容與頭像渲染的處理，通過信令伺服器保證多個項目在整個過程中可以按需工作。
1.3 優秀電子白闆特性
優秀的電子白闆需要具備以下好處：體驗很流暢、教具很豐富、畫筆很自然、功能好擴充。電子教具主要是教學期間需要使用到的虛拟器具，傳統課堂的教室當中會配備粉筆、尺規等；而電子白闆除了能直接繪制幾何圖形之外、還可進行圖形拼接、旋轉、變形等傳統課堂無法實作的複雜變化。第三點是畫筆自然。觀察上圖圖中的截屏我們可以看到，雖然老師使用自然筆記繪圖需要花費更多時間，但這種闆書可令課程更佳生動有趣進而極大增加了學生上課的積極性，但是我們必須保證畫筆的精準與自然，較好還原書寫筆記的同時保證筆記的清晰與整齊，為學生提供良好的課堂體驗。最後一項是功能擴充，通過功能的擴充賦予課堂更多提升教學生動性與表現力的内容。
2、線上教育的白闆技術分享
電子白闆實作諸多功能，離不開渲染的功勞。渲染具體是指将資料以符合使用者觀感的形式展現，主要是借助 GPU 或 CPU 的運算。從事遊戲直播的同學一定不會對 OBS 感到陌生，OBS 中負責渲染的部分是 GPU 而非 CPU，這是為什麼呢？
2.1 GPU 渲染
GPU 處理與圖像有關的任務更為得心應手，因為 GPU 可快速渲染圖像，對 3D 的支援也較為完美，其強大的圖像變換能力可為進階圖像處理功能提供技術支撐，使用 GPU 進行這些工作的原因之一是 GPU 善于處理浮點數相關的任務，圖像縮放的時間與資源消耗遠低于 CPU。如使用 i7 CPU 進行圖像變換，對 4K 視訊或者圖像進行處理使其能夠在很小一片區域進行渲染，其中涉及到的處理為圖像縮放，渲染并縮放視訊至要求的區域尺寸的同時保證原幀率等參數的不變，這對 CPU 而言是無法勝任的，可能會出現 CPU 滿載甚至負載導緻程式卡頓甚至崩潰的情況。
2.2 CPU 渲染
相對于 GPU，同樣的任務對 CPU 而言無疑是吃力的。CPU 處理圖像渲染非常困難，并且基本不支援 3D 變換，圖像變換性能也一般，幾乎所有場景下我們都需要依賴 GPU 的強大算力來實作圖像處理。
2.3 GPU 渲染技術平台
GPU 的圖像計算主要使用了 OpenGL、D3D、D2D、Metal 等技術。其中，OpenGL 中的 Desktop（桌面）版主要用于桌面級顯示卡，而 OpenGL ES 主要用于 Android 平台，與 Desktop 版的 OpenGL 相比 OpenGL ES 主要減少的是 API，受限于手機性能，較為複雜的 OpenGL 用于移動平台時在功能上會有所閹割。而 Angle 主要用于 Google 的 Chrome 浏覽器，其優勢在于跨平台相容，即使電腦缺少 OpenGL 的相關元件依舊可以借助 Chrome 浏覽器中的 Angle 實作 GPU 的圖像計算。為了保證性能，平台會首先判斷終端是否支援桌面版的 OpenGL，如果不支援則會轉成 OpenGL ES，若仍舊不支援則會切換到 Angel，即 D3D API 的映射，但其文法本身依舊基于 OpenGL。在開發中比較常見的 Web OpenGL 原理與其類似，如果計算機無法相容 Web OpenGL，平台就會切換至軟體渲染也就是通過 GPU 處理圖像渲染，但此時就會出現 CPU 占用率高、網頁卡頓等問題。這裡需要提醒的是 Windows 平台對 OpenGL 的支援一向不佳而對 D3D 與 D2D 支援良好，如 Windows 平台的 DirectX 就是基于 D3D 編寫。而在 Windows Vista 後 Windows 平台支援了較為輕便的 2D 繪圖硬體加速 D2D，相對于 D3D 的複雜，D2D 的 API 更精簡，這使得計算機處理如繪畫直線等二維圖像渲染任務時更為高效。對于 Apple 的 macOS 平台而言，Mac 逐漸放棄對 OpenGL 的支援轉而使用 Apple 平台通用的圖像渲染平台 Metal。最近業界的趨勢是使用 Vulkan 替換 OpenGL，Vulkan 由開發 OpenGL 的團隊提出，相對于 OpenGL 可實作 30% 的效率提升。但由于 OpenGL 的生态已經建立多年，新生态發展成熟還需一段很長的時間，現在我們談到的圖像渲染技術都是基于上述平台。
2.4 電子白闆與基礎圖形
如果從學科角度讨論電子白闆與基礎圖形，數學課程需要的基礎圖形除了直線、矩形、圓形等簡單圖形之外還有如雙曲線、抛物線、三角雙錐等諸多複雜的代數與幾何圖形然後呢；實體課程需要通過各種圖像模拟實體實驗與實體原理，例如基于 H5 技術仿真實體實驗，我們可通過推流将精彩的模拟實驗效果呈現給學生；化學課程則需要表現公式與化學方程式，而人文地理學科則需要實物展示與現實增強技術輔助老師為學生表現自然曆史文化的深厚與内涵。例如當國文老師講到 “孤舟蓑笠翁，獨釣寒江雪”，學生看到的線上課程畫面也許是老師坐在船上講課，而實際上老師是在挂有綠幕的影棚中講解，借助扣像技術實作這種生動形象的課堂效果。當然，這些課程通用的基礎圖形為畫筆、直線與圓形。
3、線上教育白闆互動案例
3.1 電子白闆與畫筆
無論是傳統的黑闆輔助講課還是現在老師常用的示範文稿輔助講課，都離不開畫筆與書寫對教學的幫助，老師使用粉筆在黑闆上書寫或使用滑鼠在示範文稿上繪圖，無論是表現力還是教學效果都一般。我們期待提供硬體級的技術支援幫助老師實作更生動易用的闆書書寫體驗。例如大家常用的 Wacom 手寫闆，基于電磁感應技術可實作觸筆壓力感應與筆迹模拟。當筆尖在數位闆上書寫時系統首先進行硬體采點，而後進行平滑處理，最後通過基于之前提到的圖像處理技術進行的高速渲染得到繪圖或闆書效果，其中的硬體渲染速度直接關系到筆迹的延遲。
硬體采點主要使用的技術之一是微軟的 InkCanvas 技術，大家知道微軟在 Surface 平闆上使用的 Ink 墨迹功能就是基于此技術。如果基于 WPF 程式設計進行開發那麼此元件是直接內建在 WPF 上可直接使用。另一種技術被稱為 WINTAB 技術，即使與 InkCanvas 一樣屬于閉源平台，但 WINTAB 提供了一套開放的數位闆 API 并授權開發者打開相關函數，使其更受開發者歡迎。
平滑處理主要通過多點權重平均、貝塞爾曲線等方式實作。多點權重平均主要是指取多個點進行權重計算進而擷取壓力的準确值，自然的畫筆表現一定是粗細過度平滑的；而貝塞爾曲線是計算機上一種平滑處理技術，屬于較為通用的處理算法。業界友商裡網易公開課的畫筆表現較為自然，而下圖展示的是我們老師線上上課堂書寫的闆書效果，可以看到和傳統教學在黑闆上書寫的效果相差無幾，是硬體采點、平滑處理、高速渲染等技術優化的結果。
3.2 學而思網校的電子白闆技術
在直播端我們可以看到一個與上圖相似的黑闆，其實是一個 OpenGL 顯示區， 通過建立整個視窗句柄實作利用 OpenGL API 進行繪圖操作。對于不規則多邊形的繪制我們借助帶阿爾法通道的混合實作黑闆元素與畫筆的疊加。
大家可以看到上圖展示的畫面當中筆迹有粗有細，就是經過上述技術優化實作的自然書寫結果。
除此之外，我們也實作了無縫播放器技術，此播放器實際上基于 FFmpeg。我們将其融入電子白闆并實作在視訊上進行繪圖寫字标注等操作，其意義在于白闆可與多種資源組合為課堂帶來更加生動的教學體驗。
除此之外，在抓取桌面的同時我們也可在上面進行寫字等操作。
外部攝像頭的作用主要是在多視角切換與共存，例如在老師做實驗時一個攝像頭可拍攝闆書内容，另一個攝像頭則用于拍攝實驗現象，更加友善快捷幫助老師展示他想展示的内容。
頁面植入技術可大大提升講師講課與學生上課的體驗。使用傳統的技術無法實作這種筆迹與互動功能自然切換的效果，如需放棄寫字進行互動操作隻需切換滑鼠模式即可。需要強調的是，上述所有功能基于離屏渲染技術，此技術內建在了 Google 浏覽器的核心當中。我們能看到的畫面來自直接抓取的 Buffer；而像 OpenGL 與 D3D 等經過雙緩沖或三緩沖，資料從活動緩沖區抓取并作為紋理的一部分渲染至 OpenGL 上，需要互動操作時再傳輸互動的指令，此系統可支援标注、書寫、繪圖等教學常用操作。
除了抓取二維元素，我們也可抓取外部三維元素。例如當我們想要抓取 Google 上的某個三維元素，隻需找到此視窗的句柄即可找到 OpenGL 窗體；接下來我們通過擷取 OpenGL 建立的上下文并使用 OpenGL API 讀取此三維元素，這樣就可高效便捷地将外部元素無縫內建至白闆畫面當中并通過視訊流呈現給學生。
4、未來展望
展望未來，我們希望通過 3D、AR 等技術實作更為生動逼真的課堂表現效果，如通過 3D 與 AR 技術 “複活” 侏羅紀時期的恐龍，老師可以通過互動操作讓恐龍奔跑或張嘴并随時切換視角進而幫助學生更全面了解這一史前生物；或者讓學生 “置身” 于一座植物園中，老師通過互動操作控制陽光天氣花開葉落，我相信這種生動逼真的表現力将颠覆我們現有的傳統教學課堂。關于學科工具，我們希望将題庫與仿真實驗內建在課堂當中。而動畫生成主要是指對于一些動畫模版的建構，例如對之前提到的基于 H5 的實體實驗，如果隻需在現存模版上修改幾個參數就能實作多種實體實驗的展示，那麼可減少大量的在制作動畫上的人力物力消耗。在程式渲染動畫模版期間修改幾個資料參數就可生成另一條動畫，可大幅減少開發與維護成本。
5、總結
電子白闆的關鍵在于教具、渲染、合成、傳輸，這也是在上文中反複提到的。
最後為大家推薦一些技術。首先是 QT 的 QML，其次是 WPF。WPF 內建了很多優秀的功能如 OBS 直播等；WPF 的整體渲染架構基于 D3D，優勢無法代替。GLS 是一種基于 OpenGL 的可程式設計語言，可實作對 GPU 的程式設計，而 HLSL 是一種基于 D3D 的 GPU 程式設計技術。除此之外，OpenGL 進階程式設計與 WPF 程式設計寶典是我推薦大家閱讀的。
————————————————
版權聲明：本文為CSDN部落客「LiveVideoStack_」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。
原文連結：
https://blog.csdn.net/vn9PLgZvnPs1522s82g/article/details/86464902「視訊雲技術」你最值得關注的音視訊技術公衆号，每周推送來自阿裡雲一線的實踐技術文章，在這裡與音視訊領域一流工程師交流切磋。