park-application-fe/src/components/VideoTrail/index.vue

<template>
  <div v-drag class="video-trail-container">
    <div class="video-trail-title">
      视频跟随
    </div>
    <div class="video-trail-content">
      <div class="main-video">
        <video-obj
            v-if="videoList.length > 0"
            :stream="videoList[0].video.cameraLive"
            :key="`main-${videoList[0].key}`"
        />
      </div>
      <div class="trail-videos">
        <video-obj
            v-for="item in videoList"
            :key="item.key"
            :stream="item.video.cameraLive"
            :lastTime="0"
        />
      </div>
    </div>
    <socket-message
        v-if="this.fingerprint.visitorId"
        :onMessage="onMessage"
        :ws="`/pkb/uwb/trail?client=${this.fingerprint.visitorId}&deviceId=${deviceId}`"
    />
  </div>
</template>

<script>
import VideoObj from "@/components/Video/index.vue";
import SocketMessage from "@/components/WebsocketMessage/index.vue";
import FingerprintJS from "@fingerprintjs/fingerprintjs";

export default {
  components: {SocketMessage, VideoObj},
  name: "video-trail",
  props: {
    ws: {
      type: String,
      default: '',
    },
  },
  watch: {
    ws(val) {
      this.init();
    },
  },
  data() {
    return {
      videoList: [],
      fingerprint: "",
      deviceId: "845D3",
      timer: null // 新增定时器变量
    };
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 清除定时器
    }
  },
  created() {
    this.getBrowserFingerprint();
    this.removeOldVideos(); // 添加调用
    this.timer = setInterval(this.removeOldVideos, 60000); // 每分钟调用一次，并将定时器赋值给timer变量
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {

    },
    onMessage(newVideo) {
      const {msg: video} = newVideo
      video.srcTimestamp = Date.now();
      video.key = `${video.key}_${video.fenceId}`;
      const videoIndex = this.videoList.findIndex(item => item.key === video.key);
      if (videoIndex !== -1) {
        this.videoList.splice(videoIndex, 1);
      }
      this.videoList.unshift(video);
    },
    removeOldVideos() {
      const currentTime = Date.now();
      while (this.videoList.length > 0 && (currentTime - this.videoList[this.videoList.length - 1].srcTimestamp) > 20 * 60 * 1000) {
        this.videoList.pop();
      }
    },
    async getBrowserFingerprint() {
      try {
        const fp = await FingerprintJS.load();
        this.fingerprint = await fp.get();
      } catch (error) {
        console.error('Error loading fingerprint generator:', error);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.video-trail-container {
  height: 70vh;
  position: absolute;
  top: 50px;
  left: 100px;
  background: #060624ba;

  .video-trail-title {
    height: 30px;
    width: 100%;
    background: #fefefe;
    padding: 0 15px;
    line-height: 30px;
    cursor: move;
  }

  .video-trail-content {
    width: fit-content;
    height: calc(100% - 30px);
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    .main-video {
      width: 40vw;
      height: 70vh;
    }

    .trail-videos {
      width: 18vw;
      height: 70vh;
      margin-left: 16px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }
  }
}
</style>