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 | 234 ++++++++++++++++++++--------------------------------------
1 files changed, 82 insertions(+), 152 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 f04a88e..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,167 +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="handleVideoClick"
- >
- 鎮ㄧ殑娴忚鍣ㄤ笉鏀寔瑙嗛鎾斁銆�
- </video>
- <div v-if="showUnmuteButton" class="unmute-button" @click="unmuteVideo">
- <span>馃攪 鐐瑰嚮鍙栨秷闈欓煶</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 {
- 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;
-
- // 娣诲姞閿欒鐩戝惉
- video.addEventListener('error', this.handleVideoError);
-
- // 灏濊瘯鑷姩鎾斁锛堥潤闊崇姸鎬佷笅閫氬父鍏佽锛�
- try {
- await video.play();
- this.wasPlaying = true;
- } catch (error) {
- console.log('鑷姩鎾斁琚樆姝�:', error);
- }
- }
- },
-
- handleVideoClick() {
- if (!this.hasUserInteracted) {
- this.hasUserInteracted = true;
- // 鐢ㄦ埛绗竴娆＄偣鍑昏棰戞椂灏濊瘯瑙ｉ櫎闈欓煶
- this.unmuteVideo();
- }
- },
-
- 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';
- }
- }
+<script setup>
+import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
+
+// 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;
- }
- }
-}
-
-.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>
\ No newline at end of file
+.mapwrap {
+ width: 100%;
+ box-sizing: border-box;
+ position: relative;
+ margin-top: 10px;
+}
+</style>
--
Gitblit v1.9.3