基于B/S结构的多终端交互式幻灯片演示系统

2018-03-07 00:43曾柏羲宋鸿陟司国东

现代电子技术 2018年4期

曾柏羲+宋鸿陟+司国东

摘要：为了满足大型多媒体教学的需求，针对传统PPT幻灯片演示的局限性，设计并實现一种基于B/S结构的交互式幻灯片演示系统。该系统能对已有PPT文件进行解析与转换，在演示过程中可以通过主控端控制多台从控端幻灯片的同步播放，支持师生间文字、语音和电子白板交互，为多媒体教学提供方便。实际测试与应用结果表明，该系统可以便捷完成多媒体幻灯片在多终端上的演示和交互，具有良好的跨平台和实时交互性，对当前多媒体教学具有指导性意义。

关键词：幻灯片演示；多媒体教学；跨平台；交互式系统； WebRTC；多终端；实时通信

中图分类号： TN919.82?34； TP393.09 文献标识码： A 文章编号： 1004?373X（2018）04?0018?05

Abstract： To meet the need of large?scale multimedia teaching and in allusion to the limitations of the traditional PowerPoint （PPT） slide show， an interactive slide show system based on B/S structure was designed and implemented. The system can analyze and converse the existing PPT files. During the presentation process， the synchronized play of slides from multiple slave control terminals can be controlled by the master terminal. The interaction of text， voice and electronic whiteboard between the teacher and students is supported to facilitate the multimedia teaching. The practical test and application results show that the system can conveniently complete the presentation and interaction of multimedia slides on multi?terminals， and has good performance in cross?platform and real?time interactivity， which is of instructive significance for the current multimedia teaching.

Keywords： slide show； multimedia teaching； cross?platform； interactive system； WebRTC； multi?terminal； real?time communication

0 引言

传统多媒体教学中，幻灯片作为一种师生之间知识传递的媒介，已经成为教学过程中不可或缺的一部分。教师通过这种图文并茂的方式向学生展示教学内容，取得良好的教学效果[1]。然而在大型教室或会议室进行幻灯片演示的过程中，传统幻灯片的演示存在两个缺陷：首先，坐在后排的学生可能无法看清幻灯片内容；其次，由于距离和人数的限制，大多数学生都无法及时有效地与教师进行教学互动，在一定程度上降低了教学质量。现有的一些基于移动互联网技术的在线幻灯片平台[2?4]可以解决第一个问题，其支持幻灯片的线上制作，支持幻灯片在客户端的浏览器播放，用户可以使用智能手机和平板电脑等移动设备观看幻灯片，在一定程度上满足了远距离观看幻灯片的需求，但并没有解决师生之间实时交互的问题。

基于此，本文利用POI，WebSocket和WebRTC等技术，设计并实现一种多终端交互式幻灯片演示系统。该系统可以解析和转换用户上传的PPT文件，支持幻灯片在任何配备了浏览器的终端设备上播放，实现了幻灯片在多终端的同步播放功能，并为教学双方提供了包括文字、语音和电子白板的实时交流环境。

1 相关技术

1.1 POI

POI[5]是Apache旗下Jakarta项目的一个子项目，为Java提供了操作Microsoft Office办公套件文件的API，即可以利用Java对Excel，Word和PowerPoint等文件进行内容读取、创建和修改等操作。POI包含了HSSF，HWPF和HSLF等模块，其中本文使用HSLF模块对用户上传的PPT文件进行解析和内容提取。

1.2 Socket.IO

Socket.IO[6]是一个基于JavaScript的WebSocket框架，实现了服务器与客户端之间基于事件的实时双向通信，可以运行在不同浏览器和移动设备上，并专注于可靠性与速度。

Socket.IO包括了客户端的JavaScript和服务器端的Node.js，通过引用官方提供的JavaScript库和Node.js即可使用相关API实现不同浏览器的相互通信。

1.3 WebRTC

网络实时通信（Web Real?Time Communication，WebRTC）可以通过浏览器实时获取和传输视频、音频和其他自定义数据[7]。WebRTC共分为三个API，分别是MediaStream（getUserMedia），RTCPeerConnection和RTCDataChannel。其中，getUserMedia主要用于获取视频和音频数据，RTCPeerConnection用于通信双方连接的建立与维护，而RTCDataChannel则是用于通信双方之间数据的传输与交换。本文利用getUserMedia和RTCPeerConnection实现了幻灯片演示过程中师生之间的语音交互功能。endprint

2 系统设计

2.1 系统结构

本系统层次結构如图1所示。系统从上至下分为 UI表示层、前端逻辑层、数据逻辑层和数据存储层。

UI表示层：由用户端浏览器组成，覆盖的设备包括智能手机、PC电脑和平板电脑等设备。系统基于B/S结构开发，已对手机、PC和平板多端适配优化，幻灯片的播放和交互等操作均基于浏览器完成，能自动适配多种终端屏幕。

前端逻辑层：由在线编辑模块和在线播放模块组成，主要负责幻灯片操作模块的前端逻辑，即编辑和播放模块的功能实现。其中编辑模块为PPT文件提供上传与解析的入口，并实现了对幻灯片线上编辑的功能；播放模块则负责对编辑好的幻灯片进行播放、控制与实时交互等操作。

数据逻辑层：由幻灯片解析、数据封装、数据存储和数据查询等模块组成，主要负责解析PPT文件内容，并对内容进行资源提取和数据封装，同时向上层模块提供数据查询的接口。

数据存储层：由云数据库、云存储和CDN组成，管理了整个系统的云端资源，对用户信息、幻灯片内容以及静态资源等数据进行存储，并向上层数据逻辑层提供数据管理的接口。

相对于现有的在线幻灯片平台，系统支持浏览器上的在线编辑，也支持对线下编辑好的PPT文件进行解析与转换，兼备了线上与线下编辑两种方式，并在幻灯片播放模块中加入了交互功能，方便师生之间的教学互动。

2.2 存储结构

演示文稿是以幻灯片为基本元素的页式结构，幻灯片按其创建的先后顺序存储在演示文稿中[8]。而每一页幻灯片又可由多种幻灯片组建，如文字、图片和自定义图形等，如何组织和存储这些数据，方便让多终端浏览器解析渲染是设计幻灯片在线播放模块时首要考虑的问题。

PPT文件需要转换格式后才能在浏览器端播放，转换为图片和XML[9]是目前比较常见的方法。对于第一种将幻灯片内容转化为图片的方式，最大的问题是丢失了结构化数据，不利于用户对幻灯片进行信息检索和线上编辑，并且转换后的图片质量也难以保障；第二种将幻灯片转换为XML的方式则保留了结构化数据，解决了图片转换方式带来的局限，但基于XML数据交换存在数据冗余性高和解析速率慢的问题，使得数据在网络传输中的速度较慢[10]。相比之下，本系统采用了更为轻量的JSON作为幻灯片的数据存储结构，在保留结构化数据的同时提高了幻灯片数据在多终端的传输速率。

图2展示了演示文稿与JSON存储结构的关系。图2a）是一份电子演示文稿文件，由两张不同的幻灯片组成，而每张幻灯片中都包含有不同的组件。图2b）为其对应的JSON结构化数据，其中最外层的对象P对应于图2a）中的演示文稿文件，P所包含的S_1和 S_2对象分别对应于图2a）中的第一张和第二张幻灯片，而最里层的E_1～ E_4对象则表示图2a）演示文稿中的各种幻灯片组件，包含了组件的显示与状态信息。

2.3 业务流程

幻灯片文件解析与播放过程如图3所示。用户在系统上完成个人信息注册并成功登录后，通过Slide?Editor模块上传本地已编辑好的PPT文件。Slide?Processor模块对PPT文件内容进行解析，将解析的内容重新封装为新的结构化数据，同时提取出幻灯片中图片和视频等资源，再由云数据库和云存储进行存储。系统完成PPT文件的解析后，解析效果将呈现到Slide?Editor的编辑面板中，用户可在此基础上继续修改和编辑，同时也可以直接创建一份新的演示文稿。当用户完成幻灯片的在线编辑时，Slide?Processor模块会再一次对幻灯片数据进行云端保存，最后通过Slide?Player模块将幻灯片呈现到手机、平板和PC等多终端浏览器中。

在幻灯片演示过程中，主控端会捕获用户对幻灯片操作的动作响应，如页面跳转和电子白板绘制，接着将该响应转化为数据信号经过中转服务器转发给所有播放该幻灯片的从控端，从控端在收到来自主控端的数据信号并成功解析后，将该信号还原成原来的动作响应，从而实现所有终端幻灯片同步播放的效果。与此同时，主从控端之间可以通过文字、电子白板和语音进行交互，其中文字和电子白板数据同样是通过中转服务器进行转发，而语音数据的传递则是点对点的通信过程，但通信双方之间连接的维护仍然需要通过引入信令服务器来完成。

3 核心功能实现

3.1 PPT解析

PPT文件解析的过程由POI的HSLF模块完成。文献[11]中提出了一个专用于PPT文件文本信息的对象模型，包含了多种操作对象。其中演示文稿对象Presentation、幻灯片对象Slide和图形对象Shape是PPT文件解析过程中的主要操作对象，在HSLF中对应的处理类分别是：HSLFSlideShow，HSLFShape和HSLFSlide。具体解析流程如图4所示。

在完成PPT文件解析后，系统会对提取出的幻灯片数据进行整合，封装到自定义的JavaBean对象中，最后利用谷歌的Gson库将JavaBean对象转化为JSON字符串，存储在云数据库中。

3.2 同步播放

幻灯片演示的客户端包括主控端和从控端，其中主控端拥有幻灯片演示的控制权。如图5所示，当主控设备在控制幻灯片页面跳转与电子白板绘制时，从控设备上的播放进度与绘图效果与主控端保持实时同步，实现多终端幻灯片的同步播放。这个过程由实现了WebSocket协议的Socket.IO完成，通过客户端的JavaScript和服务器端的Node.js配合实现。

当有用户进入幻灯片播放模式时，服务器端通过io.on（′connection′， function（socket）{ }）监听到有用户连接，并根据登录状态信息得到该用户的ID，接着将ID与该幻灯片创建者ID进行比对，如果两者相同则认为该用户为主控端，保存该socket对象，同时赋予其控制幻灯片的权限；如果用户ID获取失败或者与幻灯片创建者ID不同则默认为从控端。endprint

主控端在对幻灯片进行翻页或者白板绘制时，通过客户端Socket.IO全局对象提供的emit（）方法向Node.js服务器转发跳转的页码或者绘制的数据，服务器端收到信号并校验得知请求用户为主控端，随后取出保存好的主控端socket对象，再通过socket.broadcast.emit（）将该信号转发给所有正在观看此幻灯片的从控端。从控端在收到来自服务器的信号后经过解析，把该信号转化为相关的动作指令，从而实现与主控端内容一致的效果。

对于白板绘制（画板）功能，本模块使用了HTML5的

3.3 实时交互

在线播放模块支持主控端和从控端之间进行文字、电子白板和语音的交互，同时也为从控端之间提供文字交互功能，用户发送的文本信息将以弹幕形式呈现，如图6所示。从控端通过点击页面中相应的功能键可向主控端发送请求，在得到主控端的授权后，两者之间即可进行相关数据的传输，其中文字和白板数据对所有终端用户可见，用户也可以通过系统提供的开关按钮控制这些数据的呈现。

文字与电子白板的数据传输通过WebSocket技术实现，在3.2节中有提及。而主控端与从控端之间的语音交互过程则通过WebRTC技术实现。虽然语音流的数据通道是点对点的，但仍然需要引进中转服务器以传递WebRTC信令并建立传输通道。系统利用文字和白板交互的中转服务器为客户端传递WebRTC信令，同时使用谷歌开放的STUN服务器[12]作为ICE（The Internet Communications Engine）[13]服务器以实现点对点通信带来的防火墙穿越问题。从控端在发起语音请求并得到主控端授权允许后，开始建立RTCPeerConnection的连接，通过信令服务器将通信所需要的信息传递给对方。连接建立完毕后通信双方将getUserMedia API获取得到的语音流数据发给对方，实现双方之间的语音通信。

4 性能测试

为了验证幻灯片演示过程中的稳定性，测试之前系统已经部署至阿里云ECS服务器上，并搭配加速了CDN、七牛云存储和leancloud云数据库等云端服务。

本文通过Apache旗下基于Java的压力测试工具Jmeter[14]对系统的交互性能进行了测试。分别模拟了10，100，500和1 000个用户并发向服务器发送请求，结果如表1所示。其中：#Samples表示在测试过程中用户发出的总请求数；Average表示测试过程中用户请求的平均响应时长，以ms为单位；Error表示测试中出现的请求错误率；Throughput表示服务器每秒吞吐量。从测试的结果来看，当并发数在10～500时，随着并发请求的增加，没有出现请求错误的情况，且响应时间与吞吐率没有明显变化。而当并发请求达到1 000时，服务器的响应速度与吞吐量受到了一定影响，错误比率达到0.72%，此时的用户数已达到一定的规模，而错误率控制在一个可以接受的范围内。由实验结果可知系统对用户请求响应及时，具有良好的并发性与吞吐量，通过升级服务器端的配置，性能指数会得到进一步的优化提高。

5 结语

本系统为多媒体教学中的教师与学生提供了一个交互式幻灯片演示系统，学生可以通过手机和平板等终端设备查看幻灯片内容，并与教师进行实时的教学互动，有效解决了在大型教室或会议室演讲场景下内容展示与交互缺失的问题，对传统多媒体教学的幻灯片演示模式起到良好的补充作用。

但系统仍存在两点不足：由于目前移动端浏览器中仅有安卓系统支持WebRTC技术，意味着在移动端中只有安卓系统的设备才能使用语音交互功能，该问题只能依靠各大移动端浏览器厂商适配并解决；另一方面，当前语音只支持一对一而非一对多的数据传输，下一步工作为研究通过媒体服务器解决语音一对多传输的问题，从而让教师的声音可以同步到所有终端中，为大型的开放式多媒体教学提供可能性。

参考文献

[1] JABEEN N， GHANI A. Comparison of the traditional chalk and board lecture system versus PowerPoint presentation as a teaching technique for teaching gross anatomy to the first professional medical students [J]. Edinburgh working papers in applied linguistics， 2015， 4（11）： 1811?1817.

[2] Anon. Slides ? create and share presentations online [EB/OL]. [2016?11?25]. https：//slides.com/.

[3] Wikipedia. Google docs， sheets， and slides [EB/OL]. [2012?05?22]. https：//en.wikipedia.org/wiki/Google_Docs，_Sheets，_and_

Slides.

[4] Neurobehavioral Systems Inc. Presentation software， online presentation tools ? slidebean [EB/OL]. [2016?11?25]. http：//slidebean.com/.

[5] Apache Software Foundation. Apache POI ? the Java API for Microsoft documents [EB/OL]. [2016?11?25]. https：//poi.apache.org/.

[6] Anon. Socket.io [EB/OL]. [2016?11?25]. http：//socket.io/.

[7] BERGKVIST A， BURNETT D C， JENNINGS C， et al. W3C： WebRTC 1.0： real?time communication between browsers [EB/OL]. [2016?09?13]. http：//www.w3.org/TR/webrtc/.

[8] 高鸥.演示文稿内容结构呈现方法比较研究[J].软件导刊，2015（10）：68?69.

GAO Ou. Implementation methods and comparison of presentation content structure [J]. Software guide， 2015（10）： 68?69.

[9] 江辰，金曦，陈明，等.基于网络标准的幻灯片演示框架[J].计算机应用，2012（z2）：131?133.

JIANG Chen， JIN Xi， CHEN Ming， et al. Powerpoint presentation framework based on web standards [J]. Journal of computer applications， 2012（S2）： 131?133.

[10] 张沪寅，屈乾松，胡瑞芸.基于JSON的数据交换模型[J].计算机工程与设计，2015（12）：3380?3384.

ZHANG Huyin， QU Qiansong， HU Ruiyun. Data exchange model based on JSON [J]. Computer engineering and design， 2015（12）： 3380?3384.

[11] 江婷，赵呈领，谈国栋.PowerPoint课件文本信息提取研究[J].中国远程教育，2011（2）：69?72.

JIANG Ting， ZHAO Chengling， TAN Guodong. Research on text information extraction [J]. Distance education in China， 2011（2）： 69?72.

[12] ROSENBERG J. MAHY R， MATTHEWS P， et al. RFC 5389： session traversal utilities for NAT （STUN） [EB/OL]. [2011?01?30]. https：//wenku.baidu.com/view/bfc1938984868762

caaed5bf.html.

[13] ROSENBERG J. RFC 5245： interactive connectivity establishment （ICE） [EB/OL]. [2010?04?09]. https：//tools.ietf.org/html/rfc5245.

[14] Apache Software Foundation. Apache JmeterTM [EB/OL]. [2016?11?25]. http：//jmeter.apache.org.endprint