如何基於Agora Web SDK實現小程式互動連麥
微信在12月底開放了小程式的直播功能，主要面向社交、教育、醫療、政務民生、金融應用場景。目前已經有支援直播的小程式上線，比如實現音訊直播的“荔枝FM播客”，以及花椒的“百萬贏家”小程式。
在小程式中，我們可以實現兩種直播：
單向直播，觀眾端僅能通過文字評論互動
連麥直播，支援音視訊互動
單向直播就是我們常見的類似秀場的模式，主播推流，觀眾端可以是隻有觀看許可權，也可以支援觀眾通過文字評論與主播互動。這種直播方式對延時不敏感。而連麥直播模式對延時要求較高，開發者可以自己搭建伺服器，也可以自選任意第三方雲服務。
本文中，我們將詳解小程式直播的實現原理，分為以下幾個部分：
小程式直播開發的元件與介面
小程式單向直播
連麥直播的實現
一、小程式直播的元件與介面
想開發小程式直播， 就需要小程式的基礎庫版本升級到 1.7.0 以上，開發中我們會使用到兩個新元件和兩個新介面：
<live-pusher>元件，主要功能是錄製，進行推流。一個頁面只能有一個<live-pusher>
<live-player>元件，主要功能是播放。
wx.createLivePusherContext(domId, this)介面，主要控制live-pusher元件的推流。
wx.createLivePlayerContext(domId, this)介面，主要控制live-player元件的播放。
二、小程式單向直播
小程式單向直播利用<live-pusher>和<live-player>元件即可實現。根據官方資料顯示，小程式對CDN沒有限制，開發者可以使用RTMP協議和http-flv協議接入CDN，也可以使用HLS協議與小程式的<video>接入CDN。
假設你已經有選定的雲服務，並計劃通過OBS來進行直播，那麼實現直播的步驟大致為四步：
申請開通小程式直播介面
在服務端生成推流地址
進入OBS設定“流”的“自定義流媒體伺服器”
在小程式端，利用<live-player>元件j進行配置
程式碼如：
<live-player src="//12345678" mode="live" autoplay style="width: 300px; height: 200px;" /><live-pusher>和<live-player>屬於原生元件，不能通過CSS z-index設定層級順序，要是需要在該層級上堆疊元素，可通過<cover-view>和<cover-image>實現。
CSS動畫對<live-pusher>和<live-player>無效
scroll-view、swiper、picker-view、movable-view中不可使用<live-player>和<live-pusher>
三、連麥直播的實現
如果你想在小程式上實現連麥直播，可以基於Agora Web SDK與微信小程式Webview控制元件輕鬆實現。
Webview控制元件是一個和當前頁面一樣大小的容器，容器可顯示src引用的url的內容。其功能類似於HTML的<iframe>框架。但Webview不支援自定義邊框等樣式，而是直接自動鋪滿小程式頁面。
具體實現步驟如下：
準備一個集成了Agora Web SDK的線上環境
準備一個小程式開發者賬號
在小程式控制介面將步驟1的域名加入信任列表
線上環境的域名提前進行備案，且以com結尾，不然攝像頭許可權會獲取失敗。
將Webview的src改為步驟1的頁面地址
Webview直播實現程式碼只有簡單的一行：
<!-- wxml -->
<!-- src地址是需要指向的網站地址 -->
<web-view src=“https://mp.weixin.qq.com/"></web-view>由於作業系統與Webview控制元件的原因，這個方法有幾個需要注意的地方：
微信小程式基礎庫：支援1.6.4以上版本，以下版本需做相容
Webview的使用：對個人型別和海外型別的小程式暫不支援，每個網頁只能有一個Webview
指向域名備案：域名必須為https協議且經過ICP備案
域名修改次數：一個小程式最多可新增20個域名，一年可修改50次
作業系統限制：由於iOS系統限制 ，此方法僅適用於Android
為了方便大家快速實現自己的小程式，我們已經做好了一個demo，開發者只需修改幾行程式碼即可實現。
歡迎訪問Github獲取：https://github.com/AgoraIO/Agora-WebRTC-WeChat-Miniapp-Demo