張占孝 王萍利 張忠利

[摘 ?要]隨著互聯(lián)網(wǎng)時代的發(fā)展，微信公眾號的普及給各行各業(yè)帶來了很大的便利，特別是教育行業(yè)。筆者利用HTML5相關(guān)技術(shù)設(shè)計開發(fā)了教學(xué)直播課堂，通過微信公眾號進行傳播，使學(xué)生和教師通過視頻教學(xué)實現(xiàn)了互動。直播課堂的使用擴大了教學(xué)范圍，減少了資源浪費，提高了教學(xué)效率。

[關(guān)鍵詞]HTML5技術(shù) ?微信公眾號 ?直播課堂

基金項目：陜西省教育廳2017年度專項科學(xué)研究計劃《基于HTML5和微信公眾號的直播課堂設(shè)計與開發(fā)》（項目編號：17JK1131）。

中文分類號：TP311.5 ? ?文獻標識碼：A

隨著互聯(lián)網(wǎng)的快速發(fā)展，微課、慕課等教學(xué)方式已經(jīng)不能滿足教師教育教學(xué)的需求，大家對使用手機、電腦等實時訪問校內(nèi)直播課堂的需求越來越強烈。本文利用HTML5技術(shù)設(shè)計的直播課堂，從采集端（教學(xué)端）到流媒體服務(wù)器端，利用流媒體服務(wù)器對實時音頻和視頻流進行處理，然后到達播放端（學(xué)生端）實現(xiàn)直播。目前，該直播課堂已經(jīng)投入使用，極大地提高了學(xué)生學(xué)習(xí)的積極性和主動性，也為學(xué)生提供了有效的學(xué)習(xí)途徑。

微信公眾號的直播課堂設(shè)計

1.系統(tǒng)設(shè)計目標

教師可以通過微信公眾號進入直播后臺創(chuàng)建直播任務(wù)，生成小程序碼，學(xué)生可以通過小程序預(yù)約、觀看及互動。

（1）操作方便。通過微信公眾號，教師和學(xué)生只要在進入直播系統(tǒng)時允許系統(tǒng)獲取本人微信賬號，便可進行相應(yīng)功能的操作。

（2）不同手機共同使用同一版本的軟件，且無需經(jīng)常更新軟件，只需更新服務(wù)器代碼即可，能夠提升軟件更新?lián)Q代的效率。

2.系統(tǒng)功能劃分

筆者對直播課堂系統(tǒng)功能進行了詳細的劃分（如圖所示）。

（1）后臺管理模塊

后臺管理模塊分為用戶管理和音視頻管理兩個部分。其中，用戶管理又分為后臺系統(tǒng)管理員和客戶端用戶管理兩個部分。后臺系統(tǒng)管理員負責(zé)管理用戶和授權(quán)。客戶端用戶管理包括用戶評論、課程內(nèi)容、教學(xué)互動等方面。音視頻管理主要是對音視頻的上傳、下載、采集、處理、編碼壓縮、封裝、數(shù)據(jù)分發(fā)、錄制、實時轉(zhuǎn)碼等進行管理。

（2）客戶端模塊

客戶端模塊包括用戶管理和直播管理兩個部分。其中，用戶管理是對普通用戶進行管理，普通用戶無需注冊，登錄直播系統(tǒng)時允許后臺獲取自己的微信賬號信息，服務(wù)器就會根據(jù)用戶信息對用戶通知及互動進行管理。直播管理有創(chuàng)建直播和觀看直播的功能，用戶可以對服務(wù)器端發(fā)布的直播內(nèi)容進行預(yù)約，服務(wù)器則以短信或者微信形式通知預(yù)約用戶。

3.直播課堂架構(gòu)設(shè)計

視頻直播系統(tǒng)包括后臺錄制端、直播服務(wù)器端和微信公眾號播放端（如表所示）。

后臺錄制端對連續(xù)采集到的多媒體信息經(jīng)過編碼壓縮后，從源端連續(xù)、實時發(fā)送到流媒體服務(wù)器，客戶端從流媒體服務(wù)器中獲取部分數(shù)據(jù)后開始解碼播放，并將后續(xù)接收的數(shù)據(jù)持續(xù)不斷地放入本地緩存，形成可以連續(xù)播放的媒體流，實時媒體流對網(wǎng)絡(luò)帶寬、容錯性、媒體同步播放的平滑性等均有嚴格的要求。視頻直播系統(tǒng)采用動態(tài)緩沖池技術(shù)、音視頻同步技術(shù)等使實時媒體流實現(xiàn)流暢的直播效果。

4.數(shù)據(jù)庫設(shè)計

由于直播課堂要對用戶信息、視頻信息、直播等進行管理，因而需要對數(shù)據(jù)庫進行設(shè)計。直播課堂系統(tǒng)采用JSON數(shù)據(jù)庫，且數(shù)據(jù)庫中的每條記錄都是一個JSON格式的對象。一個數(shù)據(jù)庫可以有多個集合（相當于關(guān)系型數(shù)據(jù)中的表），一個集合可看作一個JSON數(shù)組，數(shù)組中的每個對象就是一條記錄。我們可以設(shè)計三個集合（表）：教師信息表、學(xué)生信息表、課件信息表。教師信息表包括字段userid、教師編號、姓名、單位、職稱、權(quán)限等內(nèi)容。學(xué)生信息表包括userid、學(xué)號、姓名、性別、班級、專業(yè)等內(nèi)容。課件信息表包括課件名稱、課件介紹、作者、課件文本（地址）、課件錄制（地址）等內(nèi)容。

直播課堂使用的關(guān)鍵技術(shù)

直播課堂使用的WebRTC（Web實時傳輸通信）用于采集、編解碼和收發(fā)客戶端的音視頻流等。WebSocket通信協(xié)議用于客戶端和服務(wù)器端的網(wǎng)絡(luò)鏈接，實時傳輸音視頻媒體流。

1.HTML5（實時流播放）

HTML5能夠?qū)eb應(yīng)用變成一個標準化的應(yīng)用平臺，在平臺上可以放置視頻、音頻、圖像、動畫，以及進行用戶之間的各種交互[1]。HTML5通過[video]和[audio]標簽完成音視頻文件的播放，用戶使用拖放的方式可以將瀏覽器中的音視頻文件保存到本地或?qū)⒈镜匾粢曨l文件上傳到瀏覽器，其所具有的邊下載邊播放的優(yōu)勢，解決了網(wǎng)絡(luò)堵塞不能播放的問題。

2.WebRTC

WebRTC源自網(wǎng)頁實時通信（Web Real-Time Communication）的縮寫，是一個支持網(wǎng)頁瀏覽器進行實時語音對話或視頻對話的API（應(yīng)用程序編程接口），主要具備音視頻的采集、編解碼、加密、媒體文件、圖像處理、顯示、網(wǎng)絡(luò)傳輸與流控等功能，而且能夠支持多個平臺的操作。WebRTC在瀏覽器中通過Native API與JavaScript向本地或Web應(yīng)用提供多種接口用來實現(xiàn)實時音視頻通話，根本不需要依賴第三方軟件，也不需要考慮系統(tǒng)的不同，只需調(diào)用其提供的JavaScript接口就能實現(xiàn)跨平臺的Web應(yīng)用。

3.WebSocket

WebSocket是HTML5一種新的協(xié)議[2]，它真正實現(xiàn)了服務(wù)器和瀏覽器客戶端之間的雙向數(shù)據(jù)傳輸。WebSocket己經(jīng)獲得了許多瀏覽器的支持，服務(wù)器端有專門的端口監(jiān)聽WebSocket客戶端的請求。瀏覽器通過Javascript API和服務(wù)WebSocket建立鏈接后就可以直接進行數(shù)據(jù)交互。在本系統(tǒng)使用WebSocket能夠讓用戶瀏覽器與直播服務(wù)器建立WebSocket鏈接，并且能夠保持實時鏈接，這樣客戶端瀏覽器就能隨時把數(shù)據(jù)發(fā)送到服務(wù)器端，當服務(wù)器端收到任何一個瀏覽器發(fā)送的消息后，就會將該消息依次發(fā)送給每個客戶端瀏覽器。

直播課堂的實現(xiàn)

教師直播時，采集端將采集到的音視頻數(shù)據(jù)通過處理、編碼、封裝發(fā)送到直播服務(wù)器，直播服務(wù)器為WebRTC提供了編程接口，具體功能包括轉(zhuǎn)碼、音視頻錄制、音視頻混合、音視頻直播等，并在視頻直播功能的基礎(chǔ)上使用WebSocket技術(shù)開發(fā)了聊天功能，實現(xiàn)了直播和聊天的整合，直播服務(wù)器則將處理過的數(shù)據(jù)流發(fā)送到客戶端。

1.創(chuàng)建直播功能的實現(xiàn)

教師創(chuàng)建直播時選擇的直播章節(jié)、直播時間，系統(tǒng)會將教師所選章節(jié)的PDF文檔上傳到直播服務(wù)器中。

2.直播授課功能的實現(xiàn)

直播創(chuàng)建完成后，教師選擇開始直播進入直播授課頁面，直播使用的服務(wù)器可能第一次訪問時會提示HTTPS是不安全的鏈接，用戶選擇添加或者繼續(xù)訪問就可以進入直播，如需幫助可查看網(wǎng)站幫助文檔。進入直播后，教師可以與學(xué)生一對一或一對多聊天，也可以與學(xué)生共享聲音、攝像頭、屏幕等。

3.直播資料的上傳

教師在授課過程中，可以上傳本地文檔到直播服務(wù)器上，但由于文檔上傳需要一定的轉(zhuǎn)換時間，因而直播前教師應(yīng)提前將本地文檔上傳到直播服務(wù)器中。另外，直播過程中上傳的文檔只對本次直播有效，結(jié)束直播后文檔就失效了。

4.直播回放

教師直播完成后，回放不是及時產(chǎn)生的，如果觀看直播的學(xué)員未離開也不會產(chǎn)生回放，教師點擊“結(jié)束直播”按鈕后，系統(tǒng)才會對直播記錄進行處理，教師才可以通過回放查看當前直播記錄列表，也可以選擇將直播視頻發(fā)布到學(xué)生端或者刪除直播回放記錄。

結(jié) ?語

微信公眾號的直播課堂的設(shè)計與開發(fā)，創(chuàng)新了直播課堂教學(xué)模式，擴大了學(xué)生學(xué)習(xí)的范圍，解決了學(xué)習(xí)地點變化的問題，使學(xué)生可以隨時隨地學(xué)習(xí)，提高了學(xué)生學(xué)習(xí)的積極性和主動性，使學(xué)生由被動轉(zhuǎn)為主動學(xué)習(xí)，進一步創(chuàng)新了課堂教學(xué)模式，提高了課堂教學(xué)質(zhì)量，也為課堂教學(xué)提供了相應(yīng)的參考，杜絕了學(xué)生上課玩手機的現(xiàn)象，并且從界面設(shè)計、學(xué)生互動等方面來說，都便于直播課堂的開發(fā)和維護。因此，微信公眾號的直播課堂教學(xué)模式在高職學(xué)院教學(xué)改革方面具有良好的推廣前景。

參考文獻：

[1]羅治情、陳娉婷、官波、沈祥成：《基于HTML5+WebRTC的農(nóng)業(yè)專家在線教學(xué)系統(tǒng)的設(shè)計與實現(xiàn)》，《信息教育》2016年第3期。

[2]何明亮：《WebRTC技術(shù)的研究與應(yīng)用》，學(xué)位論文，南京郵電大學(xué)，2014。

作者單位：西安職業(yè)技術(shù)學(xué)院 ?陜西西安