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

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

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

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

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

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

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

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

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

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

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

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

2.互動(dòng)課堂方案優(yōu)勢(shì)分析

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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