项目文件路径修改

.env.production

@@ -6,7 +6,10 @@ ENV = 'production'
 VUE_APP_ENV = 'production'
 VUE_APP_ONLYOFFICE_URL = 'http://36.33.26.201:19840'
 # 图片预览路径
-VUE_APP_FILE_URL = 'http://192.168.0.108:8099/smartCar/profile'
+VUE_APP_FILE_URL = 'http://36.33.26.201:18088/profile'
+
+#视频流路径
+VUE_APP_VIDEO_URL = 'http://36.33.26.201:18088/processed'
 
 # 车辆道路监测系统/生产环境
 VUE_APP_BASE_API = '/smart-car-api'

src/router/index.js

@@ -89,13 +89,13 @@ export const constantRoutes = [
     ]
   },
   {
-    path: '/device/image-recognition/export-progress',
+    path: '/device/imageRecognition/export-progress',
-    component: () => import('@/views/device/image-recognition/ExportProgress'),
+    component: () => import('@/views/device/imageRecognition/ExportProgress'),
     hidden: true
   },
   {
-    path: '/device/data-recognition/export-progress',
+    path: '/device/dataRecognition/export-progress',
-    component: () => import('@/views/device/data-recognition/ExportProgress'),
+    component: () => import('@/views/device/dataRecognition/ExportProgress'),
     hidden: true
   }
 ]

src/views/device/video/index.vue

@@ -77,7 +77,7 @@
         <el-card class="video-card" shadow="never" :body-style="{ padding: '0', height: '100%' }">
             <div class="video-wrapper">
                 <div class="video-container" ref="videoContainer">
-                    <video ref="videoPlayer" class="video-player" :src="videoUrl" autoplay muted
+                    <video ref="videoPlayer" id="myVideo" class="video-player" :src="videoUrl" autoplay muted
                         @loadedmetadata="handleVideoLoaded" @error="handleVideoError" controlsList="nofullscreen">
                         您的浏览器不支持视频播放
                     </video>
@@ -201,6 +201,50 @@ export default {
         document.removeEventListener('MSFullscreenChange', this.onFullscreenChange)
     },
     methods: {
+        async startWhelpPlay() {
+            // 1. 创建 PeerConnection
+            const pc = new RTCPeerConnection({
+                iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] // 公网 STUN 服务器
+            });
+
+            // 2. 拿到流就放到 video 标签里
+            pc.ontrack = (event) => {
+                document.getElementById('myVideo').srcObject = event.streams[0];
+            };
+
+            // 3. 这里的 addTransceiver 是告诉浏览器“我要接收视频和音频”
+            pc.addTransceiver('video', { direction: 'recvonly' });
+            pc.addTransceiver('audio', { direction: 'recvonly' });
+
+            // 4. 创建 Offer
+            const offer = await pc.createOffer();
+            await pc.setLocalDescription(offer);
+
+            // 5. 【关键】向您的那个地址发送请求
+            // 注意：这里是 POST 请求，内容是 SDP
+            
+            const response = await fetch(`${process.env.VUE_APP_VIDEO_URL}/whep`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/sdp'
+                },
+                body: offer.sdp
+            });
+
+            if (response.status !== 201) {
+                console.error("连接失败");
+                return;
+            }
+
+            // 6. 拿到 Answer 并设置
+            const answerSdp = await response.text();
+            await pc.setRemoteDescription(new RTCSessionDescription({
+                type: 'answer',
+                sdp: answerSdp
+            }));
+
+            console.log("WHEP 握手成功，等待视频流...");
+        },
         /** 初始化 ResizeObserver */
         initResizeObserver() {
             const container = this.$refs.videoContainer
@@ -604,16 +648,19 @@ export default {
 
         async loadVideoStream() {
             try {
-                const res = await getVideoStreamAPI()
+               const res = await getVideoStreamAPI()
                 if (res.code === 200 && res.data && res.data.streamUrl) {
                     this.videoErrorShown = false
                     this.videoUrl = res.data.streamUrl
                 }
+                 /*this.startWhelpPlay();*/
             } catch (error) {
                 console.error('获取视频流失败:', error)
             }
         },
 
+
+
         /** 位置锁定 */
         async handleLockPosition() {
             this.$confirm('确定要锁定设备位置吗？', '位置锁定', {
@@ -1048,33 +1095,41 @@ video::-internal-media-controls-download-button {
 .status-indicator {
     display: inline-flex;
     align-items: center;
-    padding: 6px 14px; /* 稍微加宽一点 */
+    padding: 6px 14px;
+    /* 稍微加宽一点 */
     border-radius: 20px;
     font-size: 14px;
     font-weight: 600;
     line-height: 1;
     transition: all 0.3s ease;
-    
+
     /* 核心修改：圆点变大，不再依赖文字颜色 */
     &::before {
         content: '';
         display: inline-block;
-        width: 10px;  /* 增大尺寸 */
+        width: 10px;
-        height: 10px; /* 增大尺寸 */
+        /* 增大尺寸 */
+        height: 10px;
+        /* 增大尺寸 */
         border-radius: 50%;
         margin-right: 8px;
-        flex-shrink: 0; /* 防止圆点被挤压 */
+        flex-shrink: 0;
+        /* 防止圆点被挤压 */
     }
 
     /* 在线：高亮绿 + 强力扩散动画 */
     &.online {
-        background-color: #e1f3d8; /* 浅绿背景 */
+        background-color: #e1f3d8;
-        color: #67c23a;            /* 绿色文字 */
+        /* 浅绿背景 */
+        color: #67c23a;
+        /* 绿色文字 */
         border: 1px solid #c2e7b0;
 
         &::before {
-            background-color: #529b2e; /* 圆点颜色比文字更深，更实 */
+            background-color: #529b2e;
-            box-shadow: 0 0 0 0 rgba(82, 155, 46, 0.7); /* 初始阴影 */
+            /* 圆点颜色比文字更深，更实 */
+            box-shadow: 0 0 0 0 rgba(82, 155, 46, 0.7);
+            /* 初始阴影 */
             animation: deep-pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
         }
     }
@@ -1095,7 +1150,10 @@ video::-internal-media-controls-download-button {
         background-color: #fdf6ec;
         color: #e6a23c;
         border: 1px solid #f5dab1;
-        &::before { background-color: #e6a23c; }
+
+        &::before {
+            background-color: #e6a23c;
+        }
     }
 
     /* 升级中 */
@@ -1103,6 +1161,7 @@ video::-internal-media-controls-download-button {
         background-color: #ecf5ff;
         color: #409eff;
         border: 1px solid #d9ecff;
+
         &::before {
             background-color: #409eff;
             animation: blink 1s infinite;
@@ -1115,16 +1174,26 @@ video::-internal-media-controls-download-button {
     0% {
         box-shadow: 0 0 0 0 rgba(82, 155, 46, 0.7);
     }
+
     70% {
-        box-shadow: 0 0 0 8px rgba(82, 155, 46, 0); /* 扩散范围更大 */
+        box-shadow: 0 0 0 8px rgba(82, 155, 46, 0);
+        /* 扩散范围更大 */
     }
+
     100% {
         box-shadow: 0 0 0 0 rgba(82, 155, 46, 0);
     }
 }
 
 @keyframes blink {
-    0%, 100% { opacity: 1; }
+
-    50% { opacity: 0.5; }
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
 }
 </style>

vue.config.js

@@ -11,7 +11,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 const name = process.env.VUE_APP_TITLE || '车辆道路监测系统' // 网页标题
 
 // const baseUrl = 'http://localhost:8080' // 后端接口
-const baseUrl = 'http://192.168.0.39:8080'
+const baseUrl = 'http://192.168.0.108:8099'
 // const baseUrl = 'http://192.168.31.169:8080'
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口