小程序開放的實時音視頻能力，封裝了音視頻採集、前處理、編碼、推流、拉流、解碼和渲染等功能，大大降低了音視頻的開發門檻。在小程序直播的開發中，微信對外提供<live-pusher>和<live-player> ，其中<live-pusher>是視頻推流的主要功能組件，<live-player>的主要功能則是播放，所有接口都是以集成封裝的形式提供，開發者可以依據需求在一定範圍內靈活設置使用。
小程序直播的類型：
業內直播產品目前的分類主要是基於觀衆的可參與功能進行劃分，大致可以歸爲單向直播、連麥直播、視頻互動直播三類，以下做一個簡單的描述：
- 單向直播
主播開啓視頻直播場景，觀衆端觀看視頻，但僅可通過文字形式與主播互動，該場景下對延遲的容忍度較高，例如：活動直播、安防監控等場景使用的就是單向直播模式；
- 連麥互動直播
主播開啓直播服務後，觀衆可以在觀看主播視頻直播服務的同時通過文字形式與主播進行交流互動，在特定時刻觀衆不滿足於僅能通過文字與主播進行互動時，可以申請與主播進行音視頻互動，例如：映客、花椒、虎牙等平臺多使用的都是連麥互動直播模式；
- 視頻互動直播
主播開啓視頻互動直播服務後，觀衆加入房間後直接參與互動，該場景下對音視頻的流暢性要求較高，例如：語聊房、視頻相親等場景使用的即是視頻互動直播模式；
小程序目前支持的推流協議爲flv或Rtmp協議，僅可以支持單向直播的視頻需求，若需要實現連麥直播或視頻互動類產品，就必須採取網關形式接入。小程序網關的主要作用是將rtmp或flv協議轉換爲對應廠商的實時協議。
即構基於自研的強大音視頻引擎，實現了Android、IOS、PC/Mac、微信小程序、H5等全終端設備互連互通的音視頻雲服務體系，即構音視頻雲服務包含了小程序網關的協議轉換、流媒體接收分發、混流、錄製等等多種功能。功能實現參見即構-小程序功能集成說明：https://doc.zego.im/CN/387.html
基於即構SDK實現小程序直播的方法：
1、初始化 SDK
-
ZegoLive/pages/liveroom/room/room.js -
// 聲明變量var ZegoSDK = require("../../../js/jZego-wx-1.0.2.js");var zg; -
// 初始化實例 -
zg = new ZegoSDK.ZegoClient(); -
// 配置必要參數 -
zg.config({ -
appid: appid, // 必填，應用id，請從 即構管理控制檯-https://console.zego.im/acount/register 獲取 -
idName: idName, // 必填，用戶自定義id，全局唯一 -
nickName: nickName, // 必填，用戶自定義暱稱 -
remoteLogLevel: 1, // 上傳日誌最低級別，建議跟 logLevel 一致 -
logLevel: 1, // 日誌級別，debug:0,info:1,warn:2,error:3,report:99,disable:100（數字越大，日誌越少），建議選擇 1 -
server: server // 必填，接入服務器地址，請從 即構管理控制檯-https://console.zego.im/acount/register 獲取 -
logUrl: logUrl // 必填，logServer 地址，請從 即構管理控制檯-https://console.zego.im/acount/register 獲取 -
});
2、登錄房間
登錄房間成功是後續所有操作的前提。即構音視頻雲小程序中演示源碼片段如下，僅供參考：
-
ZegoLive/pages/liveroom/room/room.js -
zg.login(self.data.roomID, self.data.loginType == "anchor" ? 1 : 2, token, function (streamList) { -
// 登錄成功處理 -
console.log('>>>[liveroom-room] login succeeded'); -
}, function (err) { -
// 登錄失敗處理 -
console.log('>>>[liveroom-room] login failed, error is: ', err); -
});
3、開始推流
主播登錄房間成功後，根據業務邏輯準備推流。使用 SDK 推流播放需要遵循如下步驟：觸發推流，調用 SDK的 startPublishingStream 獲取 streamID 對應的推流地址，在 SDK 的回調 onStreamUrlUpdate 中獲推流地址，調用微信小程序的 wx.createLivePusherContext 創建 live-pusher ，將步驟獲取的推流地址設置爲 live-pusher 的 url，然後調用 live-pusher 的 start() 錄製視頻。
演示源碼片段如下，僅供參考：
-
ZegoLive/pages/liveroom/room/room.js -
// 1/2. 主播登錄房間成功後觸發推流，調用 SDK 的 startPublishingStream 獲取 streamID 對應的推流地址 -
zg.login(self.data.roomID, self.data.loginType == "anchor" ? 1 : 2, token, function (streamList) { -
// 主播登錄成功即推流 -
if (self.data.loginType == 'anchor') { -
console.log('>>>[liveroom-room] anchor startPublishingStream, publishStreamID: ' + self.data.publishStreamID); -
zg.setPreferPublishSourceType(1); // 0：推流到 CDN，觀衆拉流延遲在 2 秒左右；1：推流到 ZEGO 服務器，延遲在 400ms 左右 -
zg.startPublishingStream(self.data.publishStreamID, ''); -
} -
}, function (err) { -
console.log('>>>[liveroom-room] login failed, error is: ', err); -
}); -
c// 3. 在 SDK 的回調 onStreamUrlUpdate 中獲取推流地址// type: {play: 0, publish: 1}; -
zg.onStreamUrlUpdate = function (streamid, url, type) { -
console.log(">>>[liveroom-room] zg onStreamUrlUpdate, streamId: " + streamid + ', type: ' + (type == 0 ? 'play' : 'publish') + ', url: ' + url); -
... -
};y -
// 4. 調用微信小程序的 wx.createLivePusherContext 創建 live-pusher ，將步驟 3 中獲取的推流流地址設置爲 live-player 的 url，然後調用 live-pusher 的 start 錄製視頻 -
setPushUrl: function (url) { -
console.log('>>>[liveroom-room] setPushUrl: ', url); -
var self = this; -
... -
self.setData({ -
pushUrl: url, -
pusherVideoContext : wx.createLivePusherContext("video-livePusher", self), -
}, function () { -
self.data.pusherVideoContext.stop(); -
self.data.pusherVideoContext.start(); -
}); -
},
4、開始拉流
觀衆登錄房間成功後，根據業務邏輯準備拉流。使用 SDK 拉流播放需要遵循如下步驟：觸發拉流，調用SDK的 startPlayingStream 獲取streamID 對應的播放地址，在SDK的回調 onStreamUrlUpdate 中獲取拉流地址，調用微信小程序的 wx.createLivePlayerContext 創建 live-player ，將獲取的推流地址設置爲 live-player 的 src，然後調用 live-player 的 play() 播放視頻。此步驟也可以設置 live-player 爲 autoplay，此時播放器會自動播放，無需再手動調用 play()。
演示源碼片段如下，僅供參考：
-
ZegoLive/pages/liveroom/room/room.js -
// 1. 登錄後拉流 -
zg.login(self.data.roomID, self.data.loginType == "anchor" ? 1 : 2, token, function (streamList) { -
// 房間內已經有流，拉流 -
self.startPlayingStreamList(streamList); -
}, function (err) { -
console.log('>>>[liveroom-room] login failed, error is: ', err); -
}); -
// 2. 通過 SDK 獲取 streamID 對應的播放地址 -
startPlayingStreamList: function (streamList) { -
var self = this; -
... -
// 設置拉流目標地址，可選，0：auto；1：從 bgp 拉流 -
zg.setPreferPlaySourceType(1); -
// 獲取每個 streamID 對應的拉流 url -
var playStreamList = self.data.playStreamList; -
for (var i = 0; i < streamList.length; i++) { -
var streamID = streamList[i].stream_id; -
// 調用 SDK 的 startPlayingStream 獲取 streamID 對應的播放地址 -
zg.startPlayingStream(streamID); -
} -
}, -
// 3. 在 SDK 的回調 onStreamUrlUpdate 中獲取拉流地址// type: {play: 0, publish: 1}; -
zg.onStreamUrlUpdate = function (streamid, url, type) { -
console.log(">>>[liveroom-room] zg onStreamUrlUpdate, streamId: " + streamid + ', type: ' + (type == 0 ? 'play' : 'publish') + ', url: ' + url); -
... -
}; -
// 4. 調用微信小程序的 wx.createLivePlayerContext 創建 live-player ，將步驟 3 中獲取的拉流地址設置爲 live-player 的 src，然後調用 live-player 的 play() 播放視頻。此步驟也可以設置 live-player 爲 autoplay，此時播放器會自動播放，無需再手動調用 play() -
setPlayUrl: function (streamid, url, self) { -
... -
// 相同 streamid 的源不存在，創建新 player -
if (!isStreamRepeated) { -
streamInfo['streamID'] = streamid; -
streamInfo['playUrl'] = url; -
streamInfo['playContext'] = wx.createLivePlayerContext(streamid, self); -
self.data.playStreamList.push(streamInfo); -
} -
... -
self.setData({ -
playStreamList: self.data.playStreamList, -
}, function(){}); -
},
基於即構SDK，簡單4步就能構建小程序直播產品，實現視頻直播功能。小程序商家通過增加直播互動功能，可進一步增加用戶粘性，促進銷售轉化。