基于WebRTC技术的实时在线教学系统

张智，熊禹

（武汉科技大学计算机科学与技术学院，武汉 430068）

0 引言

传统的音视频即时通讯类软件如QQ、微信以及Skype等，虽凭借助大厂的技术实力可以为我们保证视频通讯的质量和效率，但这些大多不是基于网页的，而且需要有特定的客户端软件支持。在WebRTC技术出现以前，要在浏览器上实现点对点视频通讯是很耗时耗力的复杂的工程，其中不仅涉及到复杂的视频编解码问题，同时还有通信协议、回声消除、去噪等复杂性很高的专业性难题，更重要的是不同浏览器对协议支持的不统一，要实现跨浏览器之间的视频通讯难上加难。

WebRTC作为Google的一个开源实时通信项目，已经成为下一代视频通话的标准，在行业内得到了广泛的支持和应用。WebRTC使用统一简单的接口处理那些复杂的通信过程，底层的细节如编解码、视频质量、去噪、回声消除等就可以直接交由浏览器厂商和Google统一解决，而开发者在浏览器上实现点对点视频通讯的功能将和调用库函数一样简单，这样开发者将更专注于系统的业务逻辑。

1 WebRTC主要运行机制

1.1 从摄像头获取视频流

WebRTC调用摄像头过程如图1所示。

图1 WebRTC调用摄像头过程

调 用 的核心 方 法：navigator.getUserMedia（con⁃straints,successCallback,errorCallback）;其中 constraints参数允许用户规定获取哪种媒体资源，其参数配置如var constraints={audio:true,video:true};

如果getUserMedia（）方法调用成功，那么从摄像头获取的视频流将作为video元素的源，调用成功会触发相应的回调函数：function successCallback（stream）{…}

1.2 从RTCPeerConnection下获取视频流

RTCPeerConnection接口代表一个由本地计算机到远端的WebRTC连接。该接口提供了创建，保持，监控，关闭连接的方法，是一个用于请求WebRTC的多媒体视频、音频通讯以及数据交换的API，它在不同的浏览器中有不同的实现方式。

一个基本的RTCPeerConnection使用需要协调本地机器以及远端机器的连接，它可以通过在两台机器间生成Session Description的数据交换协议来实现。呼叫方发送一个offer（请求），被呼叫方发出一个answer（应答）来回答请求。双方-呼叫方以及被呼叫方，最开始的时候都要建立它们各自的RTCPeerConnection对象。

1.3 使用RTCDataChannel来交换数据

RTCDataChannel接口代表在两者之间建立了一个双向数据通道的连接。RTCDataChannel API支持灵活的数据类型，并且支持JavaScript中的二进制类型如Blob、ArrayBuffer和ArrayBufferView，另外还支持字符串。这些类型对于文件传输和多玩家的游戏来说意义重大。

RTCDataChannel在不可靠模式（类似于UDP）或可靠模式（类似于TCP）下都能够正常工作，在不会丢包的情况下，这两种模式的效率差不多。然而，在可靠模式下，丢包将造成后续的所有包阻塞，丢失的数据包也将重传直至其成功到达。当然，可以在同一个应用中使用多个数据通道，每一个有自己的可靠性。

1.4 其他机制

尽管WebRTC允许点对点的通信，但它依然需要服务器：

●信令传输：建立点对点的连接需要传输一些媒体和网络相关的元数据信息，需要通过服务器。

●NAT和防火墙穿透：可以使用STUN服务以及TURN服务器。

2 实时在线教学系统的设计

2.1 系统功能模块设计

本系统主要分为实时视频教学，教学桌面共享，教学资源管理，教学统计与分析以及系统后台管理等5大功能模块。具体的功能如下：

（1）实时视频教学

能创建视频教学房间、加入/退出视频教学房间、视频教学评价与留言等。

（2）桌面教学共享

能创建共享桌面教学房间、加入/退出共享桌面教学房间、共享桌面教学房间评价与留言等。

（3）教学资源管理

主要是教学资源资料在线分享，如文档上传、文档分类、文档点赞、评价等功能。

（4）统计与分析

主要有教学资源统计分析，教师评价统计分析，在线教学课堂统计分析等，包括如文档查看量、文档下载量、文档点赞量、文档收藏量、教师受访量、教师评星打分、在线视频课堂评分、最佳排名等功能。

（5）后台管理

主要有学生管理、教师管理，班级管理，文档资源类别管理，文档操作记录管理等，包括如文档收藏记录、文档查看记录、文档评星记录、文档下载记录、文档点赞记录、课堂留言管理等功能。

2.2 数据表设计

系统数据表清单如表1所示，以WebRTCAudio VideoClassRoomItem表作为示例，其结构如表2.2所示。

表1 数据表清单

表2 WebRTCAudioVideoClassRoomItem表

3 实时在线教学系统的实现

本系统是一个Java Web项目，嵌入了单独的We⁃bRTC服务程序。因此需要部署两套应用，首先打包Web项目发布到Web服务器的Tomcat中，同时还需要将WebRTC服务搭建起来。WebRTC服务器端使用Node.js搭建，并直接以链接的形式连接到Web项目中，由于WebRTC视频通讯系统还需要处理复杂的外网环境，此时需要自行搭建WebRTC的信令服务器，信令服务器也是使用Node.js搭建。

系统实现的如实时视频教学，教学桌面共享，教学统计与分析等模块分别如图1-4所示。

图1 实时视频教学

图2 视频教学PC端

图3 教学桌面共享

图4 教学统计与分析

4 结语

本文利用WebRTC技术，设计并实现了一个实时在线教学系统，主要实现了实时视频教学，教学桌面共享，教学资源管理，教学统计与分析以及系统后台管理等功能。实践证明WebRTC技术可以成为在线教学的一种有效的即时通讯手段，可以让在线教学系统的服务更上一个台阶，更好地服务于我们的学生，让广大学生通过浏览器能便捷地接触到更优质的在线教学资源。

[1]Salvatore Loreto,Simon Pietro Romano.Real-Time Communication with WebRTC[M].O'Reilly Media.May 2014.

[2]Dan Ristic.Learning WebRTC[M].Packt Publishing Limited.June 2015.

[3]姚力，刘强.VoIP中一种基于WebRTC的回声消除改进算法[J].计算机科学，2017（S1）：309-311,318.

[4]岑霄，葛志辉等.基于QoE的移动WebRTC传输优化策略[J].小型微型计算机系统，2017（7）：1464-1469.

[5]李香菊，谢修娟等.基于WebRTC的实时视频教学系统的设计与实现[J].现代电子技术，2016（6）：114-116,119.