From d41acebbd89f171b0eeb205fca4f68043ca85f95 Mon Sep 17 00:00:00 2001
From: Admin <Admin@ADMIN>
Date: 星期三, 03 十二月 2025 19:47:24 +0800
Subject: [PATCH] 选配与暂存
---
项目代码/DP/src/views/indexs/center-map.vue | 186 ++++++++++++++++++++--------------------------
1 files changed, 80 insertions(+), 106 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/center-map.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/center-map.vue"
index 3b3a7e8..e36de93 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/center-map.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/indexs/center-map.vue"
@@ -1,123 +1,97 @@
<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/101?rtsp_transport=tcp&codecType=h264';
+const rtspRight = 'rtsp://admin:Mx202513@172.21.7.244:554/Streaming/Channels/201?rtsp_transport=tcp&codecType=h264';
+
+// 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;
- }
- }
+ display: flex;
}
-
-.screen-video {
- position: absolute;
- top: 0;
- left: 0;
+.mapwrap {
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>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3