微信小程序直播如何接入?開源代碼接入案例分享

小程序直播組件接入指引

1、簡介

小程序直播,是微信提供給小程序開發者的直播組件。經過調用該組件,商家能夠在小程序中實現直播功能。html

按下面的使用說明接入,在你的小程序中引入直播組件。json

2、使用方法說明

1.【直播組件】如何引入

版本限制:微信客戶端版本 7.0.7 及以上(基礎庫版本 2.9.x 及以上支持同層渲染)能夠觀看直播及使用直播間的功能,低版本剛進入直播間時會提示用戶升級微信客戶端版本(低版本只能觀看直播,沒法使用直播間的功能)。小程序

在分包內引入【直播組件】live-player-plugin 代碼包,項目根目錄的 app.json 引用,示例代碼以下:api

{   "subpackages": [     {       "root": "packageA",       "pages": [         "pages/home/home"       ],       "plugins": {         "live-player-plugin": {           "version": "1.0.0", // 填寫該直播組件最新版本號,微信開發者工具調試時可獲取最新版本號           "provider": "wx2b03c6e691cd7370" // 必須填該直播組件appid,該示例值即爲直播組件appid         }       }     }   ] }

2.【直播組件】如何使用

按第1步的方法把組件代碼包配置引入後,便可直接經過 連接地址跳轉到直播組件頁面(即爲進直播間頁面) 連接地址須要帶上直播房間id;房間id可經過下面 【獲取直播房間列表】緩存

API獲取,示例代碼以下:安全

Go to Live Player page

經過該連接可跳轉到直播組件頁面(當前頁面入口僅開放‘live-player-plugin’)。微信

示例效果圖以下:微信開發

3、其餘相關組件、接口和攜帶參數

1.【訂閱】組件

功能解釋:用戶進入直播間內,可對一場未開播的直播進行單次訂閱,開播時直播組件會自動下發開播提醒給用戶, 無需開發者額外開發app

組件使用:若是須要 在直播組件頁之外小程序其餘頁面也有一樣的開播提醒的功能,能夠引入【訂閱】組件subscribe;需在page頁面(如home頁面)的 home.json 引用訂閱組件,示例代碼以下:ide

{   "usingComponents": {     "subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"   } }

而後即可在home.wxml裏使用訂閱組件,其中直播房間id可經過;房間id可經過下面【獲取直播房間列表】API獲取

 

2. 獲取直播狀態接口

接口說明:首次獲取立馬返回直播狀態,日後間隔1分鐘或更慢的頻率去輪詢獲取直播狀態

直播狀態說明:

  • 101直播中:表示主播正常開播,直播正常的狀態
  • 102未開始:表示主播還未開播
  • 103已結束:表示在直播端點擊【結束】按鈕正常關閉的直播,或直播異常15分鐘後系統強制結束的直播
  • 104禁播:表示因違規受到運營處罰被禁播
  • 105暫停中:表示在MP小程序後臺-控制檯內操做暫停了直播
  • 106異常:表示主播離開、切後臺、斷網等狀況,該直播被斷定爲異常狀態,15分鐘內恢復便可回到正常直播中的狀態;若是15分鐘後還未恢復,直播間會被系統強制結束直播
  • 107已過時:表示直播間一直未開播,且已達到在MP小程序後臺建立直播間時填寫的直播計劃結束時間,則該直播被斷定爲過時不能再開播

調用方法:若要調用【獲取直播狀態】接口getLiveStatus,需在小程序頁面頂部引用【直播組件】live-player-plugin,示例代碼以下:

let livePlayer = requirePlugin('live-player-plugin') // 引入獲取直播狀態接口 // 首次獲取立馬返回直播狀態,日後間隔1分鐘或更慢的頻率去輪詢獲取直播狀態 const roomId = xxx // 房間id livePlayer.getLiveStatus({ room_id: roomId }) .then(res => {   // 101: 直播中, 102: 未開始, 103: 已結束, 104: 禁播, 105: 暫停中, 106: 異常, 107:已過時    const liveStatus = res.liveStatus }) .catch(err => {   console.log(err) })

3. 攜帶參數

版本限制:直播組件版本1.0.1及以上支持攜帶如下參數

1) shareTicket:分享直播間卡片到微信羣,點擊此卡片後能夠在 App onShow 裏獲取該參數

2) room_id:點擊直播組件頁面裏的貨架商品跳轉到商家小程序的商品詳情頁面時,會帶上房間號參數

4.【獲取直播房間列表】接口,僅供後臺調用

接口規則:該接口僅供商家後臺調用,調用限額500次/天,建議開發者本身作緩存(此接口與下面 【獲取回放視頻】接口共用500次/天限制,請合理分配調用頻次)。

請求URL:http://api.weixin.qq.com/wxa/business/getliveinfo?access_token=

請求方式:POST

請求示例:

Request

{  "start": 0, // 起始拉取房間,start=0表示從第1個房間開始拉取  "limit": 10 // 每次拉取的個數上限,不要設置過大,建議100之內 }

Response

{  "errcode": 0, // errcode=0表明成功;errcode=1表明未建立直播房間  "errmsg": "ok",  "room_info": [{   "name": "直播房間名",   "roomid": 1,   "cover_img": "http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\/Rl1RuuhdstSfZa8EEljedAYcbtX3Ejpdl2et1tPAQ37bdicnxoVialDLCKKDcPBy8Iic0kCiaiaalXg3EbpNKoicrweQ\/0?wx_fmt=jpeg",   "live_satus": 101,    "start_time": 1568128900,   "end_time": 1568131200,   "anchor_name": "李四",   "anchor_img": "http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\/Rl1RuuhdstSfZa8EEljedAYcbtX3Ejpdlp0sf9YTorOzUbGF9Eib6ic54k9fX0xreAIt35HCeiakO04yCwymoKTjw\/0?wx_fmt=jpeg",   "goods":[               {       "cover_img":"http://mmbiz.qpic.cn/mmbiz_png/FVribAGdErI2PmyST9ZM0JLbNM48I7TH2FlrwYOlnYqGaej8qKubG1EvK0QIkkwqvicrYTzVtjKmSZSeY5ianc3mw/0?wx_fmt=png",       "url":"pages/index/index.html",       "price":1100,       "name":"fdgfgf"     }    ]  }

返回字段:

 
  • name 房間名
  • roomid 房間id
    注:需先在小程序MP後臺建立直播房間,不然會報錯(錯誤碼1)
  • cover_img 封面圖片url
  • start_time 直播計劃開始時間,列表按照 start_time 降序排列
  • end_time 直播計劃結束時間
  • anchor_name 主播名
  • goods 商品列表
  • live_status 直播狀態   101: 直播中, 102: 未開始, 103: 已結束, 104: 禁播, 105: 暫停中, 106: 異常,107:已過時(直播狀態解釋可參考【獲取直播狀態】接口)

5.【獲取回放源視頻】接口,僅供後臺調用

接口規則:該接口僅供商家後臺調用, 調用限額500次/天,此接口與上面 【獲取房間列表】接口 共用500次/天限制,請合理分配調用頻次)。

接口說明:

  • 該接口可在直播結束後拿到回放源視頻(直播結束後大約10分鐘會生成回放,源視頻無評論等內容)
  • 拿到源視頻後須要開發者自行開發、使用回放視頻
  • 若是把源視頻直接放在小程序上使用,須要小程序具有視頻資質(具體資質要求請參考《小程序開發的類目服務》)

後續官方會直接提供無需開發的直播回放功能,敬請期待。

請求URL:http://api.weixin.qq.com/wxa/business/getliveinfo?access_token=

請求方式:POST

請求示例:

Request

{   "action": "get_replay", // 獲取回放   "room_id": 354, // 直播間id   "start": 0, // 起始拉取視頻,start=0表示從第1個視頻片斷開始拉取   "limit": 10 // 每次拉取的個數上限,不要設置過大,建議100之內 }

Response

{   "live_replay": [     {       "expire_time": "2020-11-11T03:49:55Z", // 回放視頻 url 過時時間       "create_time": "2019-11-12T03:49:55Z", // 回放時間建立時間       "media_url": "http://xxxxx.vod2.myqcloud.com/xxxxx/xxxxx/f0.mp4" // 回放視頻     }   ],   "errcode": 0,   "total": 1,   "errmsg": "ok" } // 一場直播可能會產生多個視頻片斷。

4、其餘說明

一、直播間小程序碼

說明:

  • 小程序引入直播組件後必須進行一次小程序發佈上線,不然小程序碼不生效
  • 在MP小程序直播後臺建立好直播間後,能夠直接拿到直播間分享小程序碼,無需額外開發

在跳轉進入直播間的路徑加上 type=9 標識場景入口爲小程序碼:

plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=[直播房間id]&type=9

二、商家公衆號文章添加小程序卡片

說明:商家在公衆號文章中添加跳轉進入直播間的小程序卡片時,須要作如下配置(不然直播間左上角返回鍵將失效):

在跳轉進入直播間的路徑加上 type=10 標識場景入口爲小程序卡片:

plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=[直播房間id]&type=10

三、商品詳情頁面需添加返回按鈕

點擊直播組件頁面裏的貨架商品跳轉到商家小程序的商品詳情頁面後, 爲了不用戶沒法再返回直播間,商家需在小程序商品詳情頁面左上角加上返回按鈕,用於返回到直播組件頁面。

四、快速更新直播組件版本的方法

商家小程序對應的管理員微信號 收到【公衆平臺安全助手】下發的直播組件版本更新的服務通知後,可點擊通知進行快速發佈,移動端便可快速更新小程序內直播組件的新版本,無需修改代碼或從新提交審覈。

 

開源案例

以網上看到的來客推的爲案例

修改小程序端代碼,在app.json裏面新增以下代碼:

在「sitemapLocation」: 「sitemap.json」 這一段的後面加一個逗號 「,」 再加下面這段代碼:

"plugins": {

"live-player-plugin": {

"version": "1.0.4",

"provider": "wx2b03c6e691cd7370"

}

}

五、在來客系統後臺,「插件列表」-》「直播間」

第一步:

第二步:修改直播房間ID,如何獲取房間ID?往下看

獲取房間ID,進入微信後臺 mp.weixin.qq.com ,建立一個直播間

如何新增直播插件

相關文章
相關標籤/搜索