微信公眾號(hào)的直播課堂設(shè)計(jì)與開(kāi)發(fā)

張占孝 王萍利 張忠利

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

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

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

中文分類(lèi)號(hào)：TP311.5 ? ?文獻(xiàn)標(biāo)識(shí)碼：A

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

微信公眾號(hào)的直播課堂設(shè)計(jì)

1.系統(tǒng)設(shè)計(jì)目標(biāo)

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

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

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

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

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

（1）后臺(tái)管理模塊

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

（2）客戶(hù)端模塊

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

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

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

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

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

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

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

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

1.HTML5（實(shí)時(shí)流播放）

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

2.WebRTC

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

3.WebSocket

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

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

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

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

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

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

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

3.直播資料的上傳

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

4.直播回放

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

結(jié) ?語(yǔ)

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

參考文獻(xiàn)：

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

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

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