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

        }

      }

    }

  ]

}

Copier après la connexion

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>

Copier après la connexion

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"

  }

}

Copier après la connexion

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>

Copier après la connexion

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)

  })

Copier après la connexion

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

}

Copier après la connexion

返回字段：

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"

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

Copier après la connexion