• 13
  • 14
分享

前言

小程序直播功能,分为使用官方自带的直播组件( live-player-plugin ,无需二次开发,开箱即用),另一种就是使用自己服务器的流,自定义直播组件(live-player、live-pusher),这里主要讲述,第一种的使用

一、准备

第一要了解是否满足 直播开通条件

基本满足开头直播条件的功能里会有直播,然后去申请开通一下就行了

1.png

创建直播间

2.jpg

这个直播码就是主播开启直播的入口,主播扫码就可以进入

基本信息

点击后选择手机直播

3.jpg

推流直播

创建时需要核实身份 同时开播时间必须在12小时内 第一次开通需要人脸识别验证

4.jpg

样式配置

5.jpg

6.jpg

二、开发使用

引入插件

原生引入在app.jison

1. 主包引入

    "plugins": {
        "live-player-plugin": {
            "version": "1.0.13", // 注意填写该直播组件最新版本号,微信开发者工具调试时可获取最新版本号(复制时请去掉注释)
            "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid,该示例值即为直播组件appid(复制时请去掉注释)
        }
    }

2. 分包引入

    "subpackages": [
        {
            "plugins": {
                "live-player-plugin": {
                    "version": "1.0.13", // 注意该直播组件最新版本号,微信开发者工具调试时可获取最新版本号(复制时请去掉注释)
                    "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid,该示例值即为直播组件appid(复制时请去掉注释)
                }
            }
        }
    ]

进入直播

配置完成,我们其实就搞定了,那么如何进入直播间?

并不需要在页面写组件,而是直接跳转到官方给定的路径上,就进入直播间了,

    let roomId = [直播房间id] // 填写具体的房间号,可通过下面【获取直播房间列表】 API 获取
    let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数(如示例中的path和pid参数),后续可以在分享卡片链接和跳转至商详页时获取,详见【获取自定义参数】、【直播间到商详页面携带参数】章节(上限600个字符,超过部分会被截断)
    wx.navigateTo({
        url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
    })
    // 其中wx2b03c6e691cd7370是直播组件appid不能修改

详细请看文档

(直播使用)[https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html]

这里主要说明下文档没有的

第一就是,这个直播组件微信开发者工具是进入不了的,但是可以真机调试,和体验版都能使用和观测,通过分享进入只能正式发布后可测试,因为分享进入的是正式版,而正式版需要发布。

如果想前端自己搞搞玩,也可以,这个直播房间id roomId 是从 0 、1、2这种顺序按照创建排序下去的,所以自己玩可以写死 (第一个创建的默认是0 还是1,忘记了自己试试就好啦),然后写个跳转就能进入直播间了, pid是示例的自定义参数,

三、关于订阅

就是这个房间id的,每个房间直播完就等于关闭,如果开通回放,是可以回放的,所以每场直播都有自己的直播房间id,你订阅都属于一次性订阅,不存在长期订阅,该功能还未实现, 下面是文档

1、【订阅】组件(注:若要使用该组件,需在主包引入直播组件)

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

组件使用:如果需要在直播组件页以外小程序其他页面也有同样的开播提醒的功能,可以引入【订阅】组件 subscribe(开播前才会显示,直播开始后自动消失该组件);需在 page 页面(如 home 页面)的 home.json 引用订阅组件,可通过 stopPropagation 属性控制是否阻止事件冒泡(默认不阻止事件冒泡,stopPropagation 为 false)。

示例代码如下:

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

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

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

2、【获取直播状态】接口(注:若要使用该接口,需在主包引入直播组件)

3、有样式问题

修改样式

.subscribe--live-player-subscribe__btn{
  width: 200rpx !important;
  height: 21px !important;
  line-height: 21px !important;
  font-weight: 200;
  font-size: 20rpx !important;
  text-align: center;
  background: #fff!important;
  color: #2d79ab!important;
  border-radius: 4px;
  pointer-events: auto;
  margin: 0 auto;
}

四、自定义自播

第一种可以通过腾讯云官网,解决方案中 云直播 、微信小程序实时音频、企业直播

第二种就是 通过小程序的组件 live-player、live-pusher

这里有篇示例文章可以看看使用


作者:MmM豆

原文链接:https://blog.csdn.net/marendu/article/details/106568387#comments_14896114


  • 【留下美好印记】
    赞赏支持
登录 后发表评论
+ 关注

热门文章

    最新讲堂

      • 推荐阅读
      • 换一换
          • 每个开发都不想写文档。当你不想写接口文档时,可以通过安装插件在 IDEA 里实现自动同步,一边写代码一边同步接口文档给你的前端、测试同学。以下内容手把手教你怎么操作(这里仅面向使用 IDEA 编辑器、遵循 Java Spring 框架注释规范的同学):首先,你需要安装一个插件IDEA 插件市场里搜索 「Apifox Helper」,这是国内一个做 API 协作管理平台的厂商(Apifox)做的插件,可以非常方便自动生成接口文档并且同步到你的项目中。这个插件可以实现代码零入侵自动生产接口文档。IDEA 安装插件:打开 IDEA > Preferences(Settings) > Pl...
            0 0 1760
            分享
          • 禁足的特殊时期,常规的面试手法:不管是面试官与求职者一对一的单挑,还是群殴式的无领导小组讨论,都无法施展了。取而代之的是:电话面试和视频面试。从人身安全的角度来说,无可厚非,你好我也好,大家好才是真的好。但是问题来了:习惯当面PK的求职者,有点不会玩了,可敌人不会因为你是新兵蛋子而不打你……谨以这篇攻略文,送给诸位疫情之下的求职者,希望添点助力,帮你逆风飞扬,闪亮职场。泰然处之,从容淡定第一条基本原则:不要慌!不同于现场面试,电话面试有点像开卷考试。你慌什么?咱占据有利地形啊!面试官又看不见你!提前备好简历,以防叙述时与简历有偏差,讲的时候更有条理,也避免了遗漏。另外,准备好工具资料备查,甚至...
            1 0 2025
            分享
          •   如何做Web测试?以下为大家比较全面地总结一下Web测试的要点。  一、Web应用程序  应用程序有两种模式,C/S和B/S。C/S模式,即Client/Server(客户端/服务端)模式,这类程序可独立运行。B/S模式,即Browser/Server(浏览器/服务端)模式,这类程序需借助浏览器来运行。  Web应用程序一般是B/S模式,一个Web应用程序是由完成特定任务的各种Web组件(web components)构成的并通过Web将服务展示给外界。在实际应用中,Web应用程序是由多个Servlet、JSP页面、HTML文件以及图像文件等组成。  了解了Web应用程序,该如何进行测试呢...
            0 0 1370
            分享
          • Apache JMeter 是一款开源的性能测试工具,可以用于测试 Web 应用程序、FTP 服务器、数据库等各种类型的服务器。本文将以 JMeter 5.5 为例介绍 JMeter 的使用方法。下载和安装由于 JMeter 是使用 Java 开发的,因此在运行之前必须先安装 JDK。您可以在这 JMeter 下载和安装教程 下载 JMeter。JMeter 是一款免安装的软件,下载安装包后直接解压即可使用。在 bin 目录下,Windows 用户运行 jmeter.bat 文件即可启动 JMeter,Unix/Mac OS X 用户则需要运行 jmeter/jmeter.sh。创建测试计划在...
            0 0 986
            分享
          •   背景:  有个测试场景需要模拟多终端手机在线,测试配车比数是否按照系统给出的比值进行配车  测试过程:  卡车一辆一辆上线,确认卡车是否按照配车比指派到电铲终端  问题:  测试过程中没有足够真实机进行测试,所以需要模拟多台终端的场景  下面介绍一款神器--夜神模拟器如何操作的  一 夜神模拟器介绍  夜神模拟器(Nox Player)是一款针对Windows和Mac操作系统的Android模拟器。它允许用户在计算机上模拟Android设备,以便在桌面上运行Android应用程序和游戏。以下是夜神模拟器的一些特点和功能:  1.多平台支持:夜神模拟器可在Windows和Mac操作...
            0 0 1295
            分享
      • 51testing软件测试圈微信