微信直播在教學中的應用設計

南京 鄭力

微信小程序由于自身平臺優勢，不需要對各類設備單獨開發不同系統版本APP，具有開發成本低、占用內存小、用戶量龐大等特點，給教育行業帶來了廣闊的應用空間。微信小程序可以應用于課堂教學、實驗直播及教學會議等應用場景，具有搭建迅速、自由度高及實時互動等特點。

微信小程序的直播功能采用了輕量化的直播引擎，開發及使用門檻更低。其嵌套于微信生態中，方便師生獲取。但是在功能的完整性上，與原生直播App 還有差距，如果需要個性化的上傳輔流、美化圖像等功能，還需要借助其它直播軟件才能實現。

雖然微信小程序是基于JavaScript、HTML 及CSS 技術進行開發的，但是又有別于傳統的瀏覽器。其提供了豐富的API 接口，可以方便的調用微信各種能力。提供的組件不但可以實現拉流，同時能夠實現推流，而且提供了RTC 功能，可以實現連麥互動，降低了直播延時。

微信小程序直播相關技術

（一）前端MINA 框架

微信小程序采用的MINA框架通過封裝微信客戶端提供的文件系統、網絡通信、數據與安全等基礎功能，提供一系列的組件和API，必要的文件為：

1.*.json 后綴的JSON 配置文件

JSON 是一種數據格式，并不是編程語言，在小程序中，JSON 扮演的靜態配置的角色。app.json 是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部tab等；每個頁面中的.json 文件用來表示每個小程序頁面相關的配置。

2.*.wxml 后 綴 的WXML 模板文件

在小程序中，充當類似HTML 的角色，提供了頁面結構相關的組件、屬性及條件渲染能力。

3.*.wxss 后綴 的WXSS 樣式文件

wxss 具有CSS 大部分的特性，但是在選擇器上只支持部分CSS 選擇器，在底層支持新的尺寸單位rpx，避開了不同設備對像素換算的煩惱，可以在不同設備上自動轉換樣式大小。

4.*.js 后綴的JS 腳本邏輯文件

完成了小程序的邏輯層的功能，實現了對頁面的數據運算、渲染等功能。微信小程序提供了豐富的API 接口，讓開發者可以很方便的調用微信提供的能力，實現了與微信數據的互通。

（二）關鍵組件 與

1.

主播端使用，它在微信小程序的內部是一個推流引擎，它負責對手機攝像頭和麥克風的數據進行采集和編碼，并通過url 參數指定的rtmp 推流地址上傳到云端。

2.

觀眾端使用，它在小程序的內部是一個在線播放器，負責從云端實時拉取音視頻數據并進行解碼和渲染。由于云端推流時使用了CDN 網絡，每一個觀眾都能在離自己比較近的云服務器上拉取到實時且流暢的音視頻流。

與組件暫時只針對國內特殊類目的小程序開放，其中包含教育行業，但是開放前需要經過審批。目前組件僅支持flv、rtmp 格式，通過修改組件mode 屬性的合法值，定義組件用途。

值得注意的是，與屬于原生組件，由客戶端創建，脫離在WebView 渲染流程外。原生組件的層級是最高的，一些CSS 樣式無法應用于原生組件，所以頁面中的其他組件無論設置 z-index 為多少，都無法蓋在原生組件上。

軟件設計

（一）開發準備

1.小程序的注冊與直播權限的開通

包含直播功能的小程序必須以非個人主體類型進行注冊，以獲得小程序的AppID，并需要先通過類目審核，再在小程序管理后臺，「開發」-「接口設置」中自助開通推拉流標簽的使用權限。

2.申請推流與播放域名

使用微信小程序直播服務，至少需要2 個域名，可以使用騰訊云直播提供的域名，或者自行購買其它域名。擁有域名后必須進行備案，并提交審核。

（二）應用場景

1.教學直播

教師對教學內容進行直播，不需要學生參與互動。對教學內容進行保存，方便日后點播。

2.教學互動

教師對教學內容進行講解，學生可以通過彈幕發言，并向老師申請發言權限，實現教學互動。

3.教學會議

多人實時進行的小會議，通過小程序建立會議室，邀請微信好友或者通過掃描小程序二維碼參與會議。

（三）功能設計

1.推流碼率及延時設定

在設計直播功能時，視頻的流暢度和延時是首要考慮的問題。通過設置的min-bitrate 屬性，應對不同場景的應用。建議組件屬性設置如表1。

的mincache 和max-cache 屬性用于控制播放器端的最小時延和最大時延。如果網絡情況比較好，那么播放器的時延就會趨向于min-cache，而如果網絡情況比較差，那么播放器的時延就會趨向于max-cache。

表1 屬性設置

一般而言，RTC 的視頻流延時為500ms 以內，直播網絡的視頻流延時為1-3s，因此一般將延時min-cache 設為0，max-cache 設為5。

2.事件處理

當直播組件狀態發生改變時，組件就會拋出相應的狀態碼，通過組件的綁定事件屬性可以綁定一個事件處理函數，該函數可以監聽組件模塊的內部事件和異常通知，根據不同的狀態碼在邏輯層做出相應的處理。

綁定事件包括：中的播放狀態變化事件、全屏變化事件、網絡狀態通知事件，中的狀態變化事件、網絡狀態通知、渲染錯誤事件、背景音開始播放事件、背景音進度變化事件及背景音播放完成事件。

（四）服務端搭建

1.流媒體服務器

流媒體服務器的性能，決定了直播程序體驗的質量，如今租用云服務器是很好的選擇，不但可以降低搭建服務器的成本，靈活的配置和擴容業務，同時可以獲得更高的帶寬和流速，直播體驗更佳。

例如，騰訊專門開發了云直播服務，主要面向云對接的直播服務，其優點包括開源UI 快速集成、更低的卡頓及延時、AI 美化及識別能力的加成。騰訊云能夠為標準RTMP 提供UDP 加速能力，開啟加速后的推流質量比標準RTMP 推流有更好的網絡波動抵抗力。

如果想要自己搭建RTMP流媒體服務器，由于直播會占用較大的帶寬，應首先考慮校園內部的網絡承受能力，再決定將服務器放在校內還是校外。

如果觀看直播的受眾分布地域較廣，還需要租用CDN服務商線路，對直播內容進行分發。

相對于云服務器，自建流媒體服務器會產生更大成本，更高延時，當業務量產生變化時，升級的成本也更大。

2.存儲服務器

在直播教學的過程中，可以將教學資料保存，方便日后使用。通過一些直播和視屏錄制軟件，可以實現視頻的保存與推流。

常用的軟件如obs，可以對直播視頻進行編輯和錄制，并將視頻文件保存在本地存儲服務器，當有直播需要時，只需要在自定義流媒體服務器中設置推流地址，連接成功后就可以實現直播。

日后在小程序端進行回看點播時，可利用本地自建的存儲服務器，對資源進行點播。

值得注意的是，微信小程序視頻推流只支持Flv 或者Rtmp 格式的視頻文件，在上傳時應當先本地轉碼，實現過程如圖1。

圖1 自建服務器

如果想要使用云端能力，也可以購買各類云服務商的云點播服務。云點播服務可以自行對視頻文件進行轉碼處理，并將視頻文件存儲于云端，在播放時提供CDN 加速，有回看需求也可以回看點播。

總結

微信小程序作為一個新興技術，其功能還在不斷更新與完善。直播組件方面，在與兩個關鍵組件上，又推出了組件，可以提供創建直播房間的功能，應用于教學場景時可以更快的組建直播。

在如今幾乎人人使用微信的時代，微信小程序為用戶提供了更加快速的加載能力，擁有易用且安全的微信數據開放能力，為教育教學提供了廣闊的平臺。而直播同樣作為一個新興的產業，也不斷被年輕人所接受。微信小程序、直播和教育的融合，為我們提供了更加便利，更加高效的教學手段。