我們上周做了一場免費在線直播課，聲網(wǎng)Agora 研發(fā)工程師張乾澤分享了小程序直播組件的特點、實現(xiàn)小程序間連麥的方法，以及需要注意的產(chǎn)品化難題等干貨。本文將為沒能觀看到直播，又正在做小程序開發(fā)的朋友們回顧一下演講內(nèi)容，以及直播觀眾們提出的那些問題。（文末有視頻回顧地址，大家可配合觀看）
演講實錄
微信小程序從1.7開始，為開發(fā)者提供了兩個新接口，<live-pusher>和<live-player>，可以在小程序上實現(xiàn)單向的直播功能。通過與技術(shù)的結(jié)合，比如WebRTC，開發(fā)者們還可以進一步在小程序直播的基礎(chǔ)上實現(xiàn)連麥功能，這也就是我們今天要主要分享的進階經(jīng)驗。
目前小程序直播連麥的應(yīng)用場景有很多，比如：
首先是視頻通話。此前，該場景更多以原生應(yīng)用的形態(tài)出現(xiàn)?，F(xiàn)在，這兩個新的接口，讓小程序?qū)崿F(xiàn)視頻通話成為了可能，尤其是在那些需要強交互、低延時的應(yīng)用場景，如在線教育、企業(yè)會議等。
另一個是在直播連麥中，具體應(yīng)用場景也有很多，跨直播間 PK 就是最典型的一種。這個功能我們可以在熊貓直播中看到。在直播時，一個主播可以與另一個主播進行視頻通話，并實時直播給兩個主播的觀眾觀看。
第三個是游戲互動，比如在線抓娃娃。用戶此前可以通過原生應(yīng)用、 PC 端瀏覽器或手機瀏覽器來玩抓娃娃，現(xiàn)在該場景已經(jīng)擴展至小程序。
以上三種場景的共同點是，對延時、畫質(zhì)要求都很高。此前之前更多是在網(wǎng)頁、PC 客戶端、移動端 App 上實現(xiàn)這些場景，但在網(wǎng)頁、手機瀏覽器中比較少。而微信小程序直播組件的出現(xiàn)，卻改變了這個現(xiàn)狀，為什么呢？接下來我們會講到。
小程序直播連麥帶來了什么改變？
首先，如果你做過H5端實時音視頻，你應(yīng)該了解，其中最大的問題之一就是采集。為了解決該問題，最常見且可靠的方案就是使用 WebRTC ，因為它提供了一套接口可以讓開發(fā)者在瀏覽器中獲取攝像頭、麥克風(fēng)的音視頻流，在瀏覽器中實現(xiàn)音視頻的采集，并轉(zhuǎn)成我們可用的數(shù)據(jù)，通過服務(wù)端推送給觀眾。
不過 WebRTC 方案也并非萬能，它在移動端也存在很多問題需要開發(fā)者自己解決，比如：
兼容性問題。盡管現(xiàn)在新版本已經(jīng)得到了很多 PC 瀏覽器支持。但是在微信瀏覽器中，僅能在 Android 端使用。
用戶體驗問題。一方面，在網(wǎng)頁端經(jīng)常我們會收到“網(wǎng)頁想獲取攝像頭、麥克風(fēng)權(quán)限”的提示，以允許該頁面進行音視頻的采集。很多用戶可能會選擇“拒絕”，會直接導(dǎo)致產(chǎn)品不可用。另一方面，開發(fā)者需要保證網(wǎng)址是安全的，否則在一些移動應(yīng)用內(nèi)，比如在微信中無法獲取攝像頭權(quán)限。
但是，這些情況在小程序中情況則不一樣。小程序提供了一套相對完善的接口。通過<live-pusher>和<live-player>兩個原生組件，可以實現(xiàn)音視頻的采集、推流、拉流、播放。同時，這兩個組件還支持自帶的美顏、美白、動態(tài)分辨率調(diào)整等功能。
那么問題來了，既然我們已經(jīng)有了這兩個組件，是不是在小程序中增加它們之后，就可以發(fā)布到線上直播連麥小程序，讓別人使用了呢？
答案是否定的。
你還需要搭建一個 rtmp 服務(wù)器，然后生成一個 rtmp 服務(wù)地址，利用小程序組件推流和拉流，但是這樣的產(chǎn)品上線仍有些距離。而且，小程序的兩個組件僅僅提供了直播功能，并不支持實現(xiàn)連麥。如果還想要在小程序直播中進一步實現(xiàn)連麥，需要解決幾方面問題：
可用性。如果很多人訪問你的服務(wù)器，并同時發(fā)出推流、拉流的請求，你的服務(wù)器很可能會掛掉，所以要提高可用性。
信令控制。就像打電話一樣，連麥雙方需要知道對方的頻道號、rtmp 地址才能互通，這就需要加入信令系統(tǒng)來控制。
互通性。比如，小程序之間如何視頻互通，小程序與原生 App 之間如何互通。
音視頻交互質(zhì)量。比如，視頻通話的低延時、畫面與音質(zhì)的清晰等。
開發(fā)者們可以通過自研來解決以上問題，比如：
- 增加更多服務(wù)器節(jié)點，以提高可用性；
- 在增加節(jié)點之后，通過優(yōu)化路由調(diào)度策略，來保證直播連麥時可繞過網(wǎng)絡(luò)擁塞；
- 引入信令服務(wù)器來支持連麥通話服務(wù)；
- 通過編解碼算法優(yōu)化來進一步保證連麥的傳輸質(zhì)量與低延時。
總之，為了保證連麥質(zhì)量，可以優(yōu)化的地方有很多。當(dāng)然，如果你想直接繞過這些問題，也可以直接使用聲網(wǎng)小程序直播連麥 SDK。SDK 提供了一套簡單易用的API接口，幫開發(fā)者在小程序中快速實現(xiàn)直播連麥功能，并支持小程序與原生App間的互通。
小程序的局限性
我們曾與很多開發(fā)者交流過，很多人曾提出，想在小程序直播中進行混流。例如，在小程序直播過程中，將客戶端的音樂與直播畫面進行混流。不過目前小程序目前還不支持客戶端的混流，暫時還沒有這樣的接口。但如果是小程序與原生應(yīng)用連麥，我們可以在原生應(yīng)用中進行混流，然后推流至小程序。
Q&A 環(huán)節(jié)摘錄
Q：小程序有客戶端日志收集么？
A：小程序本身沒有該功能。小程序本身提供一些回調(diào)方法，可以看到推流是否開啟、分辨率、碼率等信息。用戶需要手動保存或上傳服務(wù)器。我們在 SDK 中提供了該功能，只需要監(jiān)聽日志接口，就可以將日志發(fā)到回調(diào)中，用戶再通過一些方法傳到自己的服務(wù)器上。如果小程序在直播連麥中出現(xiàn)問題，可以通過日志來排查。
Q：小程序在有電話通話的同時可以向外推流么？
A：并不支持。小程序會通過 App.js 來管理小程序的生命周期。開發(fā)者可以通過onShow和onHide兩個參數(shù)監(jiān)聽小程序的顯示與隱藏。當(dāng)有電話進來時，小程序會進入后臺，那么直播畫面就會停止，并切換為一張開發(fā)者預(yù)先設(shè)置好的圖片。
Q：聲網(wǎng)小程序SDK的支持多少人通話？
A：目前可支持最多6人同時連麥。
Q：連麥中，頭像排序如何設(shè)置？是否可以設(shè)置主頭像在直播收看端畫面最大？
A：這涉及到畫面的布局問題。大家可以通過 CSS 來控制哪個流要放大或縮小。我們在 Sample Code 中提供了一個叫 layout.js 的文件，就是用來針對不同人數(shù)做不同布局的文件，大家可以參考一下。
Q：你們是否支持1080p？
A：小程序在推流時可以通過設(shè)置最大或最小碼率動態(tài)調(diào)整分辨率，所以目前沒有有效的手段讓小程序推1080p的流。但是聲網(wǎng)的 SDK 在原生應(yīng)用上支持1080p，在小程序與原生應(yīng)用連麥時，可以通過原生應(yīng)用推送1080p的視頻流給小程序。
