基于B/S結構的多終端交互式幻燈片演示系統

2018-03-07 00:43:51曾柏羲宋鴻陟司國東

現代電子技術 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]。然而在大型教室或會議室進行幻燈片演示的過程中，傳統幻燈片的演示存在兩個缺陷：首先，坐在后排的學生可能無法看清幻燈片內容；其次，由于距離和人數的限制，大多數學生都無法及時有效地與教師進行教學互動，在一定程度上降低了教學質量?，F有的一些基于移動互聯網技術的在線幻燈片平臺[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