优化长春跟踪切换功能

zhangzengfei

2021-10-12 3e2fcc570f8192aabdcc4721e521ee1341c73aa7

优化长春跟踪切换功能

 src/components/player/wfs/controller/buffer-controller.js

@@ -2,17 +2,12 @@
 * Buffer Controller
 */
/* eslint-disable */
import Event from '../events';
import EventHandler from '../event-handler';
import Event from "../events";
import EventHandler from "../event-handler";

class BufferController extends EventHandler {
  constructor(wfs) {
    super(
      wfs,
      Event.MEDIA_ATTACHING,
      Event.BUFFER_APPENDING,
      Event.BUFFER_RESET
    );
    super(wfs, Event.MEDIA_ATTACHING, Event.BUFFER_APPENDING, Event.BUFFER_RESET);

    this.mediaSource = null;
    this.media = null;
@@ -27,10 +22,10 @@
    this.onsbue = this.onSBUpdateEnd.bind(this);

    this.browserType = 0;
    if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) {
    if (navigator.userAgent.toLowerCase().indexOf("firefox") !== -1) {
      this.browserType = 1;
    }
    this.mediaType = 'H264Raw';
    this.mediaType = "H264Raw";

    this.websocketName = undefined;
    this.channelName = undefined;
@@ -54,9 +49,9 @@
      this.onmso = this.onMediaSourceOpen.bind(this);
      this.onmse = this.onMediaSourceEnded.bind(this);
      this.onmsc = this.onMediaSourceClose.bind(this);
      ms.addEventListener('sourceopen', this.onmso);
      ms.addEventListener('sourceended', this.onmse);
      ms.addEventListener('sourceclose', this.onmsc);
      ms.addEventListener("sourceopen", this.onmso);
      ms.addEventListener("sourceended", this.onmse);
      ms.addEventListener("sourceclose", this.onmsc);
      // link video and media Source
      media.src = URL.createObjectURL(ms);
    }
@@ -78,7 +73,7 @@
  }

  onMediaSourceEnded() {
    console.log('media source ended');
    console.log("media source ended");
  }

  onSBUpdateEnd(event) {
@@ -99,10 +94,10 @@
    let mediaSource = this.mediaSource;
    if (mediaSource) {
      // once received, don't listen anymore to sourceopen event
      mediaSource.removeEventListener('sourceopen', this.onmso);
      mediaSource.removeEventListener("sourceopen", this.onmso);
    }

    if (this.mediaType === 'FMp4') {
    if (this.mediaType === "FMp4") {
      this.checkPendingTracks();
    }

@@ -116,13 +111,13 @@
  }

  checkPendingTracks() {
    this.createSourceBuffers({ tracks: 'video', mimeType: '' });
    this.createSourceBuffers({ tracks: "video", mimeType: "" });
    this.pendingTracks = {};
  }

  onBufferReset(data) {
    if (this.mediaType === 'H264Raw') {
      this.createSourceBuffers({ tracks: 'video', mimeType: data.mimeType });
    if (this.mediaType === "H264Raw") {
      this.createSourceBuffers({ tracks: "video", mimeType: data.mimeType });
    }
  }

@@ -130,15 +125,15 @@
    var sourceBuffer = this.sourceBuffer,
      mediaSource = this.mediaSource;
    let mimeType;
    if (tracks.mimeType === '') {
      mimeType = 'video/mp4;codecs=avc1.420028'; // avc1.42c01f avc1.42801e avc1.640028 avc1.420028
    if (tracks.mimeType === "") {
      mimeType = "video/mp4;codecs=avc1.420028"; // avc1.42c01f avc1.42801e avc1.640028 avc1.420028
    } else {
      mimeType = 'video/mp4;codecs=' + tracks.mimeType;
      mimeType = "video/mp4;codecs=" + tracks.mimeType;
    }

    try {
      let sb = (sourceBuffer['video'] = mediaSource.addSourceBuffer(mimeType));
      sb.addEventListener('updateend', this.onsbue);
      let sb = (sourceBuffer["video"] = mediaSource.addSourceBuffer(mimeType));
      sb.addEventListener("updateend", this.onsbue);
      track.buffer = sb;
    } catch (err) {}
    this.wfs.trigger(Event.BUFFER_CREATED, { tracks: tracks });
@@ -161,6 +156,8 @@
        return;
      }

      wfs.playerStatus = 1;

      if (segments && segments.length) {
        var segment = segments.shift();
        try {

 src/components/player/wfs/wfs.js

@@ -2,28 +2,26 @@
 * WFS interface, Jeff Yang 2016.10
 */
/* eslint-disable */
'use strict';
"use strict";

import Event from './events';
import FlowController from './controller/flow-controller';
import BufferController from './controller/buffer-controller';
import EventEmitter from 'events';
import Event from "./events";
import FlowController from "./controller/flow-controller";
import BufferController from "./controller/buffer-controller";
import EventEmitter from "events";
// import XhrLoader from './utils/xhr-loader';
import WebsocketLoader from './loader/websocket-loader';
import WebsocketLoader from "./loader/websocket-loader";

class Wfs {
  static get version() {
    // replaced with browserify-versionify transform
    return '__VERSION__' + 'v.0.0.0.1';
    return "__VERSION__" + "v.0.0.0.1";
  }

  static isSupported() {
    return (
      window.MediaSource &&
      typeof window.MediaSource.isTypeSupported === 'function' &&
      window.MediaSource.isTypeSupported(
        'video/mp4; codecs="avc1.42c01f,mp4a.40.2"'
      )
      typeof window.MediaSource.isTypeSupported === "function" &&
      window.MediaSource.isTypeSupported('video/mp4; codecs="avc1.42c01f,mp4a.40.2"')
    );
  }

@@ -86,6 +84,7 @@
    this.websocketLoader = new WebsocketLoader(this);
    this.mediaType = undefined;
    this.cameraInfo = {};
    this.playerStatus = -1;
  }

  destroy() {
@@ -95,13 +94,7 @@
    this.websocketLoader.destroy();
  }

  attachMedia(
    media,
    channelName = 'chX',
    mediaType = 'H264Raw',
    websocketName = 'ws',
    cameraInfo = {}
  ) {
  attachMedia(media, channelName = "chX", mediaType = "H264Raw", websocketName = "ws", cameraInfo = {}) {
    // 'H264Raw' 'FMp4'
    this.mediaType = mediaType;
    this.media = media;

 src/pages/changchunTrack/components/VideoItem.vue

@@ -6,10 +6,7 @@
    @mouseenter.stop.prevent="videoMouseEnter($event)"
    @mouseleave="videoMouseLeave($event)"
  >
    <div
      class="video-box-top"
      v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null"
    >
    <div class="video-box-top" v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null">
      <b>{{ videoItem.name }}</b>
      <span @click="deleteVideo(videoIndex)">×</span>
    </div>
@@ -35,23 +32,34 @@
        :isRunning="videoItem.isRunning"
        :isGb="videoItem.cameraType === 1"
        :showArea="showArea"
        :hasPoster="hasPoster"
        v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && TreeDataPool.treeActiveName==='camera'"
        v-if="!quietSwitch && videoItem !== '' && videoItem !== undefined && videoItem !== null"
      ></camera-player>

      <video
        v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && TreeDataPool.treeActiveName==='dataStack'"
        :src="videoItem.rtsp"
        autoplay="autoplay"
        poster="/images/cameraVideo/video-poster.png"
        controls
      >您的浏览器不支持 video 标签。</video>
      <camera-player
        :cameraName="qsVideoItem0.name"
        :cameraID="qsVideoItem0.id"
        :rtspUrl="qsVideoItem0.rtsp"
        :isRunning="qsVideoItem0.isRunning"
        :isGb="qsVideoItem0.cameraType === 1"
        v-show="quietSwitch && workPlayer === 0"
        ref="qsPlayer0"
        v-if="qsVideoItem0 !== '' && qsVideoItem0 !== undefined && qsVideoItem0 !== null"
      ></camera-player>
      <camera-player
        :cameraName="qsVideoItem1.name"
        :cameraID="qsVideoItem1.id"
        :rtspUrl="qsVideoItem1.rtsp"
        :isRunning="qsVideoItem1.isRunning"
        :isGb="qsVideoItem1.cameraType === 1"
        v-show="quietSwitch && workPlayer === 1"
        ref="qsPlayer1"
        v-if="qsVideoItem1 !== '' && qsVideoItem1 !== undefined && qsVideoItem1 !== null"
      ></camera-player>
    </div>
  </div>
</template>

<script>
import { ptzControl } from "@/api/camera"
import { ptzControl } from "@/api/camera";

import CameraPlayer from "@/components/player";

@@ -67,31 +75,39 @@
    videoIndex: null,
    starW: {
      type: String,
      default: ''
      default: ""
    },
    starH:{
      type: String,
      default: ''
      default: ""
    },
    videoItem: {
      type: [Object, String],
      default: null
    },
    showArea: Boolean,
    hasPoster: Boolean,
    showArea: {
      type: Boolean,
      default: false
    },
    quietSwitch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timer: '',
      timer: "",
      mouseDown: false,
      videoDataItem: null
    }
      workPlayer: -1,
      qsVideoItem0: null,
      qsVideoItem1: null,
      checkStatusTimer: 0
    };
  },
  computed: {
    vWidth() {
      if (this.starW!=0) {
        return this.starW
       
        return this.starW;
      }
      let per = (1 / this.videoGuid) * 100 + "%";
      return `calc(${per} - 4px)`;
@@ -99,10 +115,52 @@
    
    vHeight() {
      if (this.starH!=0) {
        return this.starH
        return this.starH;
      }
      let per = (1 / this.videoGuid) * 100 + "%";
      return `calc(${per} - 4px)`;
    }
  },
  watch: {
    videoItem: function(newVal, oldVal) {
      if (!this.quietSwitch) {
        return;
      }

      console.log("new rtsp:", newVal);
      console.log("this.workPlayer:", this.workPlayer);
      // 首次
      if (this.workPlayer < 0) {
        this.workPlayer = 0;
        this.qsVideoItem0 = newVal;
        return;
      }

      let _this = this;
      clearInterval(_this.checkStatusTimer);

      if (_this.workPlayer == 0) {
        _this.qsVideoItem1 = newVal;
        _this.checkStatusTimer = setInterval(() => {
          // console.log(_this.$refs.qsPlayer1.wfs.playerStatus);
          if (_this.$refs.qsPlayer1.wfs.playerStatus == 1) {
            _this.workPlayer = 1;
            _this.qsVideoItem0 = null;
            clearInterval(_this.checkStatusTimer);
          }
        }, 1000);
      }

      if (_this.workPlayer == 1) {
        _this.qsVideoItem0 = newVal;
        _this.checkStatusTimer = setInterval(() => {
          if (_this.$refs.qsPlayer0.wfs.playerStatus == 1) {
            _this.workPlayer = 0;
            _this.qsVideoItem1 = null;
            clearInterval(_this.checkStatusTimer);
          }
        }, 1000);
      }
    }
  },
  methods: {
@@ -113,42 +171,40 @@
      // 当前只支持国标摄像机
      // console.log(type, 'ptCtrl')
      if (this.videoItem.cameraType != 1) {
        return
        return;
      }
      this.mouseDown = true;
      let params = {
        cameraId: this.videoItem.id,
        cameraType: this.videoItem.cameraType,
        PTZType: type
      }
      ptzControl(params).then(rsp => {
      };
      ptzControl(params).then((rsp) => {
        // console.log(rsp)
      })
      let that = this
      });
      let that = this;
      this.timer = setTimeout(() => {
        that.ptStop()
      }, 5000)
        that.ptStop();
      }, 5000);
    },
    ptStop() {
      // 当前只支持国标摄像机
      if (this.videoItem.cameraType != 1) {
        return
        return;
      }
      let params = {
        cameraId: this.videoItem.id,
        cameraType: this.videoItem.cameraType,
        PTZType: "stop"
      }
      };
      if (this.mouseDown) {
        this.mouseDown = false
        ptzControl(params).then(rsp => {
        this.mouseDown = false;
        ptzControl(params).then((rsp) => {
          // console.log(rsp)
        })
        });
      }
    },
    deleteVideo(index) {
      let video = this.TreeDataPool.videoArr;
      video[index].isPlaying = false;
      this.TreeDataPool.setVideoArr(index, undefined, this);
    },
    videoMouseEnter(e) {

 src/pages/changchunTrack/index/Video.vue

@@ -3,44 +3,13 @@
    <div class="monitoring-right" ref="videoRight">
      <div class="main-top">
        <div class="monitoring-video" ref="monitorVideo">
          <!-- <div class="monitoring-video-guid">
            <span
              :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
              @click="setGuid(1)"
            ></span>
            <span
              :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
              @click="setGuid(2)"
            ></span>
            <span
              :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
              @click="setGuid(3)"
            ></span>
            <el-tooltip v-if="TreeDataPool.selectedNode.id" :content="`${showArea?'隐藏区域':'查看区域'}`" placement="bottom" popper-class="atooltip">
              <span :class="showArea?'activegongge':''" class="iconfont iconquyu" @click="toggleShowArea"></span>
            </el-tooltip>
          </div> -->
          <div class="fixedRatioBox">
            <div
              class="video-main-box-side"
              v-if="visibilityState && allVideoNum == 5"
            >
            <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 5">
              <VideoItem
                :videoGuid="guid"
                :starW="`calc(66.66% - 4px)`"
                :starH="`calc(66.66% - 4px)`"
                :videoItem="centerVideo"
                :showArea="showArea"
                v-show="!showBackup"
                class="activeItem"
              ></VideoItem>
              <VideoItem
                :videoGuid="guid"
                :starW="`calc(66.66% - 4px)`"
                :starH="`calc(66.66% - 4px)`"
                :videoItem="BackupVideo"
                :showArea="showArea"
                v-show="showBackup"
                quietSwitch
                class="activeItem"
              ></VideoItem>
              <VideoItem
@@ -49,21 +18,17 @@
                :videoGuid="guid"
                :videoIndex="index"
                :videoItem="item"
                :showArea="showArea"
                @click="videoItemClick(index)"
              ></VideoItem>
            </div>

            <div
              class="video-main-box-side"
              v-if="visibilityState && allVideoNum == 7"
            >
            <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 7">
              <VideoItem
                :videoGuid="guid"
                :starW="`calc(74.99% - 4px)`"
                :starH="`calc(74.99% - 4px)`"
                :videoItem="centerVideo"
                :showArea="showArea"
                quietSwitch
                class="activeItem"
              ></VideoItem>

@@ -73,15 +38,11 @@
                :videoGuid="guid"
                :videoIndex="index"
                :videoItem="item"
                :showArea="showArea"
                @click="videoItemClick(index)"
              ></VideoItem>
            </div>

            <div
              class="video-main-box-side"
              v-if="visibilityState && allVideoNum == 12"
            >
            <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 12">
              <div style="width: 100%; height: 25%">
                <VideoItem
                  v-for="(item, index) in TreeDataPool.videoArr.slice(0, 4)"
@@ -91,7 +52,6 @@
                  :starW="`calc(24.99% - 4px)`"
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -104,7 +64,6 @@
                  :starW="`calc(100% - 4px)`"
                  :starH="`calc(50% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -113,19 +72,8 @@
                :starW="`calc(50% - 4px)`"
                :starH="`calc(50% - 4px)`"
                :videoItem="centerVideo"
                :showArea="showArea"
                :hasPoster="false"
                quietSwitch
              ></VideoItem>
              <!-- <VideoItem
                :videoGuid="guid"
                :starW="`calc(50% - 4px)`"
                :starH="`calc(50% - 4px)`"
                :videoItem="centerVideo"
                :showArea="showArea"
                class="activeItem"
                v-if="!showSub"
                
              ></VideoItem> -->

              <div style="width: 25%; height: 50%; float: left">
                <VideoItem
@@ -136,7 +84,6 @@
                  :starW="`calc(100% - 4px)`"
                  :starH="`calc(50% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -149,16 +96,12 @@
                  :starW="`calc(24.99% - 4px)`"
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
            </div>

            <div
              class="video-main-box-side"
              v-if="visibilityState && allVideoNum == 16"
            >
            <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 16">
              <div style="width: 100%; height: 20%">
                <!-- :class="[
                    TreeDataPool.activeVideoIndex === index + 1
@@ -174,7 +117,6 @@
                  :starW="`calc(19.99% - 4px)`"
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -187,7 +129,6 @@
                  :starW="`calc(100% - 4px)`"
                  :starH="`calc(33.33% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -196,7 +137,7 @@
                :starW="`calc(60% - 4px)`"
                :starH="`calc(60% - 4px)`"
                :videoItem="centerVideo"
                :showArea="showArea"
                quietSwitch
                class="activeItem"
              ></VideoItem>
              <div style="width: 20%; height: 60%; float: left">
@@ -208,7 +149,6 @@
                  :starW="`calc(100% - 4px)`"
                  :starH="`calc(33.33% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -221,7 +161,6 @@
                  :starW="`calc(19.99% - 4px)`"
                  :starH="`calc(100% - 4px)`"
                  :videoItem="item"
                  :showArea="showArea"
                  @click="videoItemClick(index)"
                ></VideoItem>
              </div>
@@ -235,42 +174,34 @@

<script>
import VideoItem from "../components/VideoItem";
import { getCameraPlayList, showAllCameras } from "@/api/trackCamera";
import { showAllCameras } from "@/api/trackCamera";

export default {
  name: "Video",
  components: {
    VideoItem,
    VideoItem
  },
  computed: {
    nextIndex() {
      if (this.centerIndex == this.list2TakeTurn.length - 1) {
        return 0;
      }
      return this.centerIndex + 1;
    }
  },
  data() {
    return {
      guid: 3,
      center: "",
      defaultHeight: 432,
      defaultWidth: 600,
      track: false,
      traceCache: {},
      traceTimer: null,
      tracePubUrl: `${location.protocol === "https" ? "wss" : "ws"}://${
        location.host
      }/track`,
      websocket: null,
      visibilityState: true,
      showArea: false,
      videoNum2Play: 0,
      allVideoNum: 5,
      centerVideo: null,
      BackupVideo: null,
      list2TakeTurn: [],
      timer: null,
      reqTimer: null,
      centerIndex: 0,
      showBackup: false,
      centerIndex: 0
    };
  },
  created() {
    this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndex
      ? Number(sessionStorage.activeIndex)
      : this.TreeDataPool.activeVideoIndex;
    this.getActiveIndex();
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.gbReadonly = true;
@@ -278,19 +209,9 @@
  },
  mounted() {
    document.addEventListener("visibilitychange", this.visibilitychange, false);
    this.$nextTick(() => {
      window.addEventListener("resize", this.resizeMonitorTask);
      //this.getRightWidth();
      this.resizeMonitorTask();
    });
    this.getCenter();
    this.blackAngWhite();
    this.VideoPhotoData.queryTagList();
    // let
    // this.TreeDataPool.getAllChildrenNodes()
    showAllCameras()
      .then((res) => {
        this.videoNum2Play = res.data.length;
        this.setAllVideoNum(res.data.length);
        res.data.forEach((info, i) => {
          let camera = this.TreeDataPool.getCameraInfoById(info.id);
          this.TreeDataPool.setVideoArr(i, camera, this);
@@ -311,40 +232,52 @@
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.getRightWidth);
    this.CardList.details = [];
    window.clearInterval(this.trackTimer);
    if (this.websocket) {
      this.websocket.close();
    }
  },
  watch: {
    "TreeDataPool.videoArr": function (newArry) {
      const cameras = this.filterNodes(newArry);
    "TreeDataPool.videoArr"(value) {
      this.getActiveIndex();
    },
    "VideoPhotoData.selectBlacks": function (value) {
      this.blackAngWhite();
    },
    "VideoPhotoData.selectWhites": function (value) {
      this.blackAngWhite();
    },
    "TreeDataPool.showTreeBox"(value) {
      this.getRightWidth();
    },
    "TreeDataPool.selectedNodes.length"(value) {
      this.getActiveIndex();
      this.list2TakeTurn = [];
      this.videoNum2Play = this.TreeDataPool.selectedNodes.length;
      this.TreeDataPool.selectedNodes.forEach((id, i) => {
        let camera = this.TreeDataPool.getCameraInfoById(id);
        this.TreeDataPool.setVideoArr(i, camera, this);
      this.setAllVideoNum(this.TreeDataPool.selectedNodes.length);
      this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, this.TreeDataPool.selectedNode, this);

        if (camera.status >= 1) {
          this.list2TakeTurn.push(camera);
      // this.TreeDataPool.selectedNodes.forEach((id, i) => {
      //   let camera = this.TreeDataPool.getCameraInfoById(id);
      //   this.TreeDataPool.setVideoArr(i, camera, this);

      //   if (camera.status >= 1) {
      //     this.list2TakeTurn.push(camera);
      //   }
      // });

      this.centerVideo = { ...this.TreeDataPool.selectedNode };
        }
      });
    },
  },
  methods: {
    setAllVideoNum(videoCount) {
      if (videoCount <= 5) {
        this.guid = 3;
        this.allVideoNum = 5;
      } else if (videoCount <= 7) {
        this.guid = 4;
        this.allVideoNum = 7;
      } else if (videoCount <= 12) {
        this.guid = 4;
        this.allVideoNum = 12;
      } else if (videoCount <= 16) {
        this.guid = 5;
        this.allVideoNum = 16;
      } else {
        this.guid = 5;
        this.allVideoNum = 16;
      }
    },
    isSame(arr1, arr2) {
      let _arr1 = [];
      arr1.forEach((item) => {
@@ -360,35 +293,21 @@
      }
      return true;
    },
    centerPlay(typ) {
    centerPlay() {
      if (this.list2TakeTurn.length == 1) {
        this.centerVideo = this.list2TakeTurn[0];
        this.centerVideo = { ...this.list2TakeTurn[0] };
        return;
      }
      let that = this;
      // if () {

      // }
      if (typ == 'change') {
        this.showBackup = true;
      }
      that.centerVideo = that.list2TakeTurn[that.centerIndex];
      that.centerVideo = { ...that.list2TakeTurn[that.centerIndex] };
      that.centerIndex++;
      if (that.centerIndex == that.list2TakeTurn.length) {
        that.centerIndex = 0;
      }
      if (typ == 'change') {
        setTimeout(() => {
          this.showBackup = false;
          that.BackupVideo = that.centerVideo;
        }, 2000);
      }else{
        that.BackupVideo = that.centerVideo;
      }

      clearInterval(this.timer);
      this.timer = setInterval(() => {
        that.centerVideo = that.list2TakeTurn[that.centerIndex];
        that.centerVideo = { ...that.list2TakeTurn[that.centerIndex] };
        that.centerIndex++;
        if (that.centerIndex == that.list2TakeTurn.length) {
          that.centerIndex = 0;
@@ -413,143 +332,10 @@
          if (newArr.length != 0 && !this.isSame(this.list2TakeTurn, newArr)) {
            this.list2TakeTurn = [...newArr1];
            this.centerIndex = 0;
            this.centerPlay('change');
            this.centerPlay("change");
          }
        });
      }, 2500);
    },
    initTrackWebsocket() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.websocket = new WebSocket(this.tracePubUrl);
        // 监听socket消息
        this.websocket.onopen = this.websocketonopen;
        this.websocket.onmessage = this.recvieTrackMessage;
      }
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      this.websocket.send("sub");
    },
    tracking() {
      getCameraPlayList().then((data) => {
        if (data && data.length) {
          data.forEach((ins) => {
            let newCamera = this.TreeDataPool.getCameraInfoById(
              ins.NewCameraId
            );
            if (!newCamera) {
              console.log("未查找到摄像机：", ins.NewCameraId);
              return;
            }
            if (ins.IsNew) {
              this.newPlayerInViewBox(newCamera);
            } else {
              this.replacePlayer(newCamera, ins.OldCameraId);
            }
          });
        }
      });
    },
    recvieTrackMessage(e) {
      let dataJson = JSON.parse(e.data);
      let cache = this.traceCache;
      let camera = dataJson.camera;
      let person = dataJson.person;
      let create = false;

      // 如果是已经在播放的摄像机, 直接返回
      if (cache[camera]) {
        cache[camera][person] = 10;
        return;
      }

      cache[camera] = {};
      cache[camera][person] = 10;

      // 查询播放该人的上一个摄像机
      for (var cam in cache) {
        if (cam === camera) {
          continue;
        }

        if (cache[cam][person]) {
          // 找到上一个摄像机, 判断摄像机里是否还有其他人, 有:新开播放器 没有:切换
          console.log("last camera:", cam, Object.keys(cache[cam]).length);
          if (Object.keys(cache[cam]).length > 2) {
            delete cache[cam][person];
            this.newPlayerInViewBox(camera);
            return;
          } else {
            this.replacePlayer(camera, cam);
            delete cache[cam];
            return;
          }
        }
      }

      // 未发现播放记录
      this.newPlayerInViewBox(camera);
    },
    newPlayerInViewBox(id) {
      // 新增播放窗口
      let camera = this.TreeDataPool.getCameraInfoById(id);
      let emptyIndex = -1;
      let exist = false;
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          this.TreeDataPool.videoArr[i] === "" ||
          this.TreeDataPool.videoArr[i] === undefined
        ) {
          if (emptyIndex === -1) {
            emptyIndex = i;
          }
        } else {
          if (this.TreeDataPool.videoArr[i].id === camera.id) {
            exist = true;
          }
        }
      }
      if (!exist && emptyIndex !== -1) {
        this.TreeDataPool.setVideoArr(emptyIndex, camera, this);
      }
    },
    replacePlayer(id, oldCameraId) {
      let camera = this.TreeDataPool.getCameraInfoById(id);
      // 替换播放器
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          this.TreeDataPool.videoArr[i] &&
          this.TreeDataPool.videoArr[i] !== undefined &&
          this.TreeDataPool.videoArr[i] !== ""
        ) {
          if (this.TreeDataPool.videoArr[i].id === oldCameraId) {
            this.TreeDataPool.setVideoArr(i, camera, this);
            return true;
          }
        }
      }

      return false;
    },
    closePlayer(id) {
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          this.TreeDataPool.videoArr[i] &&
          this.TreeDataPool.videoArr[i] !== undefined &&
          this.TreeDataPool.videoArr[i] !== ""
        ) {
          if (this.TreeDataPool.videoArr[i].id === id) {
            this.TreeDataPool.setVideoArr(i, undefined, this);
            return true;
          }
        }
      }
    },
    visibilitychange() {
      switch (document.visibilityState) {
@@ -561,198 +347,27 @@
          break;
      }
    },
    blackAngWhite() {
      if (this.VideoPhotoData.selectBlacks.length > 0) {
        for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
          this.$set(this.VideoPhotoData.whiteList[i], "disabled", true);
        }
      }
      if (this.VideoPhotoData.selectBlacks.length == 0) {
        for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
          this.$set(this.VideoPhotoData.whiteList[i], "disabled", false);
        }
      }
      if (this.VideoPhotoData.selectWhites.length > 0) {
        for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
          this.$set(this.VideoPhotoData.blackList[i], "disabled", true);
        }
      }
      if (this.VideoPhotoData.selectWhites.length == 0) {
        for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
          this.$set(this.VideoPhotoData.blackList[i], "disabled", false);
        }
      }
    },
    closeWindow(index) {
      this.CardList.addBaseList.splice(index, 1);
    },
    getVideoHeight() {
      let h = this.$refs.monitorVideo.offsetHeight;
      // this.$refs.monitorTask.style.height = h + "px";
    },
    resizeMonitorTask() {
      this.getRightWidth();
      this.getVideoHeight();
    },
    getRightWidth() {
      let w = this.$refs.videoRight.offsetWidth;
      // this.$refs.monitorTask.style.width =w - this.$refs.monitorVideo.offsetWidth - 40 + "px";
    },
    filterNodes(selectArry) {
      let nodes = [];
      selectArry.forEach((i) => {
        if (i && nodes.indexOf(i.id) < 0) {
          nodes.push(i.id);
        }
      });
      return nodes;
    },
    videoItemClick(index) {
      this.TreeDataPool.activeVideoIndex = index;
      this.TreeDataPool.activeForceChoose = true;
    },
    toAdd(item) {
      this.CardList.addBaseList.push(item);
    },
    getCenter() {
      this.center = {
        x: document.documentElement.clientWidth / 2 - 250,
        y: document.documentElement.clientHeight / 2 - 200,
      };
    },
    resizeWidth(w) {
      this.defaultWidth = w;
    },
    resizeHeight(h) {
      this.defaultHeight = h;
    },
    saveAddBase(item, index) {
      if (
        this.VideoPhotoData.selectBlacks.length === 0 &&
        this.VideoPhotoData.selectWhites.length === 0
      ) {
        this.$notify({
          title: "注意",
          message: "请选择要添加的底库",
          type: "warning",
        });
        return;
      }
      let res = this.VideoPhotoData.addBase(item);
      res.then((data) => {
        console.log("then", data);
        if (data.success) {
          this.$notify({
            title: "成功",
            message: data.data,
            type: "success",
          });
        } else {
          this.$notify({
            title: "失败",
            message: data.data,
            type: "error",
          });
        }
        this.CardList.addBaseList.splice(index, 1);
        this.VideoPhotoData.selectBlacks = [];
        this.VideoPhotoData.selectWhites = [];
      });
    },
    getActiveIndex() {
      this.TreeDataPool.videoArr.length = this.allVideoNum;
      let nullVideoIndex = "";
      for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
        // eslint-disable-next-line
        if (
          this.TreeDataPool.videoArr[i] === "" ||
          this.TreeDataPool.videoArr[i] === undefined
        ) {
        if (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
          nullVideoIndex = i;
        } else {
          nullVideoIndex = "";
          break;
        }
      }
      if (
        this.TreeDataPool.activeVideoIndex !== "" &&
        this.TreeDataPool.activeVideoIndex <
          this.TreeDataPool.videoArr.length - 1
      ) {
        return this.TreeDataPool.activeVideoIndex;
      } else {
        if (nullVideoIndex === "") {
          this.TreeDataPool.activeVideoIndex =
            this.TreeDataPool.videoArr.length - 1;
        this.TreeDataPool.activeVideoIndex = this.TreeDataPool.videoArr.length - 1;
        } else {
          this.TreeDataPool.activeVideoIndex = nullVideoIndex;
        }
      }
    },
    setGuid(value) {
      clearTimeout(this.trackTimer);
      if (value < this.guid && this.TreeDataPool.activeVideoIndex > value) {
        // eslint-disable-next-line
        for (
          let i = this.TreeDataPool.activeVideoIndex - 1;
          i < this.TreeDataPool.videoArr.length;
          i++
        ) {
          // eslint-disable-next-line
          if (
            this.TreeDataPool.videoArr[i] &&
            this.TreeDataPool.videoArr[i]["isPlaying"]
          ) {
            this.TreeDataPool.videoArr[i]["isPlaying"] = false;
          }
        }
      }
      this.guid = value;
      sessionStorage.guid = this.guid;
      sessionStorage.activeIndex = this.TreeDataPool.activeVideoIndex;
      this.getActiveIndex();
    },
    toggleShowArea() {
      this.showArea = !this.showArea;
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.getRightWidth);
    // this.CardList.details = [];
    this.CardList.addBaseList = [];
    this.VideoPhotoData.selectBlacks = [];
    this.VideoPhotoData.selectWhites = [];
  },
  computed: {
    allVideoNum() {
      if (this.videoNum2Play <= 5) {
        this.guid = 3;
        return 5;
      }

      if (this.videoNum2Play <= 7) {
        this.guid = 4;
        return 7;
      } 
      
      if (this.videoNum2Play <= 12) {
        this.guid = 4;
        return 12;
      } 
      
      if (this.videoNum2Play <= 16) {
        this.guid = 5;
        return 16;
      }
              this.guid = 5;
        return 16;
    },
    nextIndex() {
      if (this.centerIndex == this.list2TakeTurn.length - 1) {
        return 0;
      }
      return this.centerIndex + 1;
    },
  },
};
</script>