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",?//?填寫該直播組件最新版本號(hào)，微信開(kāi)發(fā)者工具調(diào)試時(shí)可獲取最新版本號(hào)

??????????"provider":?"wx2b03c6e691cd7370"?//?必須填該直播組件appid，該示例值即為直播組件appid

????????}

??????}

????}

??]

}

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>

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"

??}

}

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>

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:?未開(kāi)始,?103:?已結(jié)束,

104:?禁播,?105:?暫停中,?106:?異常，107：已過(guò)期

????const

liveStatus?=?res.liveStatus

??})

??.catch(err?=>

{

????console.log(err)

??})

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:

該接口僅供商家后臺(tái)調(diào)用，調(diào)用限額500次/天，建議開(kāi)發(fā)者自己做緩存（此接口與下面【獲取回放視頻】接口共用500次/天限制，請(qǐng)合理分配調(diào)用頻次）。

請(qǐng)求URL：

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

請(qǐng)求方式：

POST

請(qǐng)求示例：

Request

{

?"start":?0,?//?起始拉取房間，start=0表示從第1個(gè)房間開(kāi)始拉取

?"limit":?10?//?每次拉取的個(gè)數(shù)上限，不要設(shè)置過(guò)大，建議100以內(nèi)

}



Response

{

?"errcode":?0,?//?errcode=0代表成功；errcode=1代表未創(chuàng)建直播房間

?"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后臺(tái)創(chuàng)建直播房間，否則會(huì)報(bào)錯(cuò)（錯(cuò)誤碼1）

• cover_img 封面圖片url

• start_time 直播計(jì)劃開(kāi)始時(shí)間，列表按照 start_time 降序排列

• end_time 直播計(jì)劃結(jié)束時(shí)間

• anchor_name 主播名

• goods 商品列表

• live_status 直播狀態(tài)?? 101: 直播中, 102: 未開(kāi)始, 103: 已結(jié)束, 104: 禁播, 105: 暫停中, 106: 異常,107:已過(guò)期（直播狀態(tài)解釋可參考【獲取直播狀態(tài)】接口）

5.?? 【獲取回放源視頻】接口，僅供后臺(tái)調(diào)用

接口規(guī)則：

該接口僅供商家后臺(tái)調(diào)用，調(diào)用限額500次/天，此接口與上面【獲取房間列表】接口共用500次/天限制，請(qǐng)合理分配調(diào)用頻次）。

?

接口說(shuō)明：

• 該接口可在直播結(jié)束后拿到回放源視頻（直播結(jié)束后大約10分鐘會(huì)生成回放，源視頻無(wú)評(píng)論等內(nèi)容）

• 拿到源視頻后需要開(kāi)發(fā)者自行開(kāi)發(fā)、使用回放視頻

• 如果把源視頻直接放在小程序上使用，需要小程序具備視頻資質(zhì)（具體資質(zhì)要求請(qǐng)參考《小程序開(kāi)發(fā)的類目服務(wù)》）

后續(xù)官方會(huì)直接提供無(wú)需開(kāi)發(fā)的直播回放功能，敬請(qǐng)期待。

請(qǐng)求URL：

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

請(qǐng)求方式：

POST

請(qǐng)求示例：

Request

{

"action":?"get_replay",?//?獲取回放

"room_id":?354,?//?直播間id

"start":?0,?//?起始拉取視頻，start=0表示從第1個(gè)視頻片段開(kāi)始拉取

"limit":?10?//?每次拉取的個(gè)數(shù)上限，不要設(shè)置過(guò)大，建議100以內(nèi)

}



Response

{

"live_replay":?[??

{

??????"expire_time":?"2020-11-11T03:49:55Z",?//?回放視頻url過(guò)期時(shí)間

??????"create_time":?"2019-11-12T03:49:55Z",?//?回放視頻創(chuàng)建時(shí)間

??????"media_url":?"http://xxxxx.vod2.myqcloud.com/xxxxx/xxxxx/f0.mp4"?//?回放視頻???

}?

],?

"errcode":?0,?

"total":?1,?

"errmsg":?"ok"

}?//?一場(chǎng)直播可能會(huì)產(chǎn)生多個(gè)視頻片段。

四、其他說(shuō)明

1、直播間小程序碼

說(shuō)明：

• 小程序引入直播組件后必須進(jìn)行一次小程序發(fā)布上線，否則小程序碼不生效

• 在MP小程序直播后臺(tái)創(chuàng)建好直播間后，可以直接拿到直播間分享小程序碼，無(wú)需額外開(kāi)發(fā)

如果商家在后臺(tái)自己生成的直播間小程序碼，需要做以下配置（否則直播間左上角返回鍵將失效）：

在跳轉(zhuǎn)進(jìn)入直播間的路徑加上 type=9 標(biāo)識(shí)場(chǎng)景入口為小程序碼：

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

2、商家公眾號(hào)文章添加小程序卡片

說(shuō)明：

商家在公眾號(hào)文章中添加跳轉(zhuǎn)進(jìn)入直播間的小程序卡片時(shí)，需要做以下配置（否則直播間左上角返回鍵將失效）：

在跳轉(zhuǎn)進(jìn)入直播間的路徑加上 type=10 標(biāo)識(shí)場(chǎng)景入口為小程序卡片：

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

3、商品詳情頁(yè)面需添加返回按鈕

點(diǎn)擊直播組件頁(yè)面里的貨架商品跳轉(zhuǎn)到商家小程序的商品詳情頁(yè)面后，為了避免用戶無(wú)法再返回直播間，商家需在小程序商品詳情頁(yè)面左上角加上返回按鈕，用于返回到直播組件頁(yè)面。

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

商家小程序?qū)?yīng)的管理員微信號(hào)收到【公眾平臺(tái)安全助手】下發(fā)的直播組件版本更新的服務(wù)通知后，可點(diǎn)擊通知進(jìn)行快速發(fā)布，移動(dòng)端即可快速更新小程序內(nèi)直播組件的新版本，無(wú)需修改代碼或重新提交審核。

服務(wù)通知如下圖所示：

相關(guān)推薦：小程序開(kāi)發(fā)教程

The above is the detailed content of Implement live broadcast function of mini program through live broadcast component. For more information, please follow other related articles on the PHP Chinese website!