vue需求识别监控中的图像人物加上红框,移动的车辆加上绿框,类似于图片识别功能

我的监控呈现实现代码

import HlsJsPlayer from 'xgplayer-hls.js';
  computed: {
    ...mapState({
      list: (state) => state.videoList.listone,
    }),
    newlist() {
      return JSON.parse(JSON.stringify(this.list));
    },
  },
  mounted() {
    this.videoBox();
  },
  methods: {
    videoBox() {
      // console.log('videoSrc:', videosrc);
      if (this.player) {
        this.player.destroy(true);
        this.player = null;
        // this.player.src = this.list.rtmpUrl
        // console.log(this.player.currentSrc)
      }
      if (this.list.status == 1) {
        this.player = new HlsJsPlayer({
          id: 'videoElement',
          url: this.list.rtmpUrl,
          lang: 'zh-cn',
          autoplay: true,  //自动播放
          playsinline: true,  
          fluid: true,
          ignores: ['volume'],//控制条忽略相关配置项 ['time', 'definition', 'error', 'fullscreen', 'i18n', 'loading', 'mobile', 'pc', 'play', 'poster', 'progress', 'replay', 'volume']
          fitVideoSize: 'fixWidth',
        });
      }
    },
  },
  beforeDestroy() {
    if (this.player) {
      this.player.destroy(true);
      this.player = null;
    }
  },

 

这个 一般 有 第三方的 功能支持 。如果自己开发 可能周期会长一些