基于B/S結(jié)構(gòu)的多終端交互式幻燈片演示系統(tǒng)

曾柏羲+宋鴻陟+司國東

摘 要： 為了滿足大型多媒體教學(xué)的需求，針對傳統(tǒng)PPT幻燈片演示的局限性，設(shè)計并實現(xiàn)一種基于B/S結(jié)構(gòu)的交互式幻燈片演示系統(tǒng)。該系統(tǒng)能對已有PPT文件進行解析與轉(zhuǎn)換，在演示過程中可以通過主控端控制多臺從控端幻燈片的同步播放，支持師生間文字、語音和電子白板交互，為多媒體教學(xué)提供方便。實際測試與應(yīng)用結(jié)果表明，該系統(tǒng)可以便捷完成多媒體幻燈片在多終端上的演示和交互，具有良好的跨平臺和實時交互性，對當前多媒體教學(xué)具有指導(dǎo)性意義。

關(guān)鍵詞： 幻燈片演示； 多媒體教學(xué)； 跨平臺； 交互式系統(tǒng)； 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 引 言

傳統(tǒng)多媒體教學(xué)中，幻燈片作為一種師生之間知識傳遞的媒介，已經(jīng)成為教學(xué)過程中不可或缺的一部分。教師通過這種圖文并茂的方式向?qū)W生展示教學(xué)內(nèi)容，取得良好的教學(xué)效果[1]。然而在大型教室或會議室進行幻燈片演示的過程中，傳統(tǒng)幻燈片的演示存在兩個缺陷：首先，坐在后排的學(xué)生可能無法看清幻燈片內(nèi)容；其次，由于距離和人數(shù)的限制，大多數(shù)學(xué)生都無法及時有效地與教師進行教學(xué)互動，在一定程度上降低了教學(xué)質(zhì)量。現(xiàn)有的一些基于移動互聯(lián)網(wǎng)技術(shù)的在線幻燈片平臺[2?4]可以解決第一個問題，其支持幻燈片的線上制作，支持幻燈片在客戶端的瀏覽器播放，用戶可以使用智能手機和平板電腦等移動設(shè)備觀看幻燈片，在一定程度上滿足了遠距離觀看幻燈片的需求，但并沒有解決師生之間實時交互的問題。

基于此，本文利用POI，WebSocket和WebRTC等技術(shù)，設(shè)計并實現(xiàn)一種多終端交互式幻燈片演示系統(tǒng)。該系統(tǒng)可以解析和轉(zhuǎn)換用戶上傳的PPT文件，支持幻燈片在任何配備了瀏覽器的終端設(shè)備上播放，實現(xiàn)了幻燈片在多終端的同步播放功能，并為教學(xué)雙方提供了包括文字、語音和電子白板的實時交流環(huán)境。

1 相關(guān)技術(shù)

1.1 POI

POI[5]是Apache旗下Jakarta項目的一個子項目，為Java提供了操作Microsoft Office辦公套件文件的API，即可以利用Java對Excel，Word和PowerPoint等文件進行內(nèi)容讀取、創(chuàng)建和修改等操作。POI包含了HSSF，HWPF和HSLF等模塊，其中本文使用HSLF模塊對用戶上傳的PPT文件進行解析和內(nèi)容提取。

1.2 Socket.IO

Socket.IO[6]是一個基于JavaScript的WebSocket框架，實現(xiàn)了服務(wù)器與客戶端之間基于事件的實時雙向通信，可以運行在不同瀏覽器和移動設(shè)備上，并專注于可靠性與速度。

Socket.IO包括了客戶端的JavaScript和服務(wù)器端的Node.js，通過引用官方提供的JavaScript庫和Node.js即可使用相關(guān)API實現(xiàn)不同瀏覽器的相互通信。

1.3 WebRTC

網(wǎng)絡(luò)實時通信（Web Real?Time Communication，WebRTC）可以通過瀏覽器實時獲取和傳輸視頻、音頻和其他自定義數(shù)據(jù)[7]。WebRTC共分為三個API，分別是MediaStream（getUserMedia），RTCPeerConnection和RTCDataChannel。其中，getUserMedia主要用于獲取視頻和音頻數(shù)據(jù)，RTCPeerConnection用于通信雙方連接的建立與維護，而RTCDataChannel則是用于通信雙方之間數(shù)據(jù)的傳輸與交換。本文利用getUserMedia和RTCPeerConnection實現(xiàn)了幻燈片演示過程中師生之間的語音交互功能。endprint

2 系統(tǒng)設(shè)計

2.1 系統(tǒng)結(jié)構(gòu)

本系統(tǒng)層次結(jié)構(gòu)如圖1所示。系統(tǒng)從上至下分為 UI表示層、前端邏輯層、數(shù)據(jù)邏輯層和數(shù)據(jù)存儲層。

UI表示層：由用戶端瀏覽器組成，覆蓋的設(shè)備包括智能手機、PC電腦和平板電腦等設(shè)備。系統(tǒng)基于B/S結(jié)構(gòu)開發(fā)，已對手機、PC和平板多端適配優(yōu)化，幻燈片的播放和交互等操作均基于瀏覽器完成，能自動適配多種終端屏幕。

前端邏輯層：由在線編輯模塊和在線播放模塊組成，主要負責(zé)幻燈片操作模塊的前端邏輯，即編輯和播放模塊的功能實現(xiàn)。其中編輯模塊為PPT文件提供上傳與解析的入口，并實現(xiàn)了對幻燈片線上編輯的功能；播放模塊則負責(zé)對編輯好的幻燈片進行播放、控制與實時交互等操作。

數(shù)據(jù)邏輯層：由幻燈片解析、數(shù)據(jù)封裝、數(shù)據(jù)存儲和數(shù)據(jù)查詢等模塊組成，主要負責(zé)解析PPT文件內(nèi)容，并對內(nèi)容進行資源提取和數(shù)據(jù)封裝，同時向上層模塊提供數(shù)據(jù)查詢的接口。

數(shù)據(jù)存儲層：由云數(shù)據(jù)庫、云存儲和CDN組成，管理了整個系統(tǒng)的云端資源，對用戶信息、幻燈片內(nèi)容以及靜態(tài)資源等數(shù)據(jù)進行存儲，并向上層數(shù)據(jù)邏輯層提供數(shù)據(jù)管理的接口。

相對于現(xiàn)有的在線幻燈片平臺，系統(tǒng)支持瀏覽器上的在線編輯，也支持對線下編輯好的PPT文件進行解析與轉(zhuǎn)換，兼?zhèn)淞司€上與線下編輯兩種方式，并在幻燈片播放模塊中加入了交互功能，方便師生之間的教學(xué)互動。

2.2 存儲結(jié)構(gòu)

演示文稿是以幻燈片為基本元素的頁式結(jié)構(gòu)，幻燈片按其創(chuàng)建的先后順序存儲在演示文稿中[8]。而每一頁幻燈片又可由多種幻燈片組建，如文字、圖片和自定義圖形等，如何組織和存儲這些數(shù)據(jù)，方便讓多終端瀏覽器解析渲染是設(shè)計幻燈片在線播放模塊時首要考慮的問題。

PPT文件需要轉(zhuǎn)換格式后才能在瀏覽器端播放，轉(zhuǎn)換為圖片和XML[9]是目前比較常見的方法。對于第一種將幻燈片內(nèi)容轉(zhuǎn)化為圖片的方式，最大的問題是丟失了結(jié)構(gòu)化數(shù)據(jù)，不利于用戶對幻燈片進行信息檢索和線上編輯，并且轉(zhuǎn)換后的圖片質(zhì)量也難以保障；第二種將幻燈片轉(zhuǎn)換為XML的方式則保留了結(jié)構(gòu)化數(shù)據(jù)，解決了圖片轉(zhuǎn)換方式帶來的局限，但基于XML數(shù)據(jù)交換存在數(shù)據(jù)冗余性高和解析速率慢的問題，使得數(shù)據(jù)在網(wǎng)絡(luò)傳輸中的速度較慢[10]。相比之下，本系統(tǒng)采用了更為輕量的JSON作為幻燈片的數(shù)據(jù)存儲結(jié)構(gòu)，在保留結(jié)構(gòu)化數(shù)據(jù)的同時提高了幻燈片數(shù)據(jù)在多終端的傳輸速率。

圖2展示了演示文稿與JSON存儲結(jié)構(gòu)的關(guān)系。圖2a）是一份電子演示文稿文件，由兩張不同的幻燈片組成，而每張幻燈片中都包含有不同的組件。圖2b）為其對應(yīng)的JSON結(jié)構(gòu)化數(shù)據(jù)，其中最外層的對象P對應(yīng)于圖2a）中的演示文稿文件，P所包含的S_1和 S_2對象分別對應(yīng)于圖2a）中的第一張和第二張幻燈片，而最里層的E_1～ E_4對象則表示圖2a）演示文稿中的各種幻燈片組件，包含了組件的顯示與狀態(tài)信息。

2.3 業(yè)務(wù)流程

幻燈片文件解析與播放過程如圖3所示。用戶在系統(tǒng)上完成個人信息注冊并成功登錄后，通過Slide?Editor模塊上傳本地已編輯好的PPT文件。Slide?Processor模塊對PPT文件內(nèi)容進行解析，將解析的內(nèi)容重新封裝為新的結(jié)構(gòu)化數(shù)據(jù)，同時提取出幻燈片中圖片和視頻等資源，再由云數(shù)據(jù)庫和云存儲進行存儲。系統(tǒng)完成PPT文件的解析后，解析效果將呈現(xiàn)到Slide?Editor的編輯面板中，用戶可在此基礎(chǔ)上繼續(xù)修改和編輯，同時也可以直接創(chuàng)建一份新的演示文稿。當用戶完成幻燈片的在線編輯時，Slide?Processor模塊會再一次對幻燈片數(shù)據(jù)進行云端保存，最后通過Slide?Player模塊將幻燈片呈現(xiàn)到手機、平板和PC等多終端瀏覽器中。

在幻燈片演示過程中，主控端會捕獲用戶對幻燈片操作的動作響應(yīng)，如頁面跳轉(zhuǎn)和電子白板繪制，接著將該響應(yīng)轉(zhuǎn)化為數(shù)據(jù)信號經(jīng)過中轉(zhuǎn)服務(wù)器轉(zhuǎn)發(fā)給所有播放該幻燈片的從控端，從控端在收到來自主控端的數(shù)據(jù)信號并成功解析后，將該信號還原成原來的動作響應(yīng)，從而實現(xiàn)所有終端幻燈片同步播放的效果。與此同時，主從控端之間可以通過文字、電子白板和語音進行交互，其中文字和電子白板數(shù)據(jù)同樣是通過中轉(zhuǎn)服務(wù)器進行轉(zhuǎn)發(fā)，而語音數(shù)據(jù)的傳遞則是點對點的通信過程，但通信雙方之間連接的維護仍然需要通過引入信令服務(wù)器來完成。

3 核心功能實現(xiàn)

3.1 PPT解析

PPT文件解析的過程由POI的HSLF模塊完成。文獻[11]中提出了一個專用于PPT文件文本信息的對象模型，包含了多種操作對象。其中演示文稿對象Presentation、幻燈片對象Slide和圖形對象Shape是PPT文件解析過程中的主要操作對象，在HSLF中對應(yīng)的處理類分別是：HSLFSlideShow，HSLFShape和HSLFSlide。具體解析流程如圖4所示。

在完成PPT文件解析后，系統(tǒng)會對提取出的幻燈片數(shù)據(jù)進行整合，封裝到自定義的JavaBean對象中，最后利用谷歌的Gson庫將JavaBean對象轉(zhuǎn)化為JSON字符串，存儲在云數(shù)據(jù)庫中。

3.2 同步播放

幻燈片演示的客戶端包括主控端和從控端，其中主控端擁有幻燈片演示的控制權(quán)。如圖5所示，當主控設(shè)備在控制幻燈片頁面跳轉(zhuǎn)與電子白板繪制時，從控設(shè)備上的播放進度與繪圖效果與主控端保持實時同步，實現(xiàn)多終端幻燈片的同步播放。這個過程由實現(xiàn)了WebSocket協(xié)議的Socket.IO完成，通過客戶端的JavaScript和服務(wù)器端的Node.js配合實現(xiàn)。

當有用戶進入幻燈片播放模式時，服務(wù)器端通過io.on（′connection′， function（socket）{ }）監(jiān)聽到有用戶連接，并根據(jù)登錄狀態(tài)信息得到該用戶的ID，接著將ID與該幻燈片創(chuàng)建者ID進行比對，如果兩者相同則認為該用戶為主控端，保存該socket對象，同時賦予其控制幻燈片的權(quán)限；如果用戶ID獲取失敗或者與幻燈片創(chuàng)建者ID不同則默認為從控端。endprint

主控端在對幻燈片進行翻頁或者白板繪制時，通過客戶端Socket.IO全局對象提供的emit（）方法向Node.js服務(wù)器轉(zhuǎn)發(fā)跳轉(zhuǎn)的頁碼或者繪制的數(shù)據(jù)，服務(wù)器端收到信號并校驗得知請求用戶為主控端，隨后取出保存好的主控端socket對象，再通過socket.broadcast.emit（）將該信號轉(zhuǎn)發(fā)給所有正在觀看此幻燈片的從控端。從控端在收到來自服務(wù)器的信號后經(jīng)過解析，把該信號轉(zhuǎn)化為相關(guān)的動作指令，從而實現(xiàn)與主控端內(nèi)容一致的效果。

對于白板繪制（畫板）功能，本模塊使用了HTML5的標簽實現(xiàn)，當用戶使用畫板功能時，系統(tǒng)會在當前幻燈片創(chuàng)建一個畫板節(jié)點，結(jié)合HTML5的繪制API和JavaScript的鼠標、觸屏事件實現(xiàn)網(wǎng)頁端的白板繪制。這種繪圖方式最大的優(yōu)點是在轉(zhuǎn)發(fā)繪圖數(shù)據(jù)時只需要發(fā)送筆畫的增量數(shù)據(jù)而非傳統(tǒng)的圖片數(shù)據(jù)，意味著每次只需要傳遞用戶新畫的數(shù)據(jù)即可實現(xiàn)多終端繪制效果的同步，降低了帶寬的占有率。

3.3 實時交互

在線播放模塊支持主控端和從控端之間進行文字、電子白板和語音的交互，同時也為從控端之間提供文字交互功能，用戶發(fā)送的文本信息將以彈幕形式呈現(xiàn)，如圖6所示。從控端通過點擊頁面中相應(yīng)的功能鍵可向主控端發(fā)送請求，在得到主控端的授權(quán)后，兩者之間即可進行相關(guān)數(shù)據(jù)的傳輸，其中文字和白板數(shù)據(jù)對所有終端用戶可見，用戶也可以通過系統(tǒng)提供的開關(guān)按鈕控制這些數(shù)據(jù)的呈現(xiàn)。

文字與電子白板的數(shù)據(jù)傳輸通過WebSocket技術(shù)實現(xiàn)，在3.2節(jié)中有提及。而主控端與從控端之間的語音交互過程則通過WebRTC技術(shù)實現(xiàn)。雖然語音流的數(shù)據(jù)通道是點對點的，但仍然需要引進中轉(zhuǎn)服務(wù)器以傳遞WebRTC信令并建立傳輸通道。系統(tǒng)利用文字和白板交互的中轉(zhuǎn)服務(wù)器為客戶端傳遞WebRTC信令，同時使用谷歌開放的STUN服務(wù)器[12]作為ICE（The Internet Communications Engine）[13]服務(wù)器以實現(xiàn)點對點通信帶來的防火墻穿越問題。從控端在發(fā)起語音請求并得到主控端授權(quán)允許后，開始建立RTCPeerConnection的連接，通過信令服務(wù)器將通信所需要的信息傳遞給對方。連接建立完畢后通信雙方將getUserMedia API獲取得到的語音流數(shù)據(jù)發(fā)給對方，實現(xiàn)雙方之間的語音通信。

4 性能測試

為了驗證幻燈片演示過程中的穩(wěn)定性，測試之前系統(tǒng)已經(jīng)部署至阿里云ECS服務(wù)器上，并搭配加速了CDN、七牛云存儲和leancloud云數(shù)據(jù)庫等云端服務(wù)。

本文通過Apache旗下基于Java的壓力測試工具Jmeter[14]對系統(tǒng)的交互性能進行了測試。分別模擬了10，100，500和1 000個用戶并發(fā)向服務(wù)器發(fā)送請求，結(jié)果如表1所示。其中：#Samples表示在測試過程中用戶發(fā)出的總請求數(shù)；Average表示測試過程中用戶請求的平均響應(yīng)時長，以ms為單位；Error表示測試中出現(xiàn)的請求錯誤率；Throughput表示服務(wù)器每秒吞吐量。從測試的結(jié)果來看，當并發(fā)數(shù)在10～500時，隨著并發(fā)請求的增加，沒有出現(xiàn)請求錯誤的情況，且響應(yīng)時間與吞吐率沒有明顯變化。而當并發(fā)請求達到1 000時，服務(wù)器的響應(yīng)速度與吞吐量受到了一定影響，錯誤比率達到0.72%，此時的用戶數(shù)已達到一定的規(guī)模，而錯誤率控制在一個可以接受的范圍內(nèi)。由實驗結(jié)果可知系統(tǒng)對用戶請求響應(yīng)及時，具有良好的并發(fā)性與吞吐量，通過升級服務(wù)器端的配置，性能指數(shù)會得到進一步的優(yōu)化提高。

5 結(jié) 語

本系統(tǒng)為多媒體教學(xué)中的教師與學(xué)生提供了一個交互式幻燈片演示系統(tǒng)，學(xué)生可以通過手機和平板等終端設(shè)備查看幻燈片內(nèi)容，并與教師進行實時的教學(xué)互動，有效解決了在大型教室或會議室演講場景下內(nèi)容展示與交互缺失的問題，對傳統(tǒng)多媒體教學(xué)的幻燈片演示模式起到良好的補充作用。

但系統(tǒng)仍存在兩點不足：由于目前移動端瀏覽器中僅有安卓系統(tǒng)支持WebRTC技術(shù)，意味著在移動端中只有安卓系統(tǒng)的設(shè)備才能使用語音交互功能，該問題只能依靠各大移動端瀏覽器廠商適配并解決；另一方面，當前語音只支持一對一而非一對多的數(shù)據(jù)傳輸，下一步工作為研究通過媒體服務(wù)器解決語音一對多傳輸?shù)膯栴}，從而讓教師的聲音可以同步到所有終端中，為大型的開放式多媒體教學(xué)提供可能性。

參考文獻

[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] 高鷗.演示文稿內(nèi)容結(jié)構(gòu)呈現(xiàn)方法比較研究[J].軟件導(dǎo)刊，2015（10）：68?69.

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

[9] 江辰，金曦，陳明，等.基于網(wǎng)絡(luò)標準的幻燈片演示框架[J].計算機應(yīng)用，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的數(shù)據(jù)交換模型[J].計算機工程與設(shè)計，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] 江婷，趙呈領(lǐng)，談國棟.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