功能實現(xiàn)流程
本文介紹使用ZEGO SDK 開發(fā)電商場景的小程序，具備音視頻直播、IM互動、商品列表推送、美顏等功能，可滿足商家多種直播賣貨需求，可參考該組件實現(xiàn)自己的需求。
- 若小程序具備符合live-pusher、live-player的類目，則可以使用live-pusher和live-player，live-room 的isNative屬性傳入true。詳細流程可參考?快速開始
- 除此之外，若具備“電商平臺”或“教育”類目，則可以使用插件“即構(gòu)直播助手”的zego-pusher 和 zego-player，isNative 屬性傳入false。插件的使用詳見?小程序直播插件
音視頻直播：提供高清低延時的直播體驗，支持設(shè)置最大、最小碼率，自動適配標清、高清、超清分辨率，直播流媒體可采用低延遲，直播延時遠低于CDN分發(fā)，實現(xiàn)主播語音畫面、商品列表、觀眾IM消息三端同步；
IM互動：提供IM消息互動功能，觀眾發(fā)送文字消息與主播互動，支持消息實時滾動刷新；消息的使用可參考?IM
商品列表：提供商品列表推送功能，商家可以自定義商品的相關(guān)信息（簡介、圖片、列表、鏈接等），生成商品列表，主播直播時可同步推送列表中的商品鏈接，引導(dǎo)觀眾下單購買；
美顏濾鏡：支持美顏功能，幫助改善非專用直播間的光線、清晰度等難題。
設(shè)備控制：支持切換攝像頭、麥克風。
集成SDK + 插件
詳見?集成SDK + 插件
推拉流
推流步驟如下：
- 觸發(fā)推流
- 調(diào)用 SDK 的 startPublishingStream 獲取 streamID 對應(yīng)的推流地址
- 在 SDK 的回調(diào) onStreamUrlUpdate 中獲推流地址
- 將步驟 3 中獲取的推流地址設(shè)置為 zego-pusher 的 url
- 獲取推流組件實例，然后調(diào)用實例 的 start() 錄制視頻
- 在 bindstatechange 綁定的回調(diào)函數(shù)中，調(diào)用 SDK 提供的 API updatePlayerState 將推流事件透傳給 SDK
- 在 SDK 提供的 publisherStateUpdate 回調(diào)中處理推流的開始、失敗狀態(tài)
拉流步驟如下：
- 觸發(fā)拉流
- 調(diào)用 SDK 的 startPlayingStream 獲取 streamID 對應(yīng)的播放地址
- 在 SDK 的回調(diào) onStreamUrlUpdate 中獲取拉流地址
- 將步驟 3 中獲取的推流地址設(shè)置為 zego-player 的 url, 流ID設(shè)置為sid
- 獲取拉流組件實例，然后調(diào)用實例 的 play() 播放視頻 或者設(shè)置拉流組件的autoplay 屬性為true，實現(xiàn)自動拉流。
- 在 bindstatechange 綁定的回調(diào)函數(shù)中，調(diào)用 SDK 提供的 API updatePlayerState 將推流事件透傳給 SDK
- 在 SDK 提供的 onPlayStateUpdate 回調(diào)中處理播推、拉流的開始、失敗狀態(tài)
商品推送
提供商品列表推送功能，商家可以自定義商品的相關(guān)信息（簡介、圖片、列表、鏈接等），生成商品列表，主播直播時可同步推送列表中的商品鏈接，引導(dǎo)觀眾下單購買； 在page/room/index.js中，有一個商品列表，客戶可以自定義商品的相關(guān)信息（簡介、圖片、價格、鏈接等），并提供符合相應(yīng)數(shù)據(jù)格式的接口。商品鏈接可以跳到小程序內(nèi)的商品詳情頁，也可以使用web-view鏈接到自己的域名下的商品頁面。 商品結(jié)構(gòu)如下：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
{ name: 'Givenchy/紀梵希高定香榭天鵝絨唇膏', img: '../../resource/m0.png', price: '345', id: 0, link: { path: "../web/index", extraDatas: { url: 'https://shop-ecommerce.yunyikao.com/product.html' } } },
-
注意： 使用webview需要在小程序管理后臺配置業(yè)務(wù)域名，此時需要下載一個校驗文件，將該文件放置于域名根目錄下。
-
域名配置路徑：微信公眾平臺?-> 設(shè)置 -> 開發(fā)設(shè)置 -> 業(yè)務(wù)域名。如圖所示：
IM
提供IM消息互動功能，觀眾發(fā)送文字消息與主播互動，支持消息實時滾動刷新；消息的使用可參考?IM
美顏
支持美顏功能，通過屬性beauty、whiteness控制，詳見?API文檔
設(shè)備控制
支持切換攝像頭、麥克風。文章來源：http://www.zghlxwxcb.cn/news/detail-830070.html
demo 中相關(guān)功能在組件components/live-room中，在pages/room 頁面中引入了live-room。文章來源地址http://www.zghlxwxcb.cn/news/detail-830070.html
- live-room 組件的相關(guān)屬性如下：
| 屬性 | 類型 | 說明 |
|---|---|---|
| isNative | Boolean | 是否使用插件 |
| liveAppID | String | 即構(gòu)的appID |
| userID | String | 用戶id, 唯一 |
| token | String | 登錄認證的 |
| loginType | String | “anchor” 或“audience” |
| roomID | String | 房間號，全局唯一，只支持長度不超過 128 字節(jié) 的數(shù)字，下劃線，字母 |
| wsServerURL | String | 即構(gòu)server 地址 |
| logServerURL | String | 即構(gòu)日志上報地址 |
| navBarHeight | Number | 導(dǎo)航欄高度 |
| preferPublishSourceType | Number | 推流選項，默認為即構(gòu)服務(wù)器 |
| preferPlaySourceType | Number | 拉流選項，默認為即構(gòu)服務(wù)器 |
| bindRoomEvent | EventHandle | 回調(diào)事件 |
- 登錄房間需要token，在開發(fā)者的業(yè)務(wù)服務(wù)器實現(xiàn)token邏輯，詳見房間登錄安全。
- 示例demo 中有房間列表只是demo展示用的，客戶需要根據(jù)業(yè)務(wù)邏輯在自己的服務(wù)端實現(xiàn)。
到了這里，關(guān)于音視頻解決方案(二)：直播電商場景最佳實踐的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
