Foreword:

When we implement audio and video-live/recorded playback in the applet, we will use two components officially provided by WeChat, the push component and the pull component. Here I will share the use and specific needs of his pull component. Point of attention.

Renderings:

1. Stream status code log

2. Code usage screenshot:

Official documentation:

Precautions:

1. To use audio and video, if it involves live broadcast, the applet must apply for live broadcast permission, otherwise you will have problems in the trial

2. Audio and video address. Currently only supports the flvformat rtmp

3. Among the status codes of the network, there are no official documents, such as 2026, 6000, etc.

Specific use:

1. Use tags on 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. Define variables and methods in 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 documentation:

property description

Attributes type Defaults required illustrate minimum version

src string no Audio and video address. Currently only supports the flvformat rtmp 1.7.0

mode string live no model 1.7.0

legal value	illustrate
live	live streaming
RTC	Real-time call, this mode has lower delay

autoplay boolean false no Autoplay 1.7.0

muted boolean false no Whether to mute 1.7.0

orientation string vertical no screen orientation 1.7.0

legal value	illustrate
vertical	vertically
horizontal	level

object-fit string contain no Filling mode, optional values are contain,fillCrop 1.7.0

legal value	illustrate
contain	The long side of the image fills the screen, and the short side area will be filled with black
fillCrop	The image fills the screen, and the part beyond the display area will be cut off

background-mute boolean false no Whether to mute when entering the background (deprecated, the default is to exit the background and mute) 1.7.0

min-cache number 1 no Minimum buffer, unit s (RTC mode recommends 0.2s) 1.7.0

max-cache number 3 no The maximum buffer, in s (recommended 0.8s in RTC mode). The buffer is used to resist network fluctuations. The more buffered data, the better the network resistance, but the greater the delay. 1.7.0

sound-mode string speaker no Sound output method 1.9.90

legal value	illustrate
speaker	speaker
ear	earpiece

auto-pause-if-navigate boolean true no When jumping to other pages of this applet, whether to automatically pause the real-time audio and video playback of this page 2.5.0

auto-pause-if-open-native boolean true no When jumping to other WeChat native pages, whether to automatically pause the real-time audio and video playback of this page 2.5.0

picture-in-picture-mode string/Array no Set the window mode: push, pop, empty string or set multiple modes in the form of an array (eg: ["push", "pop"]) 2.10.3

legal value	illustrate
[]	Cancel small window
push	Trigger small window when routing push
pop	Trigger small window when routing pop

enable-auto-rotation boolean false no Whether to enable automatic full screen when the mobile phone is horizontally screened, and it will take effect when the system settings enable automatic rotation 2.11.0

referrer-policy string no-referrer no The format is fixed https://servicewechat.com/{appid}/{version}/page-frame.html, where {appid} is the appid of the applet, {version} is the version number of the applet, the version number is 0, which means the development version, trial version and audit version, the version number is devtools, which means the developer tool, and the rest is the official version; 2.13.0

legal value	illustrate
origin	send full referrer
no-referrer	Do not send

bindstatechange eventhandle no Play state change event, detail = {code} 1.7.0

bindfullscreenchange eventhandle no Full screen change event, detail = {direction, fullScreen} 1.7.0

bindnetstatus eventhandle no Network status notification, detail = {info} 1.9.0

bindaudiovolumenotify eventhandler no Play volume notification, detail = {} 2.10.0

bindenterpictureinpicture eventhandler no The player enters the small window 2.11.0

bindleavepictureinpicture eventhandler no Player exits the widget 2.11.0

status code

the code	illustrate
2001	Streaming: already connected to the server
2002	Streaming: already connected to the RTMP server, start streaming
2003	Pull flow: The network receives the first video data packet (IDR)
2004	Pull streaming: video playback starts
2005	Streaming: video playback progress
2006	Streaming: video playback ends
2007	Pull stream: video playback Loading
2008	Pull stream: decoder starts
2009	Pull Streaming: Video Resolution Changed
2030	The audio device changes, that is, the current input and output device changes, such as the headset is pulled out
2032	Streaming: video rendering first frame event
2101	Streaming: The decoding of the current video frame failed
2102	Streaming: the decoding of the current audio frame failed
2103	Streaming: network disconnection, automatic reconnection has been activated
2104	Pulling streams: Unstable packets coming from the network: It may be due to insufficient downlink bandwidth, or uneven outflow from the host end
2105	Streaming: the current video playback freezes
2106	Streaming: the hard solution fails to start, and the soft solution is used
2107	Streaming: The current video frame is not continuous, and frames may be dropped
2108	Streaming: The first I frame of the current stream hard decoding fails, and the SDK automatically switches to soft decoding
3001	Pull stream: RTMP -DNS resolution failed
3002	Streaming: RTMP server connection failed
3003	Streaming: RTMP server handshake failed
3005	Streaming: RTMP read/write fails, and then a network retry will be initiated
-2301	Streaming: The network is disconnected, and it will not work after multiple reconnections. Please restart the streaming by yourself
-2302	Pull stream: Failed to obtain the pull stream address

The use of live-player, the streaming component of the applet