RTC编程挑战赛 开源项目推荐

Posted 2021-04-30 鸿洋

在 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。

手机端的主要功能是提醒上课，新文件和公告提醒，检测手机状态以综合检测专注度。

电脑端登录 后主要界面分为主界面，直播界面，课程界面，专注度界面，个人设置界面，拥有课堂直播、课程回放、资料下载等基础功能，直播界面搭 配 Ma rkdown 笔记、 在 线教材浏览、课堂交互。 同时，结合移动端 App、W eb 端浏览信息和人像识别算法的综合信息，提供详细的专注度检测报告。

主界面

由个人信息，课表，各科最新通知栏和 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 日来直播间交流、取经吧。

扫码或点击「阅读原文」报名，预约直播