微信公眾號的直播課堂設計與開發

張占孝 王萍利 張忠利

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

[關鍵詞]HTML5技術 ?微信公眾號 ?直播課堂

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

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

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

微信公眾號的直播課堂設計

1.系統設計目標

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

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

（2）不同手機共同使用同一版本的軟件，且無需經常更新軟件，只需更新服務器代碼即可，能夠提升軟件更新換代的效率。

2.系統功能劃分

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

（1）后臺管理模塊

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

（2）客戶端模塊

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

3.直播課堂架構設計

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

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

4.數據庫設計

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

直播課堂使用的關鍵技術

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

1.HTML5（實時流播放）

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

2.WebRTC

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

3.WebSocket

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

直播課堂的實現

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

1.創建直播功能的實現

教師創建直播時選擇的直播章節、直播時間，系統會將教師所選章節的PDF文檔上傳到直播服務器中。

2.直播授課功能的實現

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

3.直播資料的上傳

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

4.直播回放

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

結 ?語

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

參考文獻：

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

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

作者單位：西安職業技術學院 ?陜西西安