微信小程序直播接入指南

小程序直播组件接入指引

一、简介

小程序直播,是微信提供给小程序开发者的直播组件。通过调用该组件,商家可以在小程序中实现直播功能。

按下面的使用说明接入,在你的小程序中引入直播组件。

二、使用方法说明

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’)。

示例效果图如下:

三、其他相关组件、接口和携带参数

1.【订阅】组件

功能解释:用户进入直播间内,可对一场未开播的直播进行单次订阅,开播时直播组件会自动下发开播提醒给用户, 无需开发者额外开发

组件使用:如果需要 在直播组件页以外小程序其他页面也有同样的开播提醒的功能,可以引入【订阅】组件subscribe;需在page页面(如home页面)的 home.json 引用订阅组件,示例代码如下:

{   "usingComponents": {     "subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"   } }

然后便可在home.wxml里使用订阅组件,其中直播房间id可通过;房间id可通过下面【获取直播房间列表】API获取

 

2. 获取直播状态接口

接口说明:首次获取立马返回直播状态,往后间隔1分钟或更慢的频率去轮询获取直播状态

直播状态说明:

  • 101直播中:表示主播正常开播,直播正常的状态

  • 102未开始:表示主播还未开播

  • 103已结束:表示在直播端点击【结束】按钮正常关闭的直播,或直播异常15分钟后系统强制结束的直播

  • 104禁播:表示因违规受到运营处罚被禁播

  • 105暂停中:表示在MP小程序后台-控制台内操作暂停了直播

  • 106异常:表示主播离开、切后台、断网等情况,该直播被判定为异常状态,15分钟内恢复即可回到正常直播中的状态;如果15分钟后还未恢复,直播间会被系统强制结束直播

  • 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及以上支持携带以下参数

1) shareTicket:分享直播间卡片到微信群,点击此卡片后可以在 App onShow 里获取该参数

2) 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"     }    ]  }

返回字段:

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、快速更新直播组件版本的方法

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

服务通知如下图所示:

微信小程序直播接入指南的更多相关文章

  1. 微信小程序直播接入

    申请开通小程序直播 1.申请小程序直播有以下几个硬性指标: 1. 满足小程序18个开放类目 2. 主体下小程序近半年没有严重违规 3. 小程序近90天内有过支付行为 4. 主体下公众号累计粉丝数大于1 ...

  2. 微信小程序支付接入实战

    1. 微信小程序支付接入实战 1.1. 需求   最近接到一个小程序微信支付的需求,需要我写后台支持,本着能不自己写就不自己写的cv原则,在网上找到了些第三方程序,经过尝试后,最后决定了这不要脸作者的 ...

  3. 微信小程序直播

    微信小程序直播(转) 通过PC实现推流,然后用小程序进行直播播放,也就是PC->小程序. 小程序支持 小程序的直播能力只针对某些类目开放并且需要申请开通. 支持的类目 社交 直播 教育 在线教育 ...

  4. 为什么要学习微信小程序直播开发?最新的小程序直播介绍和优势分析!

    小程序直播的介绍 “小程序直播”是微信提供给开发者的实时视频直播工具,包括直播管理端.主播端和观众端等模块,支持提供常用的用户互动和营销促销工具. 开发者只需在小程序中引入相关代码并在管理后台完成配置 ...

  5. uni-app开发经验分享十九: uni-app对接微信小程序直播

    uni-app对接微信小程序直播 1.登录微信小程序后台-点击>设置->第三方设置->添加直播插件 2.添加直播组件后->点击<详情>      记录这两个参数直播 ...

  6. 如何让微信小程序快速接入七牛云

    如果你确定用七牛运行小程序的话,给大家分享一个九折优惠码:61d1fd4d1 月 9 日 微信小程序正式发布,小程序终于揭开了它神秘的面纱,开发者对小程序的追捧更是热度不减.从小程序的热门应用场景来看 ...

  7. ***腾讯云直播(含微信小程序直播)研究资料汇总-原创

    这段时间抽空研究了下直播技术,综合比较了下腾讯云直播的技术和文档方面最齐全,现把一些技术资料和文档归集如下: 1.微信小程序移动直播入门导读 https://cloud.tencent.com/doc ...

  8. 微信小程序搜索优化指南(SEO)

    前言 其实在 2019 年上半年,微信就发布了基于小程序页面的搜索. 为了更好地发现及理解小程序的页面,结合过去一段时间来我们遇到的各种情况,强烈建议各位开发者花一些宝贵的时间认真阅读本文. 小程序爬 ...

  9. 微信小程序-未接入app.json错误

    微信小程序建立新项目之后会出现app.json文件未接入错误如下图: 一般是因为在下图添加新项目,项目目录这一列,如果不事先建立一个空的文件夹,直接选择则不会出现quickstartup界面 所以在建 ...

  10. 两百条微信小程序跳坑指南(不定时更新)

    微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...

随机推荐

  1. node.js中kafka的封装和高并发消费限流优雅降级以及egg-kafka的封装说明

    HI!,你好,我是zane,zanePerfor是一款我开发的一个前端性能监控平台,现在支持web浏览器端和微信小程序端. 我定义为一款完整,高性能,高可用的前端性能监控系统,这是未来会达到的目的,现 ...

  2. NativeBuferring,一种零分配的数据类型[下篇]

    上文说到Unmanaged.BufferedBinary和BufferedString是NativeBuffering支持的三个基本数据类型,其实我们也可以说NativeBuffering只支持Unm ...

  3. 【动画进阶】有意思的 Emoji 3D 表情切换效果

    最近,群里面的同学发了这么一个非常有意思是动画效果: 原效果地址 -- CodePen Demo -- Letter Hop 当然,原效果,主要使用了 GSAP 动画库以及一个 3D 文字 JavaS ...

  4. idea 2021新窗口打开工程

    描述 Mac M1,IDEA 2017 有部分兼容性问题,遂对IDEA进行升级 idea 升级2021(IntelliJ IDEA 2021.3 (Community Edition)) 打开新工程, ...

  5. 快速入门OpenCv(python版)

    OpenCV是一个(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows和Mac OS操作系统上.它轻量级而且高效--由一系列 C 函数和少量 C++ 类构成,同时提供了Python. ...

  6. Excel中的RIGHT函数

    问题:从数据库中导出35800个用户code(属于179家单位,每个单位200个用户),用户code共16位,前14位带有用户属性(如:角色.单位.部门等),后四位为每个单位用户的递增自然数.想要对全 ...

  7. 了解 HarmonyOS

    引言 在开始 HarmonyOS 开发之前,了解其背景.特点和架构是非常重要的.本章将为你提供一个全面的 HarmonyOS 概览. 目录 什么是 HarmonyOS HarmonyOS 的发展历程 ...

  8. PYQT5学习(13):QMidArea同时显示多个窗口,创建多个独立的窗口

    QMidArea  参考文章:https://blog.csdn.net/jia666666/article/details/81670569 一种同时显示多个窗口的方法,创建多个独立的窗口,这些独立 ...

  9. GIS中的ROI文件可否由.xml格式转为.roi格式?

      本文介绍在ENVI软件中,将用户自行绘制的.xml格式的感兴趣区(ROI)文件转换为.roi格式的方法.   对于ENVI软件,其在早期版本中,默认将用户所绘制的感兴趣区文件保存为.roi格式:而 ...

  10. Java 21 新特性:switch的模式匹配

    在之前的Java 17新特性中,我们介绍过关于JEP 406: switch的模式匹配,但当时还只是关于此内容的首个预览版本.之后在JDK 18.JDK 19.JDK 20中又都进行了更新和完善.如今 ...