面向K12 的在线教育直播平台的设计与实现

南京市电化教育馆（南京市教育信息化中心） 刘晓羽

在技术发展迅速的今天，网络直播教育已经渐渐普及开来。对于促进教育公平化，网络直播教育恰逢其时。它既可以跨越地理的空间限制，也能提高教育教学质量的快速普及。网络直播教育平台正是解决当下偏远山区教育的最优解。文章设计了一个面向K12 的在线直播教育系统，老师和学生既可以克服空间限制，也可以做到实时交流，加强了学习效率的同时，也促进了教育教学过程良性发展的蓬勃趋势。

目前，伴随着AI 技术与5G 网络通讯的快速发展，线上线下教育融合的趋势愈发凸显[1]。为了提升教育教学效果，打造一个面向K12 的在线直播教育系统是有着巨大实践价值的工程应用。本文提供了一套已经用于实际生产环境的教学直播平台的架构方案。其具体方案是:采用Nginx 来搭建流媒体服务器，实现数据的转发功能[2]。该系统除了提供用户的登录、注册和找回密码等基本的需求，教师采用OBS 进行推流操作，经过Nginx 流媒体服务器转发后，学生端进行拉流操作，获取教师的视频界面，借此实现直播功能。

1 系统概要设计

本系统是利用互联网作为传播平台，综合利用流媒体技术，将老师上课的画面（视频部分）、语音（音频部分）实时地对在校学生进行网络直播教育的平台。其整体架构可以从硬件层面和软件层面分别进行阐述。

（1）硬件设计层面。学校教育具有典型的“弹性”特征，通常学生学习的时长全年为40 周（去除寒暑假），因此，过度购置设备必然会造成设备的闲置。在本方案中，硬件服务器使用“云存储”架构，基于时空复用、分时配置的原则合理规划服务器投入。

（2）软件设计层面。本系统核心用户端可划分为两侧:教师端和学生端。

1）教师端:教师是教育教学的主动发起方，教师可以把本地的PPTX 文件进行转换，转换为HTML5 文件，这样可以让文件在浏览器端打开，有良好的兼容性。再者，教师需要直播功能、视频互动功能等比较重要的功能[3]。因此，本方案搭建了Nginx 流媒体服务器，给了教师对应的URL 和密码，这样教师就可以基于OBS 技术进行推流直播。从实际教学需求出发，本系统提供了教师端的桌面涂鸦功能，可以直接在教师端桌面进行涂鸦批注，从而在教学活动中，及时对课堂上的重点知识进行标注，进而引领学生学习进程，提高了知识讲解效率。

2）学生端:首要的功能是登录、注册和忘记密码等基本信息系统所具有的功能，这对一个完整的系统有着非常重要的功能。再者，学生需要的最基础的功能是看直播课程，本系统是在线直播平台，观看直播功能就是本系统最为主要的功能，也是学生最为关心的功能。最后，学生需要和老师进行视频互动的功能，这对于提升教学效果有着非常重要的实践价值。

2 系统详细设计

2.1 教师端分模块详细设计

教师端模块由基础功能模块和直播功能模块共同组成。基础功能模块为直播功能模块提供数据支撑。教师登录系统以后，点击“课程信息管理”按钮，可以直接进入课程信息管理界面，在该界面中，教师可以对课程信息进行编辑和更改。并且，在此界面中，系统会收集数据库中的所有信息，并在正确的网页上显示相关课程的具体信息，管理员可以选择具体的产品进行信息更改、添加信息和更改或删除信息。如果课程有变更，同时点击“保存变更”按钮和页面，系统会提示教师“修改成功”提示，课程相关信息也会及时显示；如果点击“删除”按钮，系统会提示“是否删除”，如果教师选择“是”，系统删除之后会提示教师“删除成功”，对应的课程将从系统页面中移除。如果网页没有实时地显示出来，教师可以手动点击“刷新页面”按钮，进而就可以看到最新的课程信息。如果教师有新的课程要上线发布，可以访问“添加新课程”链接，输入课程相关信息的详细介绍，此后再点击“保存”按钮，保存完成后，“保存成功”会出现，教师及时刷新页面就可以观测新课程。

在本教育直播平台中，每个学生每一次观看课程直播，都会获得一个流水号。这样系统就可以统计每个流水号对应的观看时长和交互信息，并建立直播学情基础数据表。想要了解某一门课程的在线学情，可以找一张数据表，查看表中的课程流水号，也可以查询该门课程在该直播时间段内的参与趋势状况。直播学情基础数据是分析在线学习学情质量的重要依据。

在基础模块之上，教师端的直播功能才能发挥作用。首先，需要启动Nginx 服务器后，可以通过OBS 进行推流，将本地的音视频发送出去，让学生可以看到直播。至于连麦互动则是采用了目前主流的WebRTC 实现其功能。

教师端直播功能如图1 所示。

图1 教师端功能图Fig.1 Function diagram of the teacher

2.1.1 功能模块之PPTX 课件导入

在教师直播课教学知识的过程中，老师总会用到PPT/PPTX 文件，把所需要讲解的知识点整理完善在PPT上，或者直接对着PPT/PPTX 进行讲课，有时也会把课上的重要知识点和比较重要的拓展知识都记载在PPT/PPTX上。PPT 是微软公司设计的桌面Office 办公套件的文件格式，无法直接在浏览器上打开，需要专门的软件来打开文件。本系统根据PPTX 规范，自行设计了文件格式转化算法，将PPTX 文件转化为HTML5 文件[4]。这样一来，学生可以在浏览器上查看。既便于学生的课后复习，也提高了系统访问的便捷性。在具体实现上，本系统利用了Office 365 的PPTX 标准文档，进行XML 解读，从而使得PPT 课件实现网页话浏览。

2.1.2 功能模块之视频直播

直播模块采用了Nginx 搭建流媒体服务器，OBS 实现RTMP 推流，学生端拉流实现直播，如图2 所示，其实现流程如下，首先建立教师端OBS 推流，然后经由Nginx服务器对OBS 流进行转发，按照HTTP 的标准协议，学生可以直接以HTML5 的格式进行观看。

图2 直播模块执行流程Fig.2 Execution process of live broadcast module

2.1.3 功能模块之师生连麦

在直播的过程中，老师有时需要和学生端进行沟通，视频连麦互动就变得非常重要。在本系统中，采用了Node.js 执行JS 文件，在浏览器上调用WebRTC 来实现视频通话功能。WebRTC 是一个实时通讯的技术，可以通过此技术方便快速地构建出一个音视频通讯应用。具体流程如下:先在A 端发送Get 请求，并定时轮询是否有教师应答，当教师收到连麦请求后，则将SDP 回传给学生实现连麦功能，具体如图3 所示。

图3 WebRTC 实时通信Fig.3 WebRTC real-time communication

2.2 学生端分模块详细设计

学生端模块的功能主要是登录、注册、观看直播和与老师连麦互动的功能。学生端可以登录后，点击对应的课程，从而转到对应的JSP 界面来获取观看直播的功能。

针对学生端的交互界面设计，必须体现实用性和简易性，基于“Donot Make Me Think”的原则，设计“所见即所得”的操作界面，为用户更好地操作提供便利。学生使用在线直播平台的流程包括课程浏览界面、用户登录界面、课程信息核对、点击上课按钮等。

（1）课程浏览界面。用户可以通过网络关注微信公众号，在首页浏览相关年级、所属学校的信息，找到自己必须参与的课程后，点击上课按钮，系统即跳转到登录界面。

（2）用户登录。用户在进入到上课流程中后，必须要进行登录才能正式上课。如果用户第一次使用，尚未注册账号，则需要先注册，后上课。用户注册或登录的信息会被服务器记录下来，这是学校进行学情分析的数据来源，具体包括登录时长、网络掉线、课堂参与的重要数据来源。

（3）课程信息核对。这一界面设计中，必须要对学生上课进行必要的信息确认。在线学习虽然方便了学生的学习，但是课堂交互监控就明显不如线下课程。因此，学生要进行信息填写，如学习课程的方式、授课教师信息等，以方便教师监管。

（4）点击上课。该步骤会依据用户之前填写的信息，供用户对上课进行二次核对，如果发现存在问题，需要及时修改，如果核对无误，方可点击确认。接着用户可以点击在线上课按钮，进入在线学习流程，这样页面会直接跳转到课程学习的主页面。

当学生完成了基础信息校验之后，学生可以进入直播课堂，与老师进行语音、视频通话来参与课堂互动。学生端通过对应的URL 可以获取到教师端通过Nginx发送的数据，以此方式实现了在线直播功能。学生端功能如图4 所示，在设计上，学生端与老师是一对多的关系，分层设计必须考虑不同的业务场景，主要分以下几种:

图4 学生功能图Fig.4 Student function diagram

场景1，观看直播，采用网页WebRTC 推流技术，进行流媒体传播；场景2，连麦，分为学生与学生，学生与老师，采用P2P 技术；场景3 和场景4，均为传统Web服务，考虑到手机、PC、平板的特性，采用HTML5 进行业务编码。

3 系统测试

在线直播教学平台是一个高并发的实时流媒体播放平台，本系统的设计在使用中必须要考虑在同一时间有众多用户同时登录进行授课的情况，所以要确保系统的访问级别达到企业级别，避免在高并发的状况下，服务器因为网络拥塞、服务器资源规划等问题，出现系统崩溃。在上线运行前，使用Jmeter 模拟万人在线的网络尖峰，在实际运行中，随时备用云服务器实现负载均衡。在实际运行中，系统运行良好，偶发轻微卡顿，总体运行流畅高效。

4 结语

采用Nginx、OBS、WebRTC 搭建而成的在线教学直播系统突破了传统教育的时空限制，采用在线Web 访问的形式，极大地提高了学习人群的覆盖面。本系统采用内容差异性原则的设计方案[5]，将流媒体推送和网络转发有机地统一起来，基于WebRTC 技术将课堂连麦互动有效地组织起来，可以极大地提高实时直播的稳定性和课堂教学的高效性。本文的这种系统架构可以为类似的在线教育提供借鉴与启发。