Implement live broadcast function of mini program through live broadcast component

1. Introduction

WeChat provides a live broadcast component for mini program developers. By calling this component, merchants can implement the live broadcast function in mini programs.

(Learning video sharing: Programming video)

Let’s introduce how to introduce the live broadcast component into the mini program.

2. Instructions for use

1. [Live broadcast component] How to introduce

Version restrictions:

WeChat client version 7.0.7 and above ( Basic library version 2.9.x and above supports same-layer rendering) you can watch live broadcasts and use the live broadcast room functions. Lower versions will prompt users to upgrade the WeChat client version when they first enter the live broadcast room (lower versions can only watch live broadcasts and cannot use the live broadcast room. function).

Introduce the [Live Streaming Component] live-player-plugin code package into the subpackage, and reference the app.json in the project root directory. The sample code is as follows:

{

  "subpackages": [

    {

      "root": "packageA",

      "pages": [

        "pages/home/home"

      ],

      "plugins": {

        "live-player-plugin": {         

"version": "1.0.0", // 填写该直播组件最新版本号，微信开发者工具调试时可获取最新版本号

          "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid，该示例值即为直播组件appid

        }

      }

    }

  ]

}

Copy after login

2. [Live Streaming Component] How to After using

to introduce the component code package configuration according to the method in step 1, you can directly jump to the live broadcast component page through the link address (that is, enter the live broadcast room page). The link address needs to bring the live broadcast room ID; The room ID can be obtained through the [Get Live Room List] API below. The sample code is as follows:

<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=[直播房间id]">

  Go to Live Player page

</navigator>

Copy after login

You can jump to the live broadcast component page through this link (the current page entrance is only open to 'live-player-plugin ').

The sample renderings are as follows:

3. Other related components, interfaces and carrying parameters

● Subscription Component: subscribe

● Get live broadcast status API: getLiveStatus

● Parameters carried from the live broadcast room to the business details page: room_id

● Parameters carried when returning from the group sharing card to the live broadcast room : Shareticket

● Get the live broadcast room list in the background API

● In the background to get back source video API

Note: The total upper limit of the interface of the above 2 background calls 500 times/day

1. 【Subscription】Component

Function explanation:

Users enter the live broadcast room and can make a single subscription to a live broadcast that has not yet started. When the broadcast starts, the live broadcast component will Automatically distribute broadcast start reminders to users, without the need for developers to develop additional

component usage:

If you need to have the same start broadcast reminder function on other pages of the mini program other than the live broadcast component page, you can introduce [ Subscription] component subscribe; you need to reference the subscription component in home.json of the page page (such as the home page). The sample code is as follows:

{

  "usingComponents": {

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

  }

}

Copy after login

Then you can use the subscription component in home.wxml, where the live broadcast room id can be Passed; the room id can be obtained through the following [Get live broadcast room list] API

<subscribe room-id="[直播房间id]"></subscribe>

Copy after login

2. [Get live broadcast status] interface

Interface description:

Get it for the first time and return to the live broadcast immediately Status, polling will be performed at intervals of 1 minute or slower to obtain the live broadcast status;

Live broadcast status description:

l 101 Live Broadcast: Indicates that the anchor is starting to broadcast normally and the live broadcast is in a normal state;

l 102 Not Started: Indicates that the host has not started the broadcast;

l 103 Ended: Indicates that the live broadcast is closed normally by clicking the [End] button on the live broadcast end, or the system forces the live broadcast to be abnormal after 15 minutes Ended live broadcast;

l 104 Banned: Indicates that the broadcast is banned due to operational penalties due to violations;

l 105 Paused: Indicates that the live broadcast has been paused by operating in the MP applet background-console ;

l 106 Abnormal: Indicates that the anchor leaves, switches to the background, disconnects from the Internet, etc. The live broadcast is judged to be in an abnormal state, and it can return to the normal live broadcast state after resuming within 15 minutes; if the live broadcast continues after 15 minutes, If it is not restored, the live broadcast room will be forced to end the live broadcast by the system;

l 107 Expired: It means that the live broadcast room has not started broadcasting, and the live broadcast plan end time filled in when creating the live broadcast room in the MP applet background has been reached, then The live broadcast has been judged to have expired and cannot be broadcast again;

Calling method:

To call the [Get Live Broadcast Status] interface getLiveStatus, you need to quote [Live Streaming Component] live-player at the top of the mini program page -plugin, the sample code is as follows:

let livePlayer = requirePlugin('live-player-plugin') //Introducing the interface to obtain the live broadcast status

//The first time it is obtained, it will return to the live broadcast status immediately, and then Poll to obtain the live broadcast status at an interval of 1 minute or slower

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)

  })

Copy after login

3. Carrying parameters

Version restrictions:

Live broadcast component version 1.0.1 and above supports carrying The following parameters

shareTicket: Share the live broadcast room card to the WeChat group. After clicking this card, you can obtain the parameters in ApponShow
room_id: Click When the shelf products in the live broadcast component page jump to the product details page of the merchant applet, they will bring the room number parameter

4. The [Get Live Broadcast Room List] interface is for backend only Call

Interface rules:

该接口仅供商家后台调用，调用限额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

}

Copy after login

返回字段：

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"

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

Copy after login