flv.js解决延迟、卡死、断流重连问题

1、处理延迟

   const handleDelay = (): void => {
      intervalId = window.setInterval(() => {
        if (!flvPlayer) return
        if (flvPlayer.buffered.length) {
          let end = flvPlayer.buffered.end(0) //获取当前buffered值
          let diff = end - flvPlayer.currentTime //获取buffered与currentTime的差值
          if (diff >= 4) {
            console.log('处理延迟')
            //如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
            flvPlayer.currentTime = flvPlayer.buffered.end(0) - 1.5 //手动跳帧
          }
        }
      }, 2000) //2000毫秒执行一次
    }

2、处理卡死

    flvPlayer.on('statistics_info', hanleVideoDead)

    let lastDecodedFrame = 0
    const hanleVideoDead = (res: any): void => {
      if (lastDecodedFrame == 0) {
        lastDecodedFrame = res.decodedFrames
        return
      }
      if (lastDecodedFrame != res.decodedFrames) {
        lastDecodedFrame = res.decodedFrames
      } else {
        lastDecodedFrame = 0
        if (flvPlayer) {
          console.log('处理卡死')
          changeUrl()
        }
      }
    }

    const changeUrl = () => {
      if (!flvjs.isSupported()) {
        ElMessage.error('浏览器不支持')
        return
      }
      if (flvPlayer) {
        destoryPlayer()
      }
      if (props.url) {
        flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          hasAudio: false,
          url: props.url
        })
        if (flvPlayerRef.value) {
          flvPlayer.attachMediaElement(flvPlayerRef.value)
          flvPlayer.load()
          flvPlayer.play()
        }
      }
    }

3、断流重连

flvPlayer.on(flvjs.Events.ERROR, changeUrl)