更新

huanghongfeng

3 天以前 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae

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

@@ -1,167 +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="handleVideoClick"
        >
          æ‚¨çš„浏览器不支持视频播放。
        </video>
        <div v-if="showUnmuteButton" class="unmute-button" @click="unmuteVideo">
          <span>🔇 ç‚¹å‡»å–消静音</span>
      <ItemWrap title="视频监控">
        <video id="video_left" autoplay muted controls playsinline width="100%" height="100%"></video>
      </ItemWrap>
        </div>
      </dv-border-box-13>
    <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 {
      showUnmuteButton: true, // æ˜¾ç¤ºå–消静音按钮
      hasUserInteracted: false, // è®°å½•ç”¨æˆ·æ˜¯å¦å·²äº¤äº’
      wasPlaying: false // è®°å½•è§£é™¤é™éŸ³å‰çš„播放状态
    };
  },
  mounted() {
    this.initVideo();
    this.adjustVideoSize();
    window.addEventListener('resize', this.adjustVideoSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.adjustVideoSize);
    const video = this.$refs.videoPlayer;
    if (video) {
      video.removeEventListener('error', this.handleVideoError);
    }
  },
  methods: {
    async initVideo() {
      const video = this.$refs.videoPlayer;
      if (video) {
        // ç¡®ä¿è§†é¢‘以静音状态开始
        video.muted = true;
<script setup>
import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
        
        // æ·»åŠ é”™è¯¯ç›‘听
        video.addEventListener('error', this.handleVideoError);
// 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 {
          await video.play();
          this.wasPlaying = true;
        } catch (error) {
          console.log('自动播放被阻止:', error);
    // å·¦æ‘„像头
    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)
        }
      }
    },
    
    handleVideoClick() {
      if (!this.hasUserInteracted) {
        this.hasUserInteracted = true;
        // ç”¨æˆ·ç¬¬ä¸€æ¬¡ç‚¹å‡»è§†é¢‘时尝试解除静音
        this.unmuteVideo();
// é”€æ¯è§†é¢‘播放
const destroyVideo = () => {
  if (webRtcServer_left.value) {
    webRtcServer_left.value.disconnect()
    webRtcServer_left.value = null
      }
    },
    
    async unmuteVideo() {
      const video = this.$refs.videoPlayer;
      if (!video) return;
      
      // è®°å½•å½“前播放状态
      this.wasPlaying = !video.paused;
      
      try {
        // å…ˆç¡®ä¿è§†é¢‘在播放
        if (this.wasPlaying) {
          await video.play();
        }
        
        // è§£é™¤é™éŸ³
        video.muted = false;
        
        // éšè—å–消静音按钮
        this.showUnmuteButton = false;
      } catch (error) {
        console.error('解除静音失败:', error);
        // æ˜¾ç¤ºæç¤ºï¼Œå‘ŠçŸ¥ç”¨æˆ·éœ€è¦äº¤äº’才能播放声音
        this.showUnmuteButton = true;
      }
    },
    
    handleVideoError(e) {
      const video = e.target;
      console.error('视频错误:', video.error);
    },
    
    adjustVideoSize() {
      const video = this.$refs.videoPlayer;
      if (video) {
        video.style.width = '100%';
        video.style.height = '100%';
        video.style.objectFit = 'cover';
  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;
  height: 470px;
    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;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.unmute-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 10;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  
  &:hover {
    background: rgba(0, 0, 0, 0.9);
  }
}
</style>