在 RTC 2020 編程挑戰賽春季賽中，一站式雲課堂 Xeducation 獲得了第二賽道的最佳實踐獎。開發這個項目的團隊是來自上海科技大學的幾名在校生。
經過疫情期間的網課學習後，他們發現了很多體驗很多問題，比如直播、答疑、課件共享等都是通過不同的軟件實現的，還有課程主頁與課程資源頁面信息邏輯不清晰等。於是，他們基於 Agora SDK 開發了一套教學系統——Xeducation。
Xeducation是一套一站式雲課堂解決方案，主要面向學生等有在線學習需求的羣體。Xeducation融合了課堂直播、課程回放、資料下載等基礎功能，並增加了全新和直觀的強大功能，推出了搭配Markdown筆記、在線教材瀏覽、課堂交互的課堂新模式，同時，結合移動端App、Web端瀏覽信息和人像識別算法的綜合信息，可以爲使用者提供詳細的專注度檢測報告。
以下內容由 Xeducation 團隊撰寫，記錄了他們的開發歷程，以及總結下來的寶貴經驗。
項目初心
關於Xeducation，它的誕生可以說是有受疫情影響的。作爲一個純學生團隊，我們不免從自身的需求開始想起。
上課直播畫面模糊，存在雜音，高延時等問題嚴重影響了課堂效率和互動體驗。上課軟件不支持錄屏（需另找軟件錄屏，而錄屏畫質往往被壓縮的很嚴重），當直播畫面模糊，聲音卡頓之後，錯過的這部分就很可能就這麼永遠錯過了。而若是基於聲網Agora的RTC技術支持，超低延時，超高質量的音/視頻通信，極大地降低了這種情況出現的可能。
同時，線上課堂各科使用的軟件不同，功能分散，消息通知不及時也影響了學習效率。
比如，如果我要上一節電路基礎實驗課，我需要在bb系統觀看課前視頻和資料，打開word或者提前下載好的ppt寫筆記，用騰訊會議看直播發言，在微信羣的小程序裏簽到。
數一數，所有課程涉及的平臺多達八個。這樣一系列切換窗口，尋找自己需要的內容，至少一兩分鐘也是需要的，有時可能找不到，或忘記下載內容，或忘記簽到。
於是，基於種種緣由，Xeducation 誕生了。
整合一切，真正實現一鍵上課，高效輕鬆地在線學習。
主要功能與實現
Xeducation 分爲手機端和電腦端
團隊在瞭解賽題後就使用 Axure RP 完成了 Web 端的原型設計，基於 Vue2 進行了開發，頁面除少部分組件使用 Element 組件外，佈局與組件均圍繞“高效、清晰”的原則設計與自主搭建，開發中主要用到的技術棧有：Vue2、Vue-router、Axios、Less、ECharts、Element 等。Mobile 端應用使用 Weex 搭建，使用了 Weex-UI。
手機端的主要功能是提醒上課，新文件和公告提醒，檢測手機狀態以綜合檢測專注度。
電腦端登錄後主要界面分爲主界面，直播界面，課程界面，專注度界面，個人設置界面，擁有課堂直播、課程回放、資料下載等基礎功能，直播界面搭配 Markdown 筆記、在線教材瀏覽、課堂交互。同時，結合移動端 App、Web 端瀏覽信息和人像識別算法的綜合信息，提供詳細的專注度檢測報告。
主界面
由個人信息，課表，各科最新通知欄和 ddl 欄組成。點擊個人信息的頭像可以顯示接下來要上的課並跳轉到該課直播界面。點擊課表上的各科圖標可以跳轉到該科課程界面。最新通知欄與ddl欄在點擊期中的鏈接後可以分別跳轉到通知界面和作業提交界面。
直播
直播界面分爲直播畫面和側邊欄。
畫面上方爲同學們的攝像頭畫面，畫面下方爲常規控制按鍵（可調節透明讀隱藏），顯示課堂缺席人數，彈幕發言框可選擇匿名發言或提問，增強學生課堂參與度。右側側邊欄內嵌 Markdown 編輯器，小功能擴展（簽到，課堂 quiz 等），在線課件翻閱，在線教材和網頁搜索，提升效率與課堂專注度。
這部分基於聲網 Agora SDK 實現，老師與學生之間的實時消息得到了低延時傳輸，更好地還原了課堂互動。
課程內容
課程界面左側選擇課程，下拉有小黑板和課程直播鏈接，中間上方爲課前視頻，下方爲課程直播回放，回放支持發言定位視頻進度。右側爲佈告欄，課件和作業下載欄。（由 Agora 提供直播錄製服務）
專注度
此部分通過採集到的用戶畫面和 Web 與 Mobile 端的用戶數據分析專注度，通過使用 OpenCV 與 TensorFlow 來達到專注度分析的目的，基本流程如下：
1. 面部識別 - 使用 OpenCV 中 DNN 模塊
2. 面部標記 - 使用 TensorFlow 中 68 點估計
3. 姿態估計 - PnP 算法
4. 穩定化 - Kalman filter
5. 專注度分析
專注度界面以折線圖，餅圖，柱狀圖和數據形成詳細的專注度分析報表，幫助分析不同時段、不同課程中的表現，幫助找出薄弱項目、規劃高效學習時間，可供教師與家長遠程監督。
結合手機端App檢測手機使用信息、Web端瀏覽器信息、攝像頭對人頭朝向的信息綜合判斷當前專注度，Xeducation將爲用戶生成每日專注度報告反饋，包含時間與課程之間的橫縱向比對，爲您管理您的專注時間。
Next Step
更多的還原互動性課堂，如：
1. 直播界面學生攝像頭採集動作代入人物模型，還原上課場景
2. 老師要請回答問題，學生可一鍵開麥實時互動
3. 舉手
挖掘視頻數據中更多的信息，如：
1. 實時截屏識別文字加入到筆記
2. 定位老師所用教材的位置，側邊欄教材同步翻閱並支持記筆記
針對不同課程拓展功能欄，小功能區，如：
1. 如代碼編輯器
2. 課內演示動畫
3. 音樂課添加五線譜在線編寫簡短音樂並實現播放
4. 地理課提供三維地球模型，國家地圖，洋流圖，氣候分佈
提供專注度參考的雲自習室。
輔助學習，如：
1. 根據所有人課表找出共同時間安排習題課，討論課
2. 提供學生常用軟件，網址鏈接（如知網）
教師端輔助上課。如：
1. 教師端上課時使用 Xeducation 打開文件，傳輸信息爲攝像頭畫面+老師筆畫，學生同步在同一頁 slides 上做筆記，也就是課件成爲雲文檔形式，存儲每人所寫筆記。
2. 作業信息統計，成績彙總，學生上交作業上直接批改。
一體化的平臺，流暢的課程體驗。
開源與Demo體驗
Xedu項目網址 ：
www.xeducation.top
Github主頁:
https://github.com/ChunxuGuo/RTC-Hackathon/tree/master/SDKChallengeProject/Xeducation
想了解更多技術乾貨？
6 月 20 日我們將邀請三位 RTC 編程挑戰賽春季賽獲獎者，線上揭祕他們作品背後的技術實現，以及作品靈感。我們在秋季賽準備了更豐厚的獎金，如果你希望在秋季賽中技壓羣雄，6 月 20 日來直播間交流、取經吧。
掃碼或點擊「閱讀原文」報名，預約直播
