小程序的拉流组件live-player的使用

news2024/11/26 8:30:15

前言:

        我们在小程序中实现音视频-直播/录播 的播放时候,会使用到微信官方提供的两个组件,推流组件和拉流组件,这里来分享下他的拉流组件的使用和具体需要注意的点。

效果图:

1、拉流状态code日志

 

2、代码使用截图:

 官方文档:

live-player | 微信开放文档

 注意事项:

1、要用到 音视频,涉及直播的话小程序必须申请直播权限,不然你提审会出问题

2、音视频地址。目前仅支持 flvrtmp 格式

3、网络的状态码中,官方文档部分是没有的,比如 2026,6000等

具体使用:

1、wxml 上使用 标签

<live-player
    src="{{url}}"
    orientation="{{orientation}}"
    object-fit="{{objectFit}}"
    min-cache="{{minCache}}"
    max-cache="{{maxCache}}"
    mode="{{mode}}"
    autoplay="{{true}}"
    bindstatechange="onPlayStateChange"
    bindnetstatus="onPlayNetStateChange"
    bindaudiovolumenotify="onPlayAudiovolumenotify"
></live-player>

2、js中定义变量与方法

data: {
    //直播地址 rtmp://58.200.131.2:1935/livetv/cetv1          http://39.134.65.162/PLTV/88888888/224/3221225611/index.m3u8
    url:'',
    orientation: 'vertical', //画面方向
    objectFit: 'fillCrop', //填充模式
    minCache: 0.2, //最小缓冲区,单位s
    maxCache: 0.8, //最大缓冲区,单位s(RTC 模式推荐 0.8s)。缓冲区用来抵抗网络波动,缓冲数据越多,网络抗性越好,但时延越大。
    mode: 'live', //模式  live是直播
}
// 播放状态变化事件
onPlayStateChange(e) {
   const codeArr = [
      {
          code:'2001',
          value:'拉流:已经连接服务器',
      },{
          code:'2002',
          value:'拉流:已经连接 RTMP 服务器,开始拉流',
      },{
          code:'2003',
          value:'拉流:网络接收到首个视频数据包(IDR)',
      },{
          code:'2004',
          value:'拉流:视频播放开始',
     },{
          code:'2008',
          value:'拉流:解码器启动',
     },{
          code:'2009',
          value:'拉流:视频分辨率改变',
     },{
          code:'2105',
          value:'拉流:当前视频播放出现卡顿',
     }
    ]
   console.log('hx----------wx网络code:');
   console.log('+++++++++++++++++++++:');
   console.log(e.detail.code);
   let text = codeArr.filter(v=>v.code == e.detail.code)?codeArr.filter(v=>v.code == e.detail.code)[0].value:''
   console.log(text );
   console.log('hx----------wx网络code:');
   if(e.detail.code == 2001 || e.detail.code == 2002 || e.detail.code == 2008){
        this.triggerEvent('updateLoadingFlagHX',true)
   }
   if(e.detail.code == 2003 || e.detail.code == 2032){
        wx.showToast({
          title: '网络接收到首个视频数据包',
          icon: 'none',
        });
        //调用父级的方法
        this.triggerEvent('updateLoadingFlagHX',false)
   }

        
        //在这里做你的逻辑操作...

},
//网络问题
onPlayNetStateChange(e) {
     
},
// 播放声音数值
onPlayAudiovolumenotify(e) {
  if (e.detail.volume > 20) {
     // console.log(e,e.detail.volume,'采集声音')
  }
},

api文档:

属性说明

属性类型默认值必填说明最低版本
srcstring音视频地址。目前仅支持 flvrtmp 格式1.7.0
modestringlive模式1.7.0
合法值说明
live直播
RTC实时通话,该模式时延更低
autoplaybooleanfalse自动播放1.7.0
mutedbooleanfalse是否静音1.7.0
orientationstringvertical画面方向1.7.0
合法值说明
vertical竖直
horizontal水平
object-fitstringcontain填充模式,可选值有 containfillCrop1.7.0
合法值说明
contain图像长边填满屏幕,短边区域会被填充⿊⾊
fillCrop图像铺满屏幕,超出显示区域的部分将被截掉
background-mutebooleanfalse进入后台时是否静音(已废弃,默认退后台静音)1.7.0
min-cachenumber1最小缓冲区,单位s(RTC 模式推荐 0.2s)1.7.0
max-cachenumber3最大缓冲区,单位s(RTC 模式推荐 0.8s)。缓冲区用来抵抗网络波动,缓冲数据越多,网络抗性越好,但时延越大。1.7.0
sound-modestringspeaker声音输出方式1.9.90
合法值说明
speaker扬声器
ear听筒
auto-pause-if-navigatebooleantrue当跳转到本小程序的其他页面时,是否自动暂停本页面的实时音视频播放2.5.0
auto-pause-if-open-nativebooleantrue当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放2.5.0
picture-in-picture-modestring/Array设置小窗模式: push, pop,空字符串或通过数组形式设置多种模式(如: ["push", "pop"])2.10.3
合法值说明
[]取消小窗
push路由 push 时触发小窗
pop路由 pop 时触发小窗
enable-auto-rotationbooleanfalse是否开启手机横屏时自动全屏,当系统设置开启自动旋转时生效2.11.0
referrer-policystringno-referrer格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本;2.13.0
合法值说明
origin发送完整的referrer
no-referrer不发送
bindstatechangeeventhandle播放状态变化事件,detail = {code}1.7.0
bindfullscreenchangeeventhandle全屏变化事件,detail = {direction, fullScreen}1.7.0
bindnetstatuseventhandle网络状态通知,detail = {info}1.9.0
bindaudiovolumenotifyeventhandler播放音量大小通知,detail = {}2.10.0
bindenterpictureinpictureeventhandler播放器进入小窗2.11.0
bindleavepictureinpictureeventhandler播放器退出小窗2.11.0

状态码

代码说明
2001拉流:已经连接服务器
2002拉流:已经连接 RTMP 服务器,开始拉流
2003拉流:网络接收到首个视频数据包(IDR)
2004拉流:视频播放开始
2005拉流:视频播放进度
2006拉流:视频播放结束
2007拉流:视频播放Loading
2008拉流:解码器启动
2009拉流:视频分辨率改变
2030音频设备发生改变,即当前的输入输出设备发生改变,比如耳机被拔出
2032拉流:视频渲染首帧事件
2101拉流:当前视频帧解码失败
2102拉流:当前音频帧解码失败
2103拉流:网络断连, 已启动自动重连
2104拉流:网络来包不稳:可能是下行带宽不足,或由于主播端出流不均匀
2105拉流:当前视频播放出现卡顿
2106拉流:硬解启动失败,采用软解
2107拉流:当前视频帧不连续,可能丢帧
2108拉流:当前流硬解第一个 I 帧失败,SDK自动切软解
3001拉流:RTMP -DNS解析失败
3002拉流:RTMP服务器连接失败
3003拉流:RTMP服务器握手失败
3005拉流:RTMP 读/写失败,之后会发起网络重试
-2301拉流:网络断连,且经多次重连无效,请自行重启拉流
-2302拉流:获取拉流地址失败

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/384985.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深度学习 Day26——利用Pytorch实现天气识别

深度学习 Day26——利用Pytorch实现天气识别 文章目录深度学习 Day26——利用Pytorch实现天气识别一、前言二、我的环境三、前期工作1、导入依赖项和设置GPU2、导入数据3、划分数据集四、构建CNN网络五、训练模型1、设置超参数2、编写训练函数3、编写测试函数4、正式训练六、结…

前端利用emailjs发送邮件

最近有一个需求&#xff0c;前端发送一个form表单到一个邮箱&#xff0c;找了一圈发现emailjs还不错就使用他了。首先emailjs官网注册一个账号注册完之后创建一个邮件服务&#xff08;我这里使用的是谷歌邮箱&#xff09;链接谷歌邮箱账户 然后创建服务接下来就要创建一个邮件的…

浅谈入门Servlet注解式开发

Servlet3.0版本之后&#xff0c;推出了Servlet基于注解式开发。 优点&#xff1a;开发效率高&#xff0c;直接在java类上使用注解进行标注&#xff0c;可直接省略WEB.xml文件配置import javax.servlet.annotation.WebServlet; WebServlet 使用WebServlet注解标注 WebServlet的…

五子棋的设计与实现

术&#xff1a;Java等摘要&#xff1a;五子棋是一种两人对弈的纯策略型棋类游戏&#xff0c;非常容易上手&#xff0c;老少皆宜。为了更好的推广五子棋&#xff0c;研究简单的人工智能方式&#xff0c;运用Java开发五子棋游戏。主要包含了人机对战&#xff0c;棋盘初始化&#…

中国跻身量子计算第一梯队,为何它是硬科技必争之地?丨两会唠科

科技云报道原创。 “两会唠科”是由腾讯科技推出的两会特别策划&#xff0c;重点讲述中国科技名片。本期与科技云报道联合出品&#xff0c;聚焦中国量子计算研究成果和相关进展。 全球越来越多的国家加入到量子科技领域的竞赛当中&#xff0c;争夺下一步的技术战略制高点。 今…

【论文随笔】Transfer of temporal logic formulas in reinforcement learning

Zhe Xu and Ufuk Topcu. 2019. Transfer of temporal logic formulas in reinforcement learning. In Proceedings of the 28th International Joint Conference on Artificial Intelligence (IJCAI’19). AAAI Press, 4010–4018. 这是一篇将inference和learning结合起来的文章…

Selenium如何隐藏浏览器页面?

Selenium隐藏浏览器页面 背景 在工作&#xff0c;学习中&#xff0c;我们常常会使用selenium来获取网页上的数据&#xff0c;编完完整程序之后&#xff0c;实现真正意义上的自动化获取&#xff0c;此时我们会发现在运行中往往会弹出浏览器页面&#xff0c;在调试过程中&…

Java程序的逻辑控制

一、顺序结构 顺序结构比较简单&#xff0c;如果我们按照代码书写的顺序一行一行执行&#xff0c;将会是这样的&#xff1a; System.out.println("aaa"); System.out.println("bbb"); System.out.println("ccc"); // 运行结果 aaa bbb ccc 如…

网络基础服务器 与SMP、NUMA、MPP 三大体系结构科普

OSI和TCP/IP是很基础但又非常重要的知识&#xff0c;很多知识点都是以它们为基础去串联的&#xff0c;作为底层&#xff0c;掌握得越透彻&#xff0c;理解上层时会越顺畅。今天这篇网络基础科普&#xff0c;就是根据OSI层级去逐一展开的。01计算机网络基础01 计算机网络的分类按…

JVM—类加载子系统

JVM细节版架构图 ​ 本文针对Class Loader SubSystem这一块展开讲解类加载子系统的工作流程 类加载子系统作用 1.类加载子系统负责从文件系统或者网络中加载class文件&#xff0c;class文件在文件开头有特定的文件标识即16进制CA FE BA BE&#xff1b; 2.加载后的Class类信息…

Flink SQL Checkpoint 学习总结

前言 学习总结Flink SQL Checkpoint的使用&#xff0c;主要目的是为了验证Flink SQL流式任务挂掉后&#xff0c;重启时还可以继续从上次的运行状态恢复。 验证方式 Flink SQL流式增量读取Hudi表然后sink MySQL表&#xff0c;任务启动后处于running状态&#xff0c;先查看sin…

IDEA 断点总是进入class文件没有进入源文件解决

前言 idea 断点总是进入class文件没有进入源文件解决 问题 在源文件里打了断点&#xff0c;断点模式启动时却进入了class文件里的断点&#xff0c;而没有进入到java源文件里的断点。 比如&#xff1a;我在 A.java 里打了断点&#xff0c;调试时却进入到了 jar 包里的 A.clas…

基于ensp的小型局域网网络搭建及需求分析

一 需求分析本实验的目的在于建立小型局域网。由于公司由财政部、人事部、科技部三个部门组成&#xff0c;分布在同一个交换机下。设计以下网络&#xff1a;三个个部门使用两台交换机连接&#xff0c;然后连接到汇聚交换机&#xff0c;再通过路由器与外网以及其他部门网络相连。…

java TCP Socket 数据传输,服务端与客户端

java TCP Socket 数据传输&#xff0c;服务端与客户端 1. socket通信基本原理 socket 通信是基于TCP/IP 网络层上的一种传送方式&#xff0c;我们通常把TCP和UDP称为传输层。 如上图&#xff0c;在七个层级关系中&#xff0c;我们讲的socket属于传输层&#xff0c;其中UDP是…

单位冲激函数与单位阶跃函数

目录 单位阶跃函数 单位冲激函数 狄拉克定义&#xff1a; 冲激函数的性质 对时间的积分等于单位阶跃函数 筛分性质 尺度特性 冲击偶的定义&#xff1a;单位冲击函数的导数 各阶导数 离散的阶跃信号与冲激信号 &#xff08;1&#xff09;阶跃信号&#xff0c;其定义为…

vi编辑器操作指令分享

vi编辑器是所有Unix及Linux系统下标准的编辑器&#xff0c;它的强大不逊色于任何最新的文本编辑器&#xff0c;这里只是简单地介绍一下它的用法和一小部分指令。由于对Unix及Linux系统的任何版本&#xff0c;vi编辑器是完全相同的&#xff0c;因此您可以在其他任何介绍vi的地方…

国内vs国外:外贸建站该如何选择?

外贸建站找国内还是国外&#xff1f; 答案是&#xff1a;国内。 随着互联网的发展&#xff0c;越来越多的企业开始意识到在网络上进行商业活动的重要性。 其中&#xff0c;建立一个专业的外贸网站是企业在国际市场上拓展业务的关键。 然而&#xff0c;对于选择国内还是国外…

电脑出问题了怎么重装系统修好

电脑在使用过程中经常会出现各种各样的问题&#xff0c;如系统崩溃、蓝屏、病毒感染等。这些问题如果不能及时得到解决&#xff0c;将会给用户带来很多麻烦和损失。小白一键重装系统是一个功能强大的工具&#xff0c;可以帮助用户快速解决电脑常见问题。下面我们就来详细介绍如…

Vulnhub靶场----8、DC-8

文章目录一、环境搭建二、渗透流程三、思路总结一、环境搭建 DC-8下载地址&#xff1a;https://download.vulnhub.com/dc/DC-8.zip kali&#xff1a;192.168.144.148 DC-8&#xff1a;192.168.144.156 二、渗透流程 1、信息收集nmap -T5 -A -p- -sV -sT 192.168.144.156思路&am…

每日分享(四合一即时通讯聊天源码APP群聊、私聊、朋友圈)

demo软件园每日更新资源,请看到最后就能获取你想要的: 1.Python整洁编程 完整版PDF Python 与其他语言的不同之处在于&#xff0c;它是一种简单而有深度的语言。因为简单&#xff0c;所以谨慎编写代码要重要得多&#xff0c;尤其是在大项目中&#xff0c;因为代码很容易变得复…