微信直播在教學(xué)中的應(yīng)用設(shè)計

南京 鄭力

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

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

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

微信小程序直播相關(guān)技術(shù)

（一）前端MINA 框架

微信小程序采用的MINA框架通過封裝微信客戶端提供的文件系統(tǒng)、網(wǎng)絡(luò)通信、數(shù)據(jù)與安全等基礎(chǔ)功能，提供一系列的組件和API，必要的文件為：

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

JSON 是一種數(shù)據(jù)格式，并不是編程語言，在小程序中，JSON 扮演的靜態(tài)配置的角色。app.json 是當(dāng)前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時時間、底部tab等；每個頁面中的.json 文件用來表示每個小程序頁面相關(guān)的配置。

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

在小程序中，充當(dāng)類似HTML 的角色，提供了頁面結(jié)構(gòu)相關(guān)的組件、屬性及條件渲染能力。

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

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

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

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

（二）關(guān)鍵組件 與

1.

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

2.

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

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

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

軟件設(shè)計

（一）開發(fā)準(zhǔn)備

1.小程序的注冊與直播權(quán)限的開通

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

2.申請推流與播放域名

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

（二）應(yīng)用場景

1.教學(xué)直播

教師對教學(xué)內(nèi)容進行直播，不需要學(xué)生參與互動。對教學(xué)內(nèi)容進行保存，方便日后點播。

2.教學(xué)互動

教師對教學(xué)內(nèi)容進行講解，學(xué)生可以通過彈幕發(fā)言，并向老師申請發(fā)言權(quán)限，實現(xiàn)教學(xué)互動。

3.教學(xué)會議

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

（三）功能設(shè)計

1.推流碼率及延時設(shè)定

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

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

表1 屬性設(shè)置

一般而言，RTC 的視頻流延時為500ms 以內(nèi)，直播網(wǎng)絡(luò)的視頻流延時為1-3s，因此一般將延時min-cache 設(shè)為0，max-cache 設(shè)為5。

2.事件處理

當(dāng)直播組件狀態(tài)發(fā)生改變時，組件就會拋出相應(yīng)的狀態(tài)碼，通過組件的綁定事件屬性可以綁定一個事件處理函數(shù)，該函數(shù)可以監(jiān)聽組件模塊的內(nèi)部事件和異常通知，根據(jù)不同的狀態(tài)碼在邏輯層做出相應(yīng)的處理。

綁定事件包括：中的播放狀態(tài)變化事件、全屏變化事件、網(wǎng)絡(luò)狀態(tài)通知事件，中的狀態(tài)變化事件、網(wǎng)絡(luò)狀態(tài)通知、渲染錯誤事件、背景音開始播放事件、背景音進度變化事件及背景音播放完成事件。

（四）服務(wù)端搭建

1.流媒體服務(wù)器

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

例如，騰訊專門開發(fā)了云直播服務(wù)，主要面向云對接的直播服務(wù)，其優(yōu)點包括開源UI 快速集成、更低的卡頓及延時、AI 美化及識別能力的加成。騰訊云能夠為標(biāo)準(zhǔn)RTMP 提供UDP 加速能力，開啟加速后的推流質(zhì)量比標(biāo)準(zhǔn)RTMP 推流有更好的網(wǎng)絡(luò)波動抵抗力。

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

如果觀看直播的受眾分布地域較廣，還需要租用CDN服務(wù)商線路，對直播內(nèi)容進行分發(fā)。

相對于云服務(wù)器，自建流媒體服務(wù)器會產(chǎn)生更大成本，更高延時，當(dāng)業(yè)務(wù)量產(chǎn)生變化時，升級的成本也更大。

2.存儲服務(wù)器

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

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

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

值得注意的是，微信小程序視頻推流只支持Flv 或者Rtmp 格式的視頻文件，在上傳時應(yīng)當(dāng)先本地轉(zhuǎn)碼，實現(xiàn)過程如圖1。

圖1 自建服務(wù)器

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

總結(jié)

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

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