小程式開發進階:如何實現直播連麥

聲網Agora發表於2018-05-23

我們上週做了一場免費線上直播課,聲網Agora 研發工程師張乾澤分享了小程式直播元件的特點、實現小程式間連麥的方法,以及需要注意的產品化難題等乾貨。本文將為沒能觀看到直播,又正在做小程式開發的朋友們回顧一下演講內容,以及直播觀眾們提出的那些問題。(文末有視訊回顧地址,大家可配合觀看)

演講實錄

微信小程式從1.7開始,為開發者提供了兩個新介面,和,可以在小程式上實現單向的直播功能。通過與技術的結合,比如WebRTC,開發者們還可以進一步在小程式直播的基礎上實現連麥功能,這也就是我們今天要主要分享的進階經驗。

目前小程式直播連麥的應用場景有很多,比如:

首先是視訊通話。此前,該場景更多以原生應用的形態出現。現在,這兩個新的介面,讓小程式實現視訊通話成為了可能,尤其是在那些需要強互動、低延時的應用場景,如線上教育、企業會議等。

另一個是在直播連麥中,具體應用場景也有很多,跨直播間 PK 就是最典型的一種。這個功能我們可以在熊貓直播中看到。在直播時,一個主播可以與另一個主播進行視訊通話,並實時直播給兩個主播的觀眾觀看。

第三個是遊戲互動,比如線上抓娃娃。使用者此前可以通過原生應用、 PC 端瀏覽器或手機瀏覽器來玩抓娃娃,現在該場景已經擴充套件至小程式。

以上三種場景的共同點是,對延時、畫質要求都很高。此前之前更多是在網頁、PC 客戶端、移動端 App 上實現這些場景,但在網頁、手機瀏覽器中比較少。而微信小程式直播元件的出現,卻改變了這個現狀,為什麼呢?接下來我們會講到。

小程式直播連麥帶來了什麼改變?

首先,如果你做過H5端實時音視訊,你應該瞭解,其中最大的問題之一就是採集。為了解決該問題,最常見且可靠的方案就是使用 WebRTC ,因為它提供了一套介面可以讓開發者在瀏覽器中獲取攝像頭、麥克風的音視訊流,在瀏覽器中實現音視訊的採集,並轉成我們可用的資料,通過服務端推送給觀眾。

不過 WebRTC 方案也並非萬能,它在移動端也存在很多問題需要開發者自己解決,比如:

  • 相容性問題。儘管現在新版本已經得到了很多 PC 瀏覽器支援。但是在微信瀏覽器中,僅能在 Android 端使用。

  • 使用者體驗問題。一方面,在網頁端經常我們會收到“網頁想獲取攝像頭、麥克風許可權”的提示,以允許該頁面進行音視訊的採集。很多使用者可能會選擇“拒絕”,會直接導致產品不可用。另一方面,開發者需要保證網址是安全的,否則在一些移動應用內,比如在微信中無法獲取攝像頭許可權。

但是,這些情況在小程式中情況則不一樣。小程式提供了一套相對完善的介面。通過和兩個原生元件,可以實現音視訊的採集、推流、拉流、播放。同時,這兩個元件還支援自帶的美顏、美白、動態解析度調整等功能。

小程式開發進階:如何實現直播連麥

那麼問題來了,既然我們已經有了這兩個元件,是不是在小程式中增加它們之後,就可以釋出到線上直播連麥小程式,讓別人使用了呢?

答案是否定的。

你還需要搭建一個 rtmp 伺服器,然後生成一個 rtmp 服務地址,利用小程式元件推流和拉流,但是這樣的產品上線仍有些距離。而且,小程式的兩個元件僅僅提供了直播功能,並不支援實現連麥。如果還想要在小程式直播中進一步實現連麥,需要解決幾方面問題:

  • 可用性。如果很多人訪問你的伺服器,並同時發出推流、拉流的請求,你的伺服器很可能會掛掉,所以要提高可用性。

  • 信令控制。就像打電話一樣,連麥雙方需要知道對方的頻道號、rtmp 地址才能互通,這就需要加入信令系統來控制。

  • 互通性。比如,小程式之間如何視訊互通,小程式與原生 App 之間如何互通。

  • 音視訊互動質量。比如,視訊通話的低延時、畫面與音質的清晰等。

開發者們可以通過自研來解決以上問題,比如:

  • 增加更多伺服器節點,以提高可用性;
  • 在增加節點之後,通過優化路由排程策略,來保證直播連麥時可繞過網路擁塞;
  • 引入信令伺服器來支援連麥通話服務;
  • 通過編解碼演算法優化來進一步保證連麥的傳輸質量與低延時。

總之,為了保證連麥質量,可以優化的地方有很多。當然,如果你想直接繞過這些問題,也可以直接使用聲網小程式直播連麥 SDK。SDK 提供了一套簡單易用的API介面,幫開發者在小程式中快速實現直播連麥功能,並支援小程式與原生App間的互通。

小程式的侷限性

我們曾與很多開發者交流過,很多人曾提出,想在小程式直播中進行混流。例如,在小程式直播過程中,將客戶端的音樂與直播畫面進行混流。不過目前小程式目前還不支援客戶端的混流,暫時還沒有這樣的介面。但如果是小程式與原生應用連麥,我們可以在原生應用中進行混流,然後推流至小程式。

Q&A 環節摘錄

Q:小程式有客戶端日誌收集麼? A:小程式本身沒有該功能。小程式本身提供一些回撥方法,可以看到推流是否開啟、解析度、位元速率等資訊。使用者需要手動儲存或上傳伺服器。我們在 SDK 中提供了該功能,只需要監聽日誌介面,就可以將日誌發到回撥中,使用者再通過一些方法傳到自己的伺服器上。如果小程式在直播連麥中出現問題,可以通過日誌來排查。

Q:小程式在有電話通話的同時可以向外推流麼? A:並不支援。小程式會通過 App.js 來管理小程式的生命週期。開發者可以通過onShow和onHide兩個引數監聽小程式的顯示與隱藏。當有電話進來時,小程式會進入後臺,那麼直播畫面就會停止,並切換為一張開發者預先設定好的圖片。

Q:聲網小程式SDK的支援多少人通話? A:目前可支援最多6人同時連麥。

Q:連麥中,頭像排序如何設定?是否可以設定主頭像在直播收看端畫面最大? A:這涉及到畫面的佈局問題。大家可以通過 CSS 來控制哪個流要放大或縮小。我們在 Sample Code 中提供了一個叫 layout.js 的檔案,就是用來針對不同人數做不同佈局的檔案,大家可以參考一下。

Q:你們是否支援1080p? A:小程式在推流時可以通過設定最大或最小位元速率動態調整解析度,所以目前沒有有效的手段讓小程式推1080p的流。但是聲網的 SDK 在原生應用上支援1080p,在小程式與原生應用連麥時,可以通過原生應用推送1080p的視訊流給小程式。

點選這裡觀看回顧視訊

相關文章