張占孝 王萍利 張忠利

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

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

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

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

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

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

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

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

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

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

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

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

（1）后臺管理模塊

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

（2）客戶端模塊

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

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è)計三個集合（表）：教師信息表、學生信息表、課件信息表。教師信息表包括字段userid、教師編號、姓名、單位、職稱、權(quán)限等內(nèi)容。學生信息表包括userid、學號、姓名、性別、班級、專業(yè)等內(nèi)容。課件信息表包括課件名稱、課件介紹、作者、課件文本（地址）、課件錄制（地址）等內(nèi)容。

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

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

1.HTML5（實時流播放）

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

2.WebRTC

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

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)站幫助文檔。進入直播后，教師可以與學生一對一或一對多聊天，也可以與學生共享聲音、攝像頭、屏幕等。

3.直播資料的上傳

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

4.直播回放

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

結(jié) ?語

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

參考文獻：

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

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

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