基于VNC和HTML5技術(shù)的遠(yuǎn)程教學(xué)直播系統(tǒng)設(shè)計(jì)

岳 峰

（中原工學(xué)院，鄭州450007）

基于VNC和HTML5技術(shù)的遠(yuǎn)程教學(xué)直播系統(tǒng)設(shè)計(jì)

岳 峰

（中原工學(xué)院，鄭州450007）

采用VNC和HTML5技術(shù)，構(gòu)建了遠(yuǎn)程教學(xué)直播系統(tǒng)．該系統(tǒng)可實(shí)現(xiàn)教師計(jì)算機(jī)屏幕內(nèi)容的直播，用戶可以使用支持HTML5標(biāo)準(zhǔn)的瀏覽器訪問(wèn)該系統(tǒng)網(wǎng)站而無(wú)需安裝任何插件．

VNC；HTML5；遠(yuǎn)程教學(xué)直播系統(tǒng)

目前的遠(yuǎn)程教學(xué)直播系統(tǒng)主要采用的是實(shí)時(shí)傳輸視頻數(shù)據(jù)的模式．該模式不僅對(duì)網(wǎng)絡(luò)帶寬占用較大，且學(xué)生在訪問(wèn)直播系統(tǒng)時(shí)，往往需要安裝相應(yīng)的程序或插件，較為繁瑣．當(dāng)用戶使用不允許安裝相應(yīng)程序或插件的終端瀏覽器時(shí)，直播的圖像往往無(wú)法正常顯示出來(lái)．這種情況在以iPad為代表的非Windows系統(tǒng)平板電腦和以Android系統(tǒng)為代表的智能手機(jī)終端上尤為突出．本文采用VNC和HTML5技術(shù)構(gòu)建了一個(gè)遠(yuǎn)程教學(xué)直播系統(tǒng)，用戶可以使用支持HTML5標(biāo)準(zhǔn)的瀏覽器進(jìn)行訪問(wèn)而無(wú)需安裝任何插件，拓寬了用戶使用終端類型的范圍，降低了操作的技術(shù)難度，保證了教學(xué)直播的效果．

1 VNC和HTML5技術(shù)

1．1 VNC技術(shù)

VNC（Virtual Network Computing）是一種開(kāi)源的、跨操作系統(tǒng)平臺(tái)的屏幕圖像分享及遠(yuǎn)程操作軟件［1］，其派生版本有Real VNC、Tight VNC和Ultra VNC等．VNC系統(tǒng)由客戶端、服務(wù)端和VNC協(xié)議組成．VNC服務(wù)端能夠分享其所運(yùn)行計(jì)算機(jī)的屏幕圖像；VNC客戶端可以察看服務(wù)端的屏幕圖像并與服務(wù)端交互；VNC協(xié)議負(fù)責(zé)在服務(wù)端和客戶端之間傳輸圖像數(shù)據(jù)和控制信息．

1．2 HTML5技術(shù)

HTML5作為下一代互聯(lián)網(wǎng)技術(shù)的新標(biāo)準(zhǔn)，目前仍處于完善之中，但主流的瀏覽器，包括微軟的Internet Explorer、Google的Chrome、蘋(píng)果的Safari等，都已經(jīng)開(kāi)始了對(duì)于 HTML5技術(shù)的支持［2］．廣義的HTML5指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合，它減少了瀏覽器對(duì)于插件的依賴，添加了新的語(yǔ)法特征如＜video＞、＜audio＞和＜canvas＞元素，集成了SVG內(nèi)容，使程序員在網(wǎng)頁(yè)中處理多媒體內(nèi)容時(shí)更加容易．

2 遠(yuǎn)程教學(xué)直播系統(tǒng)的實(shí)現(xiàn)

通常在使用VNC技術(shù)時(shí)，需要在用戶端安裝VNC客戶端程序或插件；用戶端通過(guò)VNC協(xié)議直接連接到安裝有VNC服務(wù)端的計(jì)算機(jī)．這樣做不僅使雙方的操作都比較繁瑣，還暴露了VNC服務(wù)端的計(jì)算機(jī)IP地址，可能造成潛在的安全隱患．本遠(yuǎn)程教學(xué)直播系統(tǒng)在設(shè)計(jì)上避免了這種直接連接的方式．

2．1 系統(tǒng)架構(gòu)

本遠(yuǎn)程教學(xué)直播系統(tǒng)使用Apache Tomcat作為Web服務(wù)器和Java應(yīng)用服務(wù)器，使用MySQL數(shù)據(jù)庫(kù)存儲(chǔ)用戶數(shù)據(jù)等資料信息，使用J2EE技術(shù)開(kāi)發(fā)了Web應(yīng)用程序和組件，實(shí)現(xiàn)了VNC－to－XML的轉(zhuǎn)換，使用戶不用安裝任何插件，就可以直接使用瀏覽器訪問(wèn)安裝有VNC服務(wù)端的教師機(jī)［3－4］．圖1所示為系統(tǒng)架構(gòu)．

2．2 系統(tǒng)實(shí)現(xiàn)

在本系統(tǒng)中，使用Guacamole組件作為VNC客戶端，部署在 Web服務(wù)器上．Guacamole是使用Java語(yǔ)言開(kāi)發(fā)的基于HTML5的Web應(yīng)用組件，可實(shí)現(xiàn)熱部署．教師機(jī)需安裝VNC服務(wù)端，并在 Web服務(wù)器上發(fā)布直播信息，包含直播時(shí)間、內(nèi)容、教師機(jī)IP地址等．Web服務(wù)器以Guacamole組件樣本為模板，創(chuàng)建一個(gè)新的實(shí)例，按照教師機(jī)提交的直播信息自動(dòng)建立定時(shí)任務(wù)，在指定時(shí)間將配置好的實(shí)例部署到Java應(yīng)用服務(wù)器之中．其中部分關(guān)鍵代碼如下：

熱部署操作完成后，該直播實(shí)例自動(dòng)開(kāi)始運(yùn)行，用戶在瀏覽器中點(diǎn)擊該實(shí)例的鏈接即可進(jìn)入直播界面．由于用戶終端連接的是Web服務(wù)器的IP地址，從而隱藏了教師機(jī)的IP地址，既增強(qiáng)了教師機(jī)的安全性，又方便了用戶端操作．

本系統(tǒng)直播界面的頁(yè)面設(shè)計(jì)中使用到了＜canvas＞元素來(lái)顯示實(shí)時(shí)直播的圖像信息．＜canvas＞是在HTML5標(biāo)準(zhǔn)草案中新引入的元素，主要用于定義圖形．＜canvas＞元素可以使用JavaScript腳本語(yǔ)言在網(wǎng)頁(yè)上繪制圖形、圖像或動(dòng)畫(huà)，用戶計(jì)算機(jī)的瀏覽器不需要安裝Flash等第三方插件．在本系統(tǒng)中，主要使用了JavaScript腳本對(duì)頁(yè)面中的＜canvas＞元素進(jìn)行定義及操作［5］．其中部分關(guān)鍵代碼如下：

從教師機(jī)VNC服務(wù)端傳回Web服務(wù)器的VNC數(shù)據(jù)，經(jīng)過(guò)Guacamole組件的處理，轉(zhuǎn)化為XML格式的數(shù)據(jù)，最終由＜canvas＞元素和JavaScript腳本在用戶端的瀏覽器上顯示出來(lái)．

3 結(jié) 語(yǔ)

本文采用VNC和HTML5技術(shù)，構(gòu)建了一個(gè)遠(yuǎn)程教學(xué)直播系統(tǒng)．該系統(tǒng)無(wú)需用戶終端的瀏覽器安裝任何插件，可實(shí)現(xiàn)教師計(jì)算機(jī)屏幕內(nèi)容的直播；用戶終端可以是計(jì)算機(jī)、平板電腦、智能手機(jī)等，只需支持HTML5即可．在HTML5標(biāo)準(zhǔn)逐漸走向成熟，大有取代當(dāng)前主流的FLASH解決方案的大背景下，該遠(yuǎn)程教學(xué)直播系統(tǒng)的設(shè)計(jì)方案具有一定的現(xiàn)實(shí)意義和前瞻性．

［1］程行榮，陳新．基于VNC和P2P技術(shù)的實(shí)時(shí)課堂直播系統(tǒng)［J］．計(jì)算機(jī)時(shí)代，2007（20）：75－78．

［2］劉華星，楊庚．HTML5——下一代 Web開(kāi)發(fā)標(biāo)準(zhǔn)研究［J］．計(jì)算機(jī)技術(shù)與發(fā)展，2011，21（8）：54－58．

［3］劉奎恩，王青．一種基于VNC的智能應(yīng)用服務(wù)系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)［J］．計(jì)算機(jī)工程與應(yīng)用，2004（9）：131－134．

［4］盧小林．基于虛擬網(wǎng)絡(luò)計(jì)算的網(wǎng)管系統(tǒng)集成的設(shè)計(jì)與實(shí)現(xiàn)［J］．計(jì)算機(jī)工程，2007，33（3）：82－84．

［5］祁立君，李錄平．AJAX結(jié)合VML在基于B／S模式的實(shí)時(shí)監(jiān)測(cè)系統(tǒng)中的應(yīng)用［J］．微計(jì)算機(jī)信息，2007（27）：258－260．

Design of Distance Teaching Live Broadcast System Based on VNC and HTML5 Technology

YUE Feng
（Zhongyuan University of Technology，Zhengzhou 450007，China）

With VNC and HTML5 technologies，a distance teaching live broadcast system is built，a live broadcast about teacher’s computer screen content can be achieved；without any plug－ins，users can use any HTML5－capable browser to visit the website．

VNC；HTML5；distance teaching live broadcast system

TP393

A

10．3969／j．issn．1671－6906．2012．01．008

1671－6906（2012）01－0033－03

2012－01－20

河南省教育信息化及網(wǎng)絡(luò)軟件應(yīng)用研究與開(kāi)發(fā)項(xiàng)目（豫教科外【2002】146號(hào)）

岳 峰（1975－），男，河南林州人，實(shí)驗(yàn)師，碩士．