1、一種基于 html5 技術(shù)的在線教育系統(tǒng)張一凡，劉紹華*（北京郵電大學(xué)電子工程學(xué)院，北京 100876）510152025303540摘要：隨著科學(xué)技術(shù)生產(chǎn)力的發(fā)展和人們對工作生活需求的提高，互聯(lián)網(wǎng)和多媒體技術(shù)得到了極大的關(guān)注和應(yīng)用。傳統(tǒng)行業(yè)不斷地被新技術(shù)新模式更新升級：淘寶和京東的出現(xiàn)極大滿足消費(fèi)者長尾的購物需求，qq 和微信的出現(xiàn)改變了效率較慢的書信溝通方式。但是在傳統(tǒng)教育行業(yè)依然存在很多問題，比如教育資源分布不均，教學(xué)實(shí)施受時間地點(diǎn)的影響較大等，這些問題目前還沒有得到有效地解決。從解決這些問題的角度出發(fā)，本文提出了一種使用 html5 新技術(shù)實(shí)現(xiàn)的在線教育系統(tǒng)，具體技術(shù)上通過 webso

2、cket 建立效率更好的web 雙向通信，通過 webrtc 實(shí)現(xiàn)跨平臺的視頻語音溝通，通過 node.js 完成穩(wěn)定的后臺服務(wù)，最終實(shí)現(xiàn)不受時間地點(diǎn)限制的多功能在線教育系統(tǒng)。關(guān)鍵詞：在線教育；html5；webrtc；websocket；canvas中圖分類號：tp37an online education system based on html5 technologyzhang yifan, liu shaohua(school of electronic engineering, beijing university of posts and telecommunications, b

3、eijing100876)abstract: with the development of the modern technology and the demand of peoples workingand lives, the internet and multimedia technology has got great development and application.traditional industries have been updated with new technology upgrade, the emergence of taobaoand jingdong

4、greatly meet the demand of consumers shopping, and the emergence of qq andwechat changed peoples inefficient communication habit. however, in the traditional educationindustry, there are still many problems such as the distribution of education resources, the limit oftime and site. this paper presen

5、ts a new online education system based on html5 technology,build one more efficient two-way communication channel through web-socket, and realize thecross-platform video and voice communication channels, build a more stable backend throughnode.js.key words: online education; html5; webrtc; websocket

6、; canvas0 引言隨著互聯(lián)網(wǎng)技術(shù)、網(wǎng)絡(luò)傳輸技術(shù)的發(fā)展，多媒體通信正越來越多地應(yīng)用到生活的方方面面，朝著智能化、個性化的方向全面發(fā)展。目前在監(jiān)控、醫(yī)療、娛樂等領(lǐng)域都已得到了廣泛應(yīng)用。但在教育行業(yè)，多媒體的應(yīng)用還只是簡單的網(wǎng)頁播放，網(wǎng)絡(luò)教育并沒有深度整合用戶的需求。本文提出的基于 htm5 新技術(shù)的在線教育系統(tǒng)旨在建立一個更方便、更快捷、更公平的教育平臺，彌補(bǔ)傳統(tǒng)教育領(lǐng)域的缺陷和優(yōu)化現(xiàn)有遠(yuǎn)程教育的不足。傳統(tǒng)的教育行業(yè)里，存在著全國教育資源分布不平均不公平的問題，優(yōu)秀的教育資源主要集中分布在經(jīng)濟(jì)富饒的一線城市地區(qū)，而三四線等偏遠(yuǎn)地區(qū)的學(xué)生卻享受不了這些資源。現(xiàn)在互聯(lián)網(wǎng)技術(shù)的發(fā)展正好可應(yīng)用到教育

7、行業(yè)中。為彌補(bǔ)傳統(tǒng)教育存在的不足，本文通過模式創(chuàng)新，在教學(xué)途徑和產(chǎn)品方面，提出基于 html5 新技術(shù)的在線教育系統(tǒng)，一個跨地緣的平臺，可使偏遠(yuǎn)地區(qū)的學(xué)生也能享受到優(yōu)秀的教育資源，如果可以解決這一教育問題，對促進(jìn)社會公平公正也會有很作者簡介：張一凡（1990），男，碩士研究生，主要研究方向：多媒體通信，計算機(jī)網(wǎng)絡(luò)通信聯(lián)系人：劉紹華（1976-），男，副教授，主要研究方向：云計算，物聯(lián)網(wǎng)，移動互聯(lián)網(wǎng). liushaohua-1-大幫助。雖然在線遠(yuǎn)程教育已存在多年，但這些模式只注重知識方面的傳授，例如大學(xué)遠(yuǎn)程4550556065707580在線課程是在網(wǎng)頁上播放已經(jīng)錄好的視頻，而完全忽略掉了教育中

8、最重要的互動環(huán)節(jié)。本課題研究的一個重點(diǎn)就是如何把在教學(xué)中面對面的互動環(huán)節(jié)很好地融合進(jìn)在線教育系統(tǒng)中。另外，現(xiàn)在移動端的發(fā)展遠(yuǎn)遠(yuǎn)超過了 pc 端設(shè)備，人們也習(xí)慣在移動端工作和學(xué)習(xí)。移動端和 pc 端的需求同時存在，但是移動系統(tǒng)和 pc 端系統(tǒng)的底層結(jié)構(gòu)是不同的，傳統(tǒng)的項(xiàng)目開發(fā)是需要在兩種系統(tǒng)都有投入，這樣對一個系統(tǒng)的開發(fā)成本、人工成本、后期維護(hù)成本消耗都是很大的。而基于 html5 新技術(shù)的在線教育系統(tǒng)可以通過瀏覽器實(shí)現(xiàn)跨平臺的產(chǎn)品，即忽略底層的操作系統(tǒng)，只需一次開發(fā)，就能在多平臺使用，后期維護(hù)相對容易1。基于對傳統(tǒng)教育現(xiàn)狀和遠(yuǎn)程在線教育問題做出的詳細(xì)調(diào)研，論文提出和實(shí)現(xiàn)了一種較為完整的在線教育

9、系統(tǒng)。在線教育系統(tǒng)主要工作包括通過使用 html5 新標(biāo)準(zhǔn)中的 websocket搭建雙向可靠的數(shù)據(jù)通信信道，webrtc 完成關(guān)鍵的音視頻交流，基于 canvas 建立同步畫板等。論文在產(chǎn)品功能和交互上設(shè)計了多功能教室和自定義控制教室，以滿足不同需求的教學(xué)實(shí)踐。論文章節(jié)安排如下：第一章：基于 html5 的多媒體通信技術(shù)原理。介紹和講解本論文完成在線教育系統(tǒng)所用到的幾項(xiàng) html5 新技術(shù)：websocket、webrtc、canvas 等以及在服務(wù)器端使用的 node.js技術(shù)。第二章：需求分析和系統(tǒng)構(gòu)架。詳細(xì)陳述和分析了在線教育系統(tǒng)的功能需求，以及在線教育系統(tǒng)的整體構(gòu)架設(shè)計。第三章：主要

10、模塊設(shè)計。闡述了在線教育系統(tǒng)的各個功能模塊之間的關(guān)系和每個模塊的設(shè)計實(shí)現(xiàn)。第四章：系統(tǒng)實(shí)現(xiàn)和數(shù)據(jù)驗(yàn)證。詳細(xì)說明了本課題在技術(shù)上是如何實(shí)現(xiàn)整個系統(tǒng)，并在數(shù)據(jù)傳輸時延和系統(tǒng)負(fù)載性能等方面做出了數(shù)據(jù)驗(yàn)證。第五章：總結(jié)和展望。對論文主要工作做了總結(jié)，指出了本論文的創(chuàng)新點(diǎn)和存在的問題，并提出了設(shè)想和展望。1 基于 html5 的多媒體通信技術(shù)原理1.1 html5 技術(shù)特點(diǎn)html5 是用于取代 1999 年所制定的 html 4.01 和 xhtml 1.0 標(biāo)準(zhǔn)的 html（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）標(biāo)準(zhǔn)版本；現(xiàn)在仍處于發(fā)展階段，但大部分瀏覽器已經(jīng)支持html5 技術(shù)，基于 html5 技術(shù)的應(yīng)

11、用也越來越多2。html 5 有兩大特點(diǎn)：首先，強(qiáng)化了 web 網(wǎng)頁的表現(xiàn)性能。這是由于 htm5 增加了一些內(nèi)容表現(xiàn)標(biāo)簽，例如可以直接播放視頻的標(biāo)簽，導(dǎo)航標(biāo)簽。以及 html5 新標(biāo)準(zhǔn)中的 canvas，也是本論文用到一個重要標(biāo)準(zhǔn)，其可以使圖像腳本更加靈活。其次，開放更多 api，追加了本地數(shù)據(jù)庫等 web 應(yīng)用的功能。html5 的這一特性，使得通過 javascript等腳本語言也能實(shí)現(xiàn)本地存儲，調(diào)用硬解設(shè)備的功能。這就是說，html5 技術(shù)可以把客戶端應(yīng)用實(shí)現(xiàn)在瀏覽器上，同時瀏覽器是跨平臺性質(zhì)的，忽略了各個系統(tǒng)底層的不同，大大降低了開發(fā)維護(hù)成本。廣義論及 html5 時，實(shí)際指的是包括

12、 html、css 和 javascript 在內(nèi)的一套技術(shù)組合。它希望能夠減少瀏覽器對于插件的依賴如 adobe flash、microsoft silverlight，與 oraclejavafx 的需求，并且直接提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。-2-1.2 websocketwebsocket protocol 是 html5 一種新的協(xié)議。它是實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信。859095100105110115120在實(shí)時 web 應(yīng)用出現(xiàn)之初，最簡單的實(shí)時通信的實(shí)現(xiàn)方案是輪詢。所謂輪詢就是客戶端以一定的時間間隔向服務(wù)器端發(fā)出請求，以頻繁請求的方式來不斷刷新客戶端呈現(xiàn)的信息。這種方

13、案缺乏靈活性，無論服務(wù)器端是否有信息更新，請求都會不斷被發(fā)送，頻繁的連接請求會給服務(wù)器端帶來巨大的處理壓力。所以這種方案逐漸被舍棄，進(jìn)而發(fā)展出了基于 ajax 的長輪詢方式和基于 iframe 的流方式3。這兩種方式都在原有輪詢的基礎(chǔ)做了改進(jìn)，一定程度上克服了簡單輪詢的不足。但是這兩種方案都還存在很多問題。基于 iframe 的流方式中，由于 iframe 中始終維持一個連接，用戶的瀏覽器會始終顯示當(dāng)前頁面處于加載過程中，始終不能顯示加載完成，這將影響用戶體驗(yàn)。而基于 ajax 的長輪詢方案中，當(dāng)服務(wù)器端數(shù)據(jù)更新速度較快時，長輪詢將退化為普通的輪詢，這樣將大大降低其性能，并會對服務(wù)器端帶來較大

14、的處理壓力。以上傳統(tǒng) web 實(shí)時通信解決方案都存在著不足的問題，所以本論文在實(shí)時推送功能模塊上采用一種新型的 web 通信解決方法websocket 的網(wǎng)絡(luò)技術(shù)。websocket 規(guī)范的目標(biāo)是在瀏覽器中實(shí)現(xiàn)和服務(wù)器端雙向通信。其原理是使用 javascript 調(diào)用瀏覽器的 api 發(fā)出一個 websocket 請求至服務(wù)器，經(jīng)過一次握手，和服務(wù)器建立了 tcp 通訊，因?yàn)樗举|(zhì)上是一個 tcp 連接，所以數(shù)據(jù)傳輸?shù)姆€(wěn)定性強(qiáng)和數(shù)據(jù)傳輸量比較小。而且 websocket 在應(yīng)用層實(shí)現(xiàn)了與 tcp socket 相同的功能。具有以下幾項(xiàng)特點(diǎn)：1)無縫穿越防火墻和路由器 2)支持跨域交流 3)完

15、美整合基于 cookie 的認(rèn)證 4)完美整合 http 負(fù)載平衡 5)兼容二進(jìn)制數(shù)據(jù)。1.3 webrtc為實(shí)現(xiàn)實(shí)時端對端文本信息傳輸、圖片傳輸，以及視頻語音通信傳輸，本系統(tǒng)使用了webrtc 技術(shù)，webrtc 是一項(xiàng)可在瀏覽器基礎(chǔ)上進(jìn)行實(shí)時視頻和音頻通信的技術(shù)，webrtc 技術(shù)包括了視頻會議的核心技術(shù)，如音視頻的采集、編碼、網(wǎng)絡(luò)傳輸、顯示等功能，并且還支持多平臺：windows、linux、mac、android。在 chrome 瀏覽器平臺上，有相應(yīng)api 授權(quán)用戶調(diào)用攝像頭進(jìn)行視頻采集，webrtc 采用 i420/vp8 編解碼技術(shù)4。vp8 是開源實(shí)現(xiàn)，vp8 能以更少的數(shù)據(jù)提

16、供更高質(zhì)量的視頻，特別適合視頻會議這樣的需求。視頻加密相當(dāng)于視頻應(yīng)用層面的功能，給點(diǎn)對點(diǎn)的視頻雙方提供了數(shù)據(jù)上的安全保證，可以防止在web 上視頻數(shù)據(jù)的泄漏。對于網(wǎng)絡(luò)視頻來講，數(shù)據(jù)的傳輸與控制是核心價值，webrtc 采用的是成熟的 rtp/rtcp 技術(shù)。而且在現(xiàn)有版本的 chrome 瀏覽器中支持 peerconnection api，允許開發(fā)者創(chuàng)建 web 應(yīng)用程序，實(shí)現(xiàn)實(shí)時音頻和視頻通話，而不再需要一個額外的插件。getusermedia api 允許開發(fā)者使用攝像頭和麥克風(fēng)，把 peerconnection api 和 getusermediaapi 結(jié)合在一起，就能實(shí)現(xiàn)高質(zhì)量的音視

17、頻通信。webrtccanvas 元素是 html5 的一部分，允許腳本語言動態(tài)渲染位圖像。它最初由蘋果內(nèi)部使用自己 mac os x webkit 推出，供應(yīng)用程序使用像儀表盤的構(gòu)件和 safari 瀏覽器使用。后來，有人通過 gecko 內(nèi)核的瀏覽器（尤其是 mozilla 和 firefox），opera 和 chrome，和超文本網(wǎng)絡(luò)應(yīng)用技術(shù)工作組建議為下一代的網(wǎng)絡(luò)技術(shù)使用該元素。canvas 由一個可繪制地區(qū) html代碼中的屬性定義決定高度和寬度。javascript 代碼可以訪問該地區(qū)，通過一套完整的繪圖功能類似于其他通用二維的 api，從而使動態(tài)生成的圖形。可以用 canvas

18、 構(gòu)造圖形，動畫，游戲和圖片等。-3-2 需求分析與系統(tǒng)構(gòu)架html5 新技術(shù)實(shí)現(xiàn)的在線教育系統(tǒng)旨在完成一個可以隨時隨地、不受空間時間限制的、125130135140145跨平臺的教育系統(tǒng)，并且增加視頻語音教學(xué)、畫板教學(xué)、文本通信的相互融合。基于 html5新技術(shù)的在線教育系統(tǒng)擬要完成三部分的內(nèi)容：一，多人視頻語音教室，是在線教育系統(tǒng)的主要功能。視頻教學(xué)模塊又分為初級在線教室和高級在線教室。初級在線教室里教師和多名學(xué)生可互相通過音頻視頻沒有限制地交流，適合大教室討論授課。高級在線教室里教師功能比較豐富，在此教室中可允許老師根據(jù)課程教學(xué)情況控制學(xué)生機(jī)器的視頻音頻，例如控制學(xué)生機(jī)器只允許學(xué)生聽教師

19、授課，學(xué)生在不經(jīng)過老師授權(quán)的情況下，音視頻數(shù)據(jù)是無法傳送到在線課堂中來的，即真實(shí)實(shí)現(xiàn)了線下常規(guī)教學(xué)中提問回答互動的教學(xué)場景。此模塊技術(shù)上是通過調(diào)用 web 瀏覽器中的實(shí)時音視頻通信模塊，實(shí)現(xiàn)端到端之間的通信，可在不失真的情況下對音視頻做到最大限度壓縮，同時這種端對端技術(shù)實(shí)現(xiàn)方法大大緩解了對服務(wù)器傳輸數(shù)據(jù)的壓力，具有其他教育系統(tǒng)沒有的成本優(yōu)勢。二，不同教學(xué)需求的教室管理模塊，本文的在線教育系統(tǒng)除了具有音視頻教學(xué)外，還有模仿線下教室黑板書寫開發(fā)的在線共享課件教室，在教室中老師可與學(xué)生隨時分享備課資料、批改作業(yè)等，同時配合音頻聊天，使在線授課達(dá)到較高質(zhì)量。三，用戶登錄系統(tǒng)，注冊用戶分為教師、學(xué)生、管

20、理員等，每個角色具有不同的權(quán)限，教師可發(fā)起一門課程、控制教室多媒體信息、上傳課件文檔、參與文本討論；學(xué)生可參加選定的課程教學(xué)、下載課件文檔、參與文本討論；管理員除了具有教師和學(xué)生所有權(quán)限外，也有管理教師和學(xué)生功能的權(quán)限，也可隱身登陸教室等。根據(jù)以上的功能分析，使用上一章節(jié)介紹的 html5 幾個技術(shù)標(biāo)準(zhǔn)應(yīng)用到在線教育系統(tǒng)中，后端通過 node.js 技術(shù)搭建穩(wěn)定的服務(wù)，保障客戶端之間數(shù)據(jù)有效安全交互。node.js 是一個可以快速構(gòu)建網(wǎng)絡(luò)服務(wù)及應(yīng)用的平臺。該平臺的構(gòu)建是基于 chromes javascript runtime，執(zhí)行 javascript 的速度快，性能好5。在線教育系統(tǒng)的總體

21、構(gòu)架圖如圖 1 所示：node.jswindows/linuxwebsocket 數(shù)據(jù)傳輸客戶端服務(wù)器peerconnection圖 1 系統(tǒng)結(jié)構(gòu)fig. 1 system architecture-4-websocket 數(shù)據(jù)傳輸客戶端文本、畫板、視頻音頻應(yīng)用canvaswebrtcchorme/firefox 瀏覽器windows/linux/android文本、畫板、視頻音頻應(yīng)用webrtccanvaschorme/firefox 瀏覽器windows/linux/android3 主要模塊設(shè)計1501551601651701751801853.1 用戶管理在線教育系統(tǒng)中角色分為教師、學(xué)

22、生和管理員三種用戶。三種角色在教學(xué)系統(tǒng)里會根據(jù)他們的屬性具有不同的權(quán)限和功能。在線教育系統(tǒng)里，教師相比于學(xué)生，擁有更多的主動功能和控制功能。教師可以選擇要教授的課程、制定課程計劃、修改學(xué)生作業(yè)、上傳教學(xué)課件以及在實(shí)時教學(xué)中管理和控制學(xué)生機(jī)器。根據(jù)教學(xué)需要，教師可選擇語音教室、視頻教室、畫板教室或者課件教室。也可相互結(jié)合，已達(dá)到更好的教學(xué)效果。同時在網(wǎng)絡(luò)狀態(tài)不好的時候也可根據(jù)現(xiàn)場情況選擇帶寬消耗較低的教室。學(xué)生在在線教育系統(tǒng)里，是一種去接受知識的角色。模擬傳統(tǒng)教室課堂，學(xué)生可以制定自己的學(xué)習(xí)計劃，按照學(xué)習(xí)計劃選擇課程加入各種類型的教室學(xué)習(xí)，可下載課堂里老師上傳的課件，可保存老師的板書，也可參加討

23、論區(qū)與其他同學(xué)交流學(xué)習(xí)經(jīng)驗(yàn)。管理員，是一種監(jiān)督教師教學(xué)質(zhì)量，保證學(xué)生利益的角色。具有修改和管理教師學(xué)生的信息、隱身登陸在線教室等、處理突發(fā)情況的權(quán)限。3.2 不同需求的教室模塊在線教育系統(tǒng)中，音視頻只是作為在線教育工具的一種，而要讓網(wǎng)絡(luò)教育真正對中國的教育事業(yè)有所影響，應(yīng)該最大限度地釋放學(xué)生學(xué)習(xí)的積極性和主動性，不受限制共同學(xué)習(xí)。基于此方面考慮，本系統(tǒng)中除了有音視頻教室之外，另外加入課件互動共享功能和實(shí)時同步畫板和文本討論區(qū)。通過音視頻教室，老師能較高效率地傳播知識，因?yàn)槭菍?shí)時音頻連接，能及時得到學(xué)生學(xué)習(xí)狀態(tài)的實(shí)時反饋。在每個人的屏幕上顯示出課堂中所有參與學(xué)習(xí)的學(xué)生和老師，在網(wǎng)絡(luò)上營造了線下大

24、家一起學(xué)習(xí)的氛圍。文本討論區(qū)是大家匯集一堂，在課后和課前通過實(shí)時文本消息在線討論知識。課件互動課堂和畫板課堂，主要是模擬線下教室的黑板教學(xué)，老師把課件上傳到服務(wù)器，服務(wù)器即時分享給教室的學(xué)生，同時老師在畫板上的操作也會被服務(wù)器捕捉到，然后同樣同步到學(xué)生教室。因?yàn)橛泻芏嘟虒W(xué)知識，僅僅通過語言上和表情上的傳達(dá)是不能描述清楚的，例如邏輯思維數(shù)學(xué)和美術(shù)輔導(dǎo)，這種情節(jié)就可以通過畫板教學(xué)，學(xué)生能實(shí)時觀看教師推演過程。未達(dá)到較好教學(xué)效果，再配合視音頻的講解，現(xiàn)場教學(xué)成果也可很方便保存記錄，供線下再復(fù)習(xí)。3.3 其他功能模塊除了主教學(xué)功能區(qū)之外，本文在線教育系統(tǒng)中再加以輔助教學(xué)管理模塊。包括控制課程時間，學(xué)生

25、計費(fèi)統(tǒng)計，以及教師評價反饋等功能。4 系統(tǒng)實(shí)現(xiàn)與數(shù)據(jù)驗(yàn)證4.1 系統(tǒng)實(shí)現(xiàn)通過前幾張章節(jié)的功能分析和技術(shù)介紹，在線教育系統(tǒng)的整體構(gòu)架已經(jīng)比較清楚，本章詳細(xì)闡述了在線教育系統(tǒng)各個功能模塊的實(shí)現(xiàn)和數(shù)據(jù)驗(yàn)證。在線教育系統(tǒng)主要是學(xué)生和教師之間以及客戶端與服務(wù)器之間進(jìn)行實(shí)時數(shù)據(jù)交互，每一位老師和學(xué)生都算是一個客戶端。系統(tǒng)的基礎(chǔ)數(shù)據(jù)交互都是通過 webscoket 建立的 web 雙向?qū)崟r連接進(jìn)行傳播，其中包括在線教育系統(tǒng)中的文本信息，在線畫板數(shù)據(jù)，共享課件的數(shù)據(jù)。通過 webscoket 通道，數(shù)據(jù)從客戶端傳送到服務(wù)器，服務(wù)器收到數(shù)據(jù)后作出判斷，根據(jù)客戶端的要求傳給符合條件的接收-5-端。在線教育系統(tǒng)服務(wù)

26、器后臺是使用 node.js 與客戶端建立 websocket 連接。node.js 是一種單線程非阻塞新興的后端實(shí)現(xiàn)語言6。在 node.js 里有很多可以實(shí)現(xiàn) websocket 的方法，本文選擇的是 socket.io 模塊。socket.io 旨在讓各種瀏覽器與移動設(shè)備實(shí)現(xiàn)實(shí)時 app 功能，模190糊化底層的傳輸機(jī)制，具有跨平臺性質(zhì)。在線教育系統(tǒng)中客戶端與服務(wù)端建立 websocket過程如下，首先服務(wù)器建立 websocket 監(jiān)聽，等待客戶端發(fā)送請求，服務(wù)器收到請求之后，成功建立 websocket 雙向通道，這時服務(wù)器和客戶端都可主動向?qū)Ψ酵扑拖ⅰ４a如下var socket

27、 = io.connect(12:8080); /客戶端向服務(wù)器發(fā)送請求socket.on(message,function(data)/客戶端收到服務(wù)器指令，執(zhí)行命令195200205210215220225);io.sockets.on(connection, function (socket) /當(dāng)客戶端建立 socket 時觸發(fā)socket.on(fan1, function (fan) /接收客戶端傳過來的數(shù)據(jù));socket.on(move, function (fan) /接收客戶端傳過來的move數(shù)據(jù)););應(yīng)用到在線教育系統(tǒng)的各個模塊中，課件

28、通過 websocket 連接從老師端傳給服務(wù)器，服務(wù)器這時再轉(zhuǎn)發(fā)給已建立中的 websocket 客戶端。在線畫板也是通過此種方法，把教師畫板上的鼠標(biāo)坐標(biāo)信息搜集到服務(wù)器，服務(wù)器實(shí)時廣播給在線學(xué)生。在線學(xué)生收到websocket 傳輸來的鼠標(biāo)數(shù)據(jù)，就可在自己的頁面上模擬教師的實(shí)際操作。還有在線教育系統(tǒng)中的一些文本傳輸也是使用相同的通道和方法。本文對 websocket 的傳輸效率進(jìn)行驗(yàn)證，通過 wireshark 軟件截取其網(wǎng)絡(luò)數(shù)據(jù)包。對網(wǎng)絡(luò)層、協(xié)議、主機(jī)、網(wǎng)絡(luò)或端口進(jìn)行過濾，經(jīng)過分析得到 websocket 的文本數(shù)據(jù)傳輸在局域網(wǎng)內(nèi)的時延平均在 15ms 左右，在廣域網(wǎng)下的時延在 200m

29、s 左右。音視頻教學(xué)是應(yīng)用了 webrtc 技術(shù)，webrtc 采用的是成熟的 rtp/rtcp 技術(shù)，前幾章也介紹了 webrtc 技術(shù)的基本原理。在線教育系統(tǒng)通過 webrtc 集成了 mediastream、peerconnection、datachannel 等功能7。具體技術(shù)上實(shí)現(xiàn)是通過 mediastream 調(diào)用客戶端本地的麥克風(fēng)和攝像頭，獲取本地的媒體源。一個媒體數(shù)據(jù)源構(gòu)成一個 mediastreamtrack，比如音頻數(shù)據(jù)源和視頻數(shù)據(jù)源，多個相互之間有關(guān)聯(lián)的媒體數(shù)據(jù)源構(gòu)成一個媒體流mediastream。代碼實(shí)現(xiàn)如下所示：if (getusermedia) rtc.numst

30、reams+;getusermedia.call(navigator, options, function(stream) rtc.streams.push(stream);onsuccess(stream);if (rtc.initializedstreams = rtc.numstreams) -6-230235240245, function() alert(could not connect stream.);onfail();); else alert(webrtc is not yet supported in this browser.);客戶端在獲取到本地的媒體流之后，webr

31、tc 網(wǎng)絡(luò)通過 signalling 來發(fā)現(xiàn)各個 peer 即學(xué)生，peerconnection 處理通訊雙方信令事件，完成通訊數(shù)據(jù)的傳輸，建立通訊連接。通過瀏覽器，webrtc 把通訊雙方的信令狀態(tài)直接映射到 peerconnection 里面來抽象信令處理。在建立 peerconnection 之后即可通過 datachannel 傳輸任意類型的數(shù)據(jù)8。因?yàn)?webrtc 建立的視頻語音教室是端對端之間的數(shù)據(jù)傳輸，服務(wù)器只負(fù)責(zé)處理信號通訊，所以即使有很多學(xué)生同時加入教室也不會對服務(wù)器造成壓力。5 人測試的在線教育系統(tǒng)實(shí)驗(yàn)結(jié)果，如圖 2 所示：圖 2 系統(tǒng)實(shí)現(xiàn)例圖fig. 2system c

32、hart4.2 系統(tǒng)測試本系統(tǒng)在測試是分別對服務(wù)器和客戶端在帶寬、時延、丟包率三個方面進(jìn)行測試。客戶端是通過 wifi 接入網(wǎng)絡(luò)，wifi 下的帶寬情況是一種不確定的變量，閑忙時段音視頻傳播250所占用的帶寬是不一樣的。在實(shí)驗(yàn)里本章選擇了一個中等使用度的 wifi 環(huán)境下進(jìn)行測試。關(guān)于帶寬、時延、丟包率分別測出 5 個時刻下的數(shù)據(jù)，其中帶寬的單位為 kb/s，時延單位為 ms，如下表所示：表 1tab. 1帶寬測試數(shù)據(jù)bandwidth test參數(shù)音頻視頻時刻 1/kb/s6.7234.2時刻 2/kb/s6.9435.3時刻 3/ kb/s6.8336.1時刻 4/ kb/s6.4334.

33、3時刻 5/ kb/s5.9332.4255-7-表 2tab. 2丟包率測試數(shù)據(jù)packet loss rate test參數(shù)音頻視頻時刻 1/ms3.9%6.1%時刻 2/ms3.8%5.7%時刻 3/ms4.1%6.2%時刻 4/ms3.5%6.3%時刻 5/ms4.2%6.7%表 3時延測試數(shù)據(jù)260tab. 3delay test參數(shù)websocket時刻 1/ms193.3時刻 2/ms201.5時刻 3/ms187.4時刻 4/ms193.0時刻 5/ms203.6經(jīng)過算數(shù)平均計算，得出音頻帶寬平均在 6.57kb/s，視頻帶寬平均在 34.5 kb/s，音頻丟包率在 3.9%，

34、視頻丟包率在 6.2%。從這幾組數(shù)據(jù)中可以得出，音視頻所占用的帶寬變是不大的，這就能夠說明，通過 webrtc 實(shí)現(xiàn)的在線教育系統(tǒng)的正常運(yùn)作受帶寬限制，受網(wǎng)265270275280285290295絡(luò)環(huán)境的影響比較小。視頻丟包率在 10%以下是可以正常播放的，所以在也不會影響在線教育系統(tǒng)的正常上課。時延是 websocket 的傳輸時延，可以看到會稍微造成在線教育系統(tǒng)中通過 websocket 傳輸?shù)奈谋鞠ⅲ鴺?biāo)信息等有稍微的延遲。5 結(jié)論基于 html5 的在線教育系統(tǒng)的主要表現(xiàn)在以下幾個方面的優(yōu)勢：1）跨平臺性質(zhì)的在線教育系統(tǒng)，系統(tǒng)核心的 webrtc 的本質(zhì)是將實(shí)時通信應(yīng)用所需要的音視頻捕獲及處理模塊、網(wǎng)絡(luò)傳輸及會話控制等協(xié)議集成到 web 瀏覽器中9，從而屏蔽底層硬件實(shí)現(xiàn)或操作系統(tǒng)之間的差異。第三方 web app 開發(fā)者可以通過瀏覽器提供 web api調(diào)用音視頻實(shí)時通信能力10。2）學(xué)習(xí)內(nèi)容豐富，由于不受實(shí)物空間時間的限制，在線教育系統(tǒng)向?qū)W生提供的學(xué)習(xí)方法包括在線語音，在線視頻，在線共享課件等，學(xué)生可以選擇適合自己學(xué)習(xí)