flv视频流直播以及常见问题本项目需要开发一套适用于采集的可见光图像数据用于各种监控区域的深度学习算法。基于深度学习的目

改革春风春满地新的一年要争气

一：概述

本项目需要开发一套适用于采集的可见光图像数据用于各种监控区域的深度学习算法。基于深度学习的目标检测技术进行烟、火、工装、安全帽、小动物（猫、狗、兔）识别、捕捉、提取，配置虚拟安全围栏并自动识别闯入禁区的物体，研究最终形成图像自动识别与反馈服务程序接口，实现目标图像的自动识别与定位。

二：功能点

实现10路视频流的实时分析，实现4路视频展示且展示视频流中可叠加目标物体检测框；实现6种（烟、火、工装、安全帽、小动物（猫、狗、兔）及安全围栏（虚拟）的入侵检测）安全类别可配置；实现展示实时报警及历史报警页面

三：截图

四：代码

flv.js 实现视频流实时播放

初始化flv函数

initFlvPlayer(centeredVideo, url) {
  this.timer2 = null
  var mediaDataSource = {
    type: 'flv',
    isLive: true,
    withCredentials: false,
    hasAudio: false,
    hasVideo: true,
    url: url,
  };
  var player = flvjs.createPlayer(mediaDataSource, {
    // enableWorker: true,
    enableStashBuffer: false,
    stashInitialSize: 64,
    lazyLoad: false,
    lazyLoadMaxDuration: 0,
    lazyLoadRecoverDuration: 0,
    deferLoadAfterSourceOpen: false,
  });
  player.attachMediaElement(centeredVideo);
  player.load();

  let playPromise = player.play()
  if (playPromise !== undefined) {   
    playPromise.then(() => {
    player.play()
    }).catch((e)=> { console.log(e)})
  }
  return player
}

播放默认四路视频

<div v-for="(item, index) in videoOptions" :key="index" class="videoItem" :class="{videoItemActive:highlight==index}">
  <video name="videoElement" :class="setCanvasId(index)" autoplay="true" muted="true"></video>
</div>

for(let i = 0; i < 4; i++){
    this.$nextTick(()=> {
      var ind = i+1
      var centeredVideo = document.getElementsByClassName('centeredVideo'+ ind)[0]
      this.video.push(centeredVideo)
      if(videoOptions){
        let FourPlayer = this.initFlvPlayer(centeredVideo, videoOptions[i].url)
        this.player.push(FourPlayer)
      } else {
        let FourPlayer = this.initFlvPlayer(centeredVideo, this.flvUrlList[i])
        this.player.push(FourPlayer)
      }
    })
 }

四：常见问题

主动追帧问题

 if(this.video !== []) {
    for (let index = 0; index < this.video.length; index++) {
      const element = this.video[index];
      let buffered = element.buffered
      if (buffered.length > 0) {
        let end = buffered.end(0)
        var diff = end - element.currentTime;
        if(diff > 0.15){
          element.currentTime = end - 0.1
        }
      }
    }
 }

视频销毁

// 封装
pausemix(flvPlayer) {
  flvPlayer.pause()
  flvPlayer.unload()
  flvPlayer.detachMediaElement()
  flvPlayer.destroy()
  flvPlayer = null
}
调用
if(this.player[3]._mediaElement !== null) {
  this.pausemix(this.player[3])
}

监听是否断流

player.on("error", err => {
    this.$message.error('有视频断流，自动刷新浏览器')
    this.timer2 = setInterval(() => {
      window.location.reload()
    }, 3000)
})

切换视频流

切换之前要销毁正在播放的视频流，然后再初始化新的视频流
视频流是否销毁看浏览器Network的Overview 显示获取到资源的时间轴信息，如果销毁掉，视频就不执行了。
初始化的时候要对实例化对象进行全局保存，以便销毁的时候调用

至此完结！best regards！

flv视频流直播以及常见问题

改革春风春满地 新的一年要争气