本文由騰訊互動課堂技術(shù)負(fù)責(zé)人繆少豪在LiveVideoStack線上分享中的內(nèi)容整理而成，詳細(xì)介紹了騰訊云在線教育互動課堂方案的設(shè)計(jì)與技術(shù)挑戰(zhàn)，重點(diǎn)解析了互動白板的實(shí)現(xiàn)技術(shù)難點(diǎn)與突破。

1.互動課堂解決方案及整體架構(gòu)

騰訊云互動課堂提供了一種低延時(shí)、全平臺、交互式的在線視頻授課服務(wù)，滿足多種教育場景的需求，幫助企業(yè)快速構(gòu)建在線教育互動課堂平臺，是集IM即時(shí)通信、實(shí)時(shí)音視頻以及實(shí)時(shí)互動于一體的互動課堂解決方案。

騰訊云互動課堂架構(gòu)

如圖中間的6個(gè)模塊是整體方案的各個(gè)服務(wù)塊：

互動白板后臺：主要提供白板歷史數(shù)據(jù)，例如教師課前準(zhǔn)備數(shù)據(jù)等。

內(nèi)容分發(fā)網(wǎng)絡(luò)：主要保證課件的可靠分發(fā)，采用騰訊云的CDN服務(wù)。

課件轉(zhuǎn)碼后臺：主要對課件進(jìn)行多種格式的轉(zhuǎn)碼，是互動白板產(chǎn)品必不可少的部分。

對象存儲服務(wù)：對課件、視頻等資源進(jìn)行落地存儲，利用騰訊云COS服務(wù)。

實(shí)時(shí)音視頻后臺：保證師生音視頻交流的重要信令通道。

即時(shí)通信后臺：首先作為互動白板的默認(rèn)信令通道；其次是師生、同學(xué)之間發(fā)送消息通道。

教師和學(xué)生進(jìn)入課堂后，在互動白板后臺獲取課前準(zhǔn)備的課件資源，這些不同格式的課件資源來自內(nèi)容分發(fā)網(wǎng)絡(luò)。課堂期間的音視頻、師生之間聊天消息的交互通過實(shí)時(shí)音視頻后臺和即時(shí)通信后臺，進(jìn)行內(nèi)容和音視頻流的分發(fā)，即完成音視頻和互動白板的交互過程。 另外，線上課堂非常重要的一個(gè)模塊就是錄制后臺，即騰訊云互動白板提供的一整套比較完整的音視頻和白板同步錄制的方案。

2.互動課堂方案優(yōu)勢分析

互動課堂整體方案使用騰訊的實(shí)時(shí)音視頻服務(wù)，其具有18年的實(shí)時(shí)音視頻經(jīng)驗(yàn)積累，方案在超過5000個(gè)終端完成適配，并且全球端到端的平均延時(shí)可達(dá)到300ms以內(nèi)，抗丟包率40%，抗網(wǎng)絡(luò)抖動在1s左右。即時(shí)通信采用騰訊基于QQ底層IM能力的基礎(chǔ)服務(wù)，提供全球的高并發(fā)、高連通、高可靠、強(qiáng)安全的網(wǎng)絡(luò)連接通道。 以騰訊IM作為信令通道的互動白板可實(shí)現(xiàn)小于100毫秒的超低延時(shí)，支持多種格式文檔的轉(zhuǎn)換，提供白板音視頻同步錄制方案，另外還支持多維度監(jiān)控能力，幫助線上進(jìn)行分析和解決問題。

在此方案的支持下，可以滿足多種教育場景的需求，并且可以靈活應(yīng)對各種教育細(xì)分行業(yè)應(yīng)用場景，上圖中簡要列舉了幾類應(yīng)用場景，其中包括超大并發(fā)的大班課，例如萬人級的公開課；以及注重師生互動性的小班課等。

3. 互動白板產(chǎn)品介紹

騰訊云互動白板支持多人在線互動白板服務(wù)，依賴于騰訊自研制的即時(shí)通信IM技術(shù)，小于100ms的超低延時(shí)，全平臺覆蓋支持，功能齊全，包括實(shí)時(shí)涂鴉、文檔共享、白板音視頻錄制功能等。

4. 互動白板技術(shù)優(yōu)勢解析

互動課堂解決方案推出之后，收到了很多客戶反饋，主要反饋的痛點(diǎn)以及解決方案有以下三點(diǎn)。 4.1 白板音視頻高度同步方案 實(shí)時(shí)音視頻效果雖好，但價(jià)格昂貴：對于萬人級的大型培訓(xùn)是一筆很大的開銷，若使用旁路直播，成本低，但是延時(shí)非常大，導(dǎo)致白板操作和直播存在明顯不同步現(xiàn)象，觀感出現(xiàn)明顯延時(shí)，學(xué)員端無法實(shí)現(xiàn)白板和音視頻同步。 互動白板與實(shí)時(shí)音視頻實(shí)際是兩個(gè)沒有關(guān)聯(lián)且獨(dú)立渲染的產(chǎn)品，能夠做到同步取決于各自產(chǎn)品的延時(shí)，若實(shí)時(shí)音視頻的延時(shí)為300ms，而白板是100ms延時(shí)，200ms的延時(shí)差在學(xué)員端是人眼無法感知的，但若使用旁路直播，則存在秒級延時(shí)，可以明顯察覺不同步問題。

如圖中上下兩部分進(jìn)行對比，白板信令自帶時(shí)間戳，通過IM即時(shí)通信發(fā)送到學(xué)生端，當(dāng)學(xué)員端接收信令之后計(jì)算IM延時(shí)。將白板的時(shí)間戳注入到音視頻，通過音視頻SEI技術(shù)，將音視頻流發(fā)送到學(xué)員端后解析時(shí)間戳，進(jìn)行時(shí)間差計(jì)算，白板根據(jù)時(shí)延進(jìn)行繪制，以達(dá)到同步效果。此解決方案與教師端和學(xué)員端的本地時(shí)間是無關(guān)的，兩端的本地時(shí)間是否一致對結(jié)果不影響。 4.2 同步互動的視頻播放方案 當(dāng)教師希望分享某個(gè)視頻給學(xué)生觀看，就會因?yàn)椴煌a(chǎn)品的要求限制導(dǎo)致出現(xiàn)以下問題：

已參與連線視頻課堂，不可再進(jìn)行視頻上行，導(dǎo)致教師端的上行帶寬被占用，出現(xiàn)視頻課堂卡頓問題，或者帶寬無法滿足問題；

在1v1的場景下，學(xué)員可以要求教師復(fù)講某個(gè)知識點(diǎn)，這就要求學(xué)生對視頻課堂進(jìn)行回滾操作，以定位某一知識點(diǎn)的時(shí)間點(diǎn)；

全屏共享不可泄露敏感信息，例如app出現(xiàn)私聊界面，是不希望出現(xiàn)在屏幕共享范圍的。

互動白板方案可以完美解決以上問題，方案中教師端可通過自存儲位置拉取視頻進(jìn)行播放，期間教師進(jìn)行的白板操作通過信令同步到學(xué)員端，以實(shí)現(xiàn)交互性。 另外互動白板方案中異常檢測和重試機(jī)制缺一不可。例如APP推到后臺，視頻會自動暫停，則音頻的暫停會中斷視頻的播放。通過異常檢測發(fā)現(xiàn)異常，則回滾重放。當(dāng)獲取視頻時(shí)長失敗時(shí)，則利用重試機(jī)制進(jìn)行二次重試，以保證正常播放狀態(tài) 4.3 白板音視頻同步錄制方案

課堂錄制是在線教育不可或缺的部分，做白板音視頻同步錄制的初衷是基于白板和音視頻分開錄制，這就會出現(xiàn)“不同步現(xiàn)象”以及“后期的混流成本很高”兩大痛點(diǎn)。 白板的錄制后臺本質(zhì)是一個(gè)客戶端，當(dāng)客戶將業(yè)務(wù)后臺發(fā)起錄制時(shí)設(shè)置的錄制參數(shù)和后期混流布局參數(shù)發(fā)送給錄制后臺，后臺就會訂閱教師端的音視頻和互動白板，錄制后臺收到教師端的音視頻和互動白板后，進(jìn)行離屏渲染，將白板信令的操作數(shù)據(jù)轉(zhuǎn)化為白板視頻流，與音視頻流混合，通過客戶提供的布局文件達(dá)到混流目的，生成客戶需要的mp4文件。整體方案的核心在于離屏渲染技術(shù)。4.4 基于Canvas的高流暢性涂鴉方案

全局渲染即將舊數(shù)據(jù)與新數(shù)據(jù)進(jìn)行合并，再進(jìn)行一次性渲染，達(dá)到最終效果。

局部渲染即基于舊數(shù)據(jù)渲染的基礎(chǔ)上進(jìn)行添加的過程。

信令是通過IM發(fā)送，涂鴉點(diǎn)會出現(xiàn)亂序問題，如果只做局部渲染則無法處理亂序涂鴉問題，通過加入全局渲染即可解決亂序問題，以保證顯示正常。 因此，白板采用全局渲染和局部渲染的混合方案，繪制幀率可以持續(xù)保持30FPS以上，從而實(shí)現(xiàn)更加流暢的體驗(yàn)。 4.5 靈活對接第三方信令

即便某些客戶已經(jīng)接入第三方音視頻和IM即時(shí)通信，同樣可以使用騰訊云的互動白板產(chǎn)品。這源于互動白板不依賴實(shí)時(shí)音視頻和即時(shí)通信服務(wù)，可以支持接入第三方信令通道。騰訊SDK會將所有互動白板所記錄的數(shù)據(jù)發(fā)送給第三方的信令通道，以做到不依賴即時(shí)通信的效果。 4.6 其他技術(shù)優(yōu)勢

目前互動白板支持兩種PPT的轉(zhuǎn)碼技術(shù)，即靜態(tài)轉(zhuǎn)碼和動態(tài)轉(zhuǎn)碼，動態(tài)轉(zhuǎn)碼可以完整保留PPT動畫效果，以提升教學(xué)體驗(yàn)。 此外，互動白板還應(yīng)用了騰訊自研的筆跡筆鋒優(yōu)化算法，可以高度還原手寫體效果，如圖中筆跡演變的效果。 最后為大家提供白板DEMO的體驗(yàn)地址（白板Github）： https://github.com/tencentyun/tiw