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

前言：

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

效果图：

1、拉流状态code日志

 

2、代码使用截图：

 官方文档：

live-player | 微信开放文档

 注意事项：

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

2、音视频地址。目前仅支持 flv, rtmp 格式

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

属性说明

状态码