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

前言:

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

效果图:

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文档:

属性说明

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

 

 

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>