小程序的拉流组件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文档：

属性说明

	属性	类型	默认值	必填	说明	最低版本
	src	string		否	音视频地址。目前仅支持 flv, rtmp 格式	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	否	填充模式，可选值有 contain，fillCrop	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	拉流：获取拉流地址失败