Implémenter la fonction de diffusion en direct du mini-programme via un composant de diffusion en direct

1. Introduction

WeChat fournit un composant de diffusion en direct pour les développeurs de mini-programmes. En appelant ce composant, les commerçants peuvent implémenter la fonction de diffusion en direct dans les mini-programmes.

(Partage de vidéos d'apprentissage : Vidéo de programmation)

Nous allons maintenant vous présenter comment introduire le composant de diffusion en direct dans le mini programme.

2. Mode d'emploi

1. [Composant de diffusion en direct] Comment introduire

Restrictions de version :

Client WeChat version 7.0.7 et supérieure. (La version de base de la bibliothèque 2.9.x et supérieure prend en charge le rendu sur la même couche), vous pouvez regarder des diffusions en direct et utiliser les fonctions de la salle de diffusion en direct. Les versions inférieures inviteront les utilisateurs à mettre à niveau la version du client WeChat lorsqu'ils entrent pour la première fois dans la salle de diffusion en direct (versions inférieures). ne peut regarder que des émissions en direct et ne peut pas utiliser la fonction de salle de diffusion en direct).

Introduisez le package de code [Live Streaming Component] live-player-plugin dans le sous-package et reportez-vous au app.json dans le répertoire racine du projet. L'exemple de code est le suivant :

{

  "subpackages": [

    {

      "root": "packageA",

      "pages": [

        "pages/home/home"

      ],

      "plugins": {

        "live-player-plugin": {         

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

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

        }

      }

    }

  ]

}

.

2. Comment [Composant de diffusion en direct] Après avoir utilisé

pour présenter la configuration du package de code du composant selon l'étape 1, vous pouvez accéder directement à la page du composant de diffusion en direct via l'adresse du lien (c'est-à-dire accédez à la page de la salle de diffusion en direct). L'adresse du lien doit contenir l'ID de la salle de diffusion en direct ; L'ID de la salle peut être obtenu via l'API [Get Live Room List] ci-dessous :

.

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

  Go to Live Player page

</navigator>

Vous pouvez accéder à la page du composant de diffusion en direct via ce lien (l'entrée de la page actuelle n'est ouverte qu'au 'live-player-plugin)').

L'exemple de rendu est le suivant :

3. Autres composants, interfaces et paramètres de transport associés

● Composant d'abonnement : s'abonner

● Obtenir l'API de l'état de la diffusion en direct : getLiveStatus

● Paramètres transmis de la salle de diffusion en direct à la page de détails de l'entreprise : room_id

● Paramètres transmis lorsque Retour de la carte de partage de groupe à la salle de diffusion en direct ： shareTicket

Quantity API backend pour obtenir la liste des salles de diffusion en direct

Quantity API Backstage pour obtenir la vidéo source de lecture

Remarque : La limite totale des 2 interfaces d'appel backend ci-dessus est de 500 fois/jour

1 【Abonnement】Composant

Explication de la fonction :

Les utilisateurs entrent dans la salle de diffusion en direct. et peut souscrire un seul abonnement à une diffusion en direct qui n'a pas démarré. Lorsque la diffusion démarre, le composant de diffusion en direct distribuera automatiquement des rappels de début de diffusion aux utilisateurs sans que les développeurs aient besoin de développer

utilisation supplémentaire du composant :

Si vous avez besoin d'avoir la même fonction de rappel de démarrage de diffusion sur d'autres pages du mini programme autre que la page du composant de diffusion en direct, vous pouvez introduire le composant [ Abonnement], vous devez référencer le composant d'abonnement dans l'accueil. json de la page (comme la page d'accueil). L'exemple de code est le suivant :

{

  "usingComponents": {

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

  }

}

Ensuite, vous pouvez utiliser le composant d'abonnement dans home.wxml, où l'identifiant de la salle de diffusion en direct peut être transmis ; L'identifiant de la salle peut être obtenu via l'API suivante [Get Live Room List]

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

2 [Get Live Status] Interface

Description de l'interface :

Obtenez-le pour la première fois. heure et retour immédiat à l'état de diffusion en direct, l'interrogation sera effectuée toutes les minutes ou plus lentement pour obtenir l'état de diffusion en direct

Description de l'état de diffusion en direct :

l 101 Diffusion en direct : indique que ; le présentateur est à l'antenne normalement et la diffusion en direct est dans un état normal ;

l 102 Non démarré : indique que l'hôte n'a pas démarré la diffusion

l 103 Terminé : indique que ; la diffusion en direct a été fermée normalement en cliquant sur le bouton [Fin] à la fin de la diffusion en direct, ou le système a forcé la diffusion après 15 minutes d'anomalie Diffusion en direct terminée

l 104 Interdit : Indique que la diffusion est interdite ; en raison de pénalités opérationnelles dues à des violations ;

l 105 Pause : indique que la diffusion en direct a été interrompue dans le fonctionnement de la console en arrière-plan de l'applet MP ;

l 106 Anormal : indique que l'ancre a à gauche, passé en arrière-plan, déconnecté d'Internet, etc. La diffusion en direct est jugée dans un état anormal et elle peut revenir à l'état de diffusion en direct normal après avoir repris dans les 15 minutes si elle revient après 15 minutes, si ; il n'est pas restauré, la salle de diffusion en direct sera obligée de mettre fin à la diffusion en direct par le système

l 107 a expiré : Cela signifie que la salle de diffusion en direct n'a pas été démarrée et l'heure de fin du plan de diffusion en direct ; rempli lors de la création de la salle de diffusion en direct dans l'arrière-plan de l'applet MP a été atteint. La diffusion en direct est déterminée comme ayant expiré et ne peut pas être diffusée à nouveau

Méthode d'appel :

Pour appeler le [ ; Get Live Broadcast Status] interface getLiveStatus, vous devez citer [Live Streaming Component] live-player en haut de la page du mini programme -plugin, l'exemple de code est le suivant :

let livePlayer = requirePlugin(' live-player-plugin') // Présentation de l'interface pour obtenir l'état de diffusion en direct

// Retour à l'état de diffusion en direct immédiatement après la première acquisition, puis Sondage pour obtenir l'état de diffusion en direct à intervalles de 1 minute ou moins

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. Paramètres de transport

Restrictions de version :

Le composant de diffusion en direct version 1.0.1 et supérieure prend en charge la portabilité Les paramètres suivants

• shareTicket : partagez la carte de la salle de diffusion en direct avec le groupe WeChat. Après avoir cliqué sur cette carte, vous pouvez obtenir les paramètres dans ApponShow

• room_id : cliquez sur les produits en rayon. dans la page du composant de diffusion en direct, accédez à la page de détails du produit de l'applet du marchand, ils apporteront le paramètre de numéro de salle

4 L'interface [Obtenir la liste des salles de diffusion en direct] est destinée au backend. Appelez uniquement

règles de l'interface :

该接口仅供商家后台调用，调用限额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、快速更新直播组件版本的方法

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

服务通知如下图所示：

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!