透過直播組件實現小程式直播功能

一、導語

微信為小程式開發者提供了直播元件，透過呼叫該元件，商家可以在小程式中實現直播功能。

（學習影片分享：程式設計影片）

下面我們來介紹如何在小程式中引入直播元件。

二、使用方法說明

1.  【直播元件】如何介紹

版本限制：

微信用戶端版本7.0.7 以上（基礎庫版本2.9.x 以上支援同層渲染）可以觀看直播及使用直播間的功能，低版本剛進入直播間時會提示用戶升級微信用戶端版本（低版本只能觀看直播，無法使用直播間的功能）。

在分包內引入【直播元件】live-player-plugin程式碼包，專案根目錄的app.json 引用，範例程式碼如下：

{

  "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 '）。

範例效果圖如下：

 

三、其他相關元件、介面與攜帶參數

●    訂閱組件：subscribe

●    取得直播狀態API：getLiveStatus

●    直播間到商詳頁攜帶參數：room_id

●    從群組分享卡返回直播間時攜帶參數卡返回直播間時攜帶參數：shareTicket

●    後台取得直播房間清單API

●    後台取得回放來源視訊API

#：以上2個後台呼叫的介面總上限500次/天

1.   【訂閱】組件

功能解釋：

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

元件使用：

如果需要在直播元件頁以外小程式其他頁面也有同樣的開播提醒的功能，可以引入【訂閱】元件subscribe；需在page頁面（如home頁面）的home.json 引用訂閱元件，範例程式碼如下：

{

  "usingComponents": {

    "subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"

  }

}

然後便可在home.wxml裡使用訂閱元件，其中直播房間id可通過；房間id可透過下方【取得直播房間清單】API取得

2.   【取得直播狀態】介面

介面說明：

首次取得立刻返回直播狀態，往後間隔1分鐘或更慢的頻率去輪詢獲取直播狀態；

直播狀態說明：

l  101直播中：表示主播正常開播，直播正常的狀態；

l  102未開始：表示主播尚未開播；

l  103已結束：表示在直播端點擊【結束】按鈕正常關閉的直播，或直播異常15分鐘後系統強制結束的直播；

l  104禁播：表示因違規受到營運處罰被禁播；

l  105暫停：表示在MP小程式後台-控制台內操作暫停了直播；

l  106異常：表示主播離開、切後台、斷網等情況，該直播被判定為異常狀態，15分鐘內恢復即可回到正常直播中的狀態；如果15分鐘後還未恢復，直播間會被系統強制結束直播；

l  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以上支援攜帶以下參數

• shareTicket：分享直播間卡片到微信群，點擊此卡片後可以在ApponShow 裡取得該參數

• 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"   

}  

],

 "total":1

}

返回字段：

• 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"

} // 一场直播可能会产生多个视频片段。

四、其他说明

1、直播间小程序码

说明：

• 小程序引入直播组件后必须进行一次小程序发布上线，否则小程序码不生效

• 在MP小程序直播后台创建好直播间后，可以直接拿到直播间分享小程序码，无需额外开发

如果商家在后台自己生成的直播间小程序码，需要做以下配置（否则直播间左上角返回键将失效）：

在跳转进入直播间的路径加上 type=9 标识场景入口为小程序码：

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

2、商家公众号文章添加小程序卡片

说明：

商家在公众号文章中添加跳转进入直播间的小程序卡片时，需要做以下配置（否则直播间左上角返回键将失效）：

在跳转进入直播间的路径加上 type=10 标识场景入口为小程序卡片：

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

3、商品详情页面需添加返回按钮

点击直播组件页面里的货架商品跳转到商家小程序的商品详情页面后，为了避免用户无法再返回直播间，商家需在小程序商品详情页面左上角加上返回按钮，用于返回到直播组件页面。

4、快速更新直播组件版本的方法

商家小程序对应的管理员微信号收到【公众平台安全助手】下发的直播组件版本更新的服务通知后，可点击通知进行快速发布，移动端即可快速更新小程序内直播组件的新版本，无需修改代码或重新提交审核。

服务通知如下图所示：

相关推荐：小程序开发教程

以上是透過直播組件實現小程式直播功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！