更新

huanghongfeng

3 天以前 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae

 ÏîÄ¿´úÂë/DP/src/views/indexs/center-map.vue

@@ -1,123 +1,98 @@
<template>
  <div class="centermap">
    <div class="mapwrap">
      <dv-border-box-13>
        <video 
          ref="videoPlayer" 
          class="screen-video" 
          src="../../assets/img/2.mp4" 
          loop 
          autoplay 
          preload="auto"
          muted
          @click="unmuteVideo"
        >
          æ‚¨çš„浏览器不支持视频播放。
        </video>
        <div v-if="isMuted" class="mute-hint" @click="unmuteVideo">
          <span>点击取消静音（5秒后自动播放声音）</span>
        </div>
      </dv-border-box-13>
      <ItemWrap title="视频监控">
        <video id="video_left" autoplay muted controls playsinline width="100%" height="100%"></video>
      </ItemWrap>
    </div>
    <div class="mapwrap">
      <ItemWrap title="视频监控">
        <video id="video_right" autoplay muted controls playsinline width="100%" height="100%"></video>
      </ItemWrap>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMuted: false,
      unmuteTimeout: null // å­˜å‚¨å®šæ—¶å™¨ä»¥ä¾¿æ¸…理
    };
  },
  mounted() {
    this.initVideo();
    this.adjustVideoSize();
    window.addEventListener('resize', this.adjustVideoSize);
<script setup>
import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'

    // 5秒后自动取消静音
    this.unmuteTimeout = setTimeout(() => {
      this.unmuteVideo();
    }, 5000);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.adjustVideoSize);
    if (this.unmuteTimeout) {
      clearTimeout(this.unmuteTimeout); // æ¸…除定时器避免内存泄漏
    }
  },
  methods: {
    initVideo() {
      const video = this.$refs.videoPlayer;
      if (video) {
        video.addEventListener('ended', () => {
          video.currentTime = 0;
          video.play();
        });
      }
      document.addEventListener('click', this.unmuteVideo, { once: true });
    },
    unmuteVideo() {
      const video = this.$refs.videoPlayer;
      if (video) {
        video.muted = false;
        video.volume = 1.0;
        this.isMuted = false;
      }
    },
    adjustVideoSize() {
      const video = this.$refs.videoPlayer;
      if (video) {
        video.style.width = '100%';
        video.style.height = '100%';
        video.style.objectFit = 'cover';
      }
    }
// WebRTC æ’­æ”¾å™¨å®žä¾‹
const webRtcServer_left = ref(null)
const webRtcServer_right = ref(null)

// RTSP åœ°å€ï¼Œæ³¨æ„ URL ç¼–码特殊字符
const rtspLeft = 'rtsp://admin:Mx202513@172.21.7.244:554/Streaming/Channels/102?rtsp_transport=tcp'
const rtspRight = 'rtsp://admin:Mx202513@172.21.7.244:554/Streaming/Channels/202?rtsp_transport=tcp'

// WebRtcStreamer æœåŠ¡åœ°å€
const serverUrl = 'http://172.21.1.139:8000' // â† æ”¹ä¸ºä½ è¿è¡Œ webrtcstreamer çš„电脑 IP

// åˆå§‹åŒ–视频播放
const initVideo = () => {
  try {
    // å·¦æ‘„像头
    webRtcServer_left.value = new WebRtcStreamer('video_left', serverUrl)
    webRtcServer_left.value.connect(rtspLeft)

    // å³æ‘„像头
    webRtcServer_right.value = new WebRtcStreamer('video_right', serverUrl)
    webRtcServer_right.value.connect(rtspRight)

    console.log('视频初始化完成')
  } catch (err) {
    console.error('视频初始化失败: ' + err.message)
  }
};
}

// é”€æ¯è§†é¢‘播放
const destroyVideo = () => {
  if (webRtcServer_left.value) {
    webRtcServer_left.value.disconnect()
    webRtcServer_left.value = null
  }
  if (webRtcServer_right.value) {
    webRtcServer_right.value.disconnect()
    webRtcServer_right.value = null
  }
}

// é¡µé¢æ¿€æ´»æ—¶æ’­æ”¾
onActivated(() => {
  ['video_left', 'video_right'].forEach(id => {
    const video = document.getElementById(id)
    if (video && video.paused) video.play()
  })
})

// é¡µé¢åœç”¨æ—¶æš‚停
onDeactivated(() => {
  ['video_left', 'video_right'].forEach(id => {
    const video = document.getElementById(id)
    if (video && !video.paused) video.pause()
  })
})

// é¡µé¢æŒ‚载初始化
onMounted(() => {
  initVideo()
})

// é¡µé¢å¸è½½é”€æ¯
onUnmounted(() => {
  destroyVideo()
})
</script>

<style scoped>
/* æ ·å¼ä¿æŒä¸å˜ */
.centermap {
  width: 100%;
  height: 100%;
  
  .mapwrap {
    height: 960px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    margin-top: 10px;
    
    & > dv-border-box-13 {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
  }
}

.screen-video {
  position: absolute;
  top: 0;
  left: 0;
.mapwrap {
  height: 470px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-sizing: border-box;
  position: relative;
  margin-top: 10px;
}

.mute-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 10;
}
</style>
</style>