From 4f940dd8f9526717b9842af859a7c8c7f2d344eb Mon Sep 17 00:00:00 2001
From: zqc <835569504@qq.com>
Date: Fri, 23 Jan 2026 09:39:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E5=90=AF=E5=8A=A8=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96=E8=A7=86=E9=A2=91url=EF=BC=8C=E6=9C=AA=E7=BA=BF?=
 =?UTF-8?q?=E4=B8=8A=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web_page/monitor_dashboard.html | 137 ++++++++++++++++++++++++++------
 web_page/nginx.conf             |  48 +++++++++--
 2 files changed, 155 insertions(+), 30 deletions(-)

diff --git a/web_page/monitor_dashboard.html b/web_page/monitor_dashboard.html
index e6090a0..5f82585 100644
--- a/web_page/monitor_dashboard.html
+++ b/web_page/monitor_dashboard.html
@@ -377,29 +377,99 @@
 
     <script src="static/video.min.js"></script>
     <script>
-        // 配置直播流地址 - 请根据实际情况修改这些URL
+        // 配置直播流地址 - 通过接口动态获取
         const streamConfigs = {
             1: {
-                url: 'https://demo.unified-streaming.com/k8s/live/scte35.isml/.m3u8', // 请替换为实际的m3u8地址
-                title: '监控点 1 - 主入口'
+                url: '', // 将通过接口获取
+                title: '监控点 1 - 主入口',
+                videoId: 'cam001'
             },
             2: {
-                url: 'https://stream-akamai.castr.com/5b9352dbda7b8c769937e459/live_2361c920455111ea85db6911fe397b9e/index.fmp4.m3u8', // 请替换为实际的m3u8地址
-                title: '监控点 2 - 走廊'
+                url: '', // 将通过接口获取
+                title: '监控点 2 - 走廊',
+                videoId: 'cam002'
             },
             3: {
-                url: '', // 请替换为实际的m3u8地址
-                title: '监控点 3 - 大厅'
+                url: '', // 将通过接口获取
+                title: '监控点 3 - 大厅',
+                videoId: 'cam003'
             },
             4: {
-                url: '', // 请替换为实际的m3u8地址
-                title: '监控点 4 - 出口'
+                url: '', // 将通过接口获取
+                title: '监控点 4 - 出口',
+                videoId: 'cam004'
             }
         };
 
         // 视频播放器实例
         const players = {};
         
+        // 获取视频流URL的接口地址（通过Nginx代理）
+        const VIDEO_API_URL = '/api/v1/video-urls'; // 使用相对路径，通过Nginx代理到后端
+        
+        // 获取视频流URL的接口
+        async function fetchVideoUrls() {
+            try {
+                const videoIds = Object.values(streamConfigs).map(config => config.videoId);
+                
+                console.log('发送请求到:', VIDEO_API_URL);
+                console.log('请求体:', JSON.stringify({
+                    "videoId": videoIds
+                }));
+                
+                const response = await fetch(VIDEO_API_URL, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        "videoId": videoIds
+                    })
+                });
+                
+                console.log('响应状态:', response.status, response.statusText);
+                
+                if (!response.ok) {
+                    let errorDetails = '';
+                    try {
+                        const errorData = await response.json();
+                        errorDetails = JSON.stringify(errorData);
+                    } catch (e) {
+                        errorDetails = await response.text();
+                    }
+                    throw new Error(`HTTP error! status: ${response.status}, details: ${errorDetails}`);
+                }
+                
+                const data = await response.json();
+                console.log('响应数据:', data);
+                
+                // 更新streamConfigs中的URL
+                if (data.videoUrl && Array.isArray(data.videoUrl)) {
+                    Object.keys(streamConfigs).forEach((screenId, index) => {
+                        if (data.videoUrl[index]) {
+                            streamConfigs[screenId].url = data.videoUrl[index];
+                            console.log(`屏幕 ${screenId} 获取到URL: ${data.videoUrl[index]}`);
+                        }
+                    });
+                    
+                    return true;
+                } else {
+                    throw new Error('返回数据格式错误');
+                }
+                
+            } catch (error) {
+                console.error('获取视频流URL失败:', error);
+                
+                // 在所有屏幕显示错误
+                for (let i = 1; i <= 4; i++) {
+                    showError(i);
+                    updateStatus(i, '获取流地址失败: ' + errorMessage);
+                }
+                
+                return false;
+            }
+        }
+        
         // 初始化所有视频播放器
         function initializePlayers() {
             for (let i = 1; i <= 4; i++) {
@@ -633,7 +703,7 @@
         }
         
         // 页面加载完成后初始化
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', async function() {
             // 初始化视频播放器
             initializePlayers();
             
@@ -641,21 +711,40 @@
             updateTime();
             setInterval(updateTime, 1000);
             
-            // todo 后期改为页面加载后，调用获取视频url接口，取得视频url后，再调用下面代码，延迟时间可以设为更短的时间例如300ms
-            // 页面加载3秒后，调用重新加载逻辑
-            setTimeout(() => {
-                console.log('页面加载3秒后，开始重新加载所有直播流');
-                for (let i = 1; i <= 4; i++) {
-                    const config = streamConfigs[i];
-                    // 检查URL是否为空，只有配置了有效URL才重新加载
-                    if (config && config.url) {
-                        console.log(`重新加载屏幕 ${i} 的直播流`);
-                        refreshStream(i);
-                    } else {
-                        console.log(`屏幕 ${i} 未配置有效URL，跳过重新加载`);
+            // 首先获取视频流URL
+            console.log('开始获取视频流URL...');
+            
+            // 显示加载状态
+            for (let i = 1; i <= 4; i++) {
+                showLoading(i);
+                updateStatus(i, '获取流地址中...');
+            }
+            
+            // 调用接口获取视频URL
+            const success = await fetchVideoUrls();
+            
+            if (success) {
+                console.log('视频流URL获取成功，开始加载直播流');
+                
+                // 延迟300ms后开始加载所有直播流
+                setTimeout(() => {
+                    console.log('开始加载所有直播流');
+                    for (let i = 1; i <= 4; i++) {
+                        const config = streamConfigs[i];
+                        // 检查URL是否为空，只有配置了有效URL才重新加载
+                        if (config && config.url) {
+                            console.log(`加载屏幕 ${i} 的直播流`);
+                            refreshStream(i);
+                        } else {
+                            console.log(`屏幕 ${i} 未获取到有效URL，跳过加载`);
+                            showError(i);
+                            updateStatus(i, '无可用流地址');
+                        }
                     }
-                }
-            }, 1500);
+                }, 300);
+            } else {
+                console.error('视频流URL获取失败，无法加载直播流');
+            }
             
             // 添加键盘快捷键
             document.addEventListener('keydown', function(e) {
diff --git a/web_page/nginx.conf b/web_page/nginx.conf
index 2346ca9..e02c20e 100644
--- a/web_page/nginx.conf
+++ b/web_page/nginx.conf
@@ -7,11 +7,47 @@ server {
     charset utf-8;
     
     # 设置根目录
-    root /path/to/your/FaceRecognitionWithInsightFace/web_page;
+    root D:/code/python_project/FaceRecognitionWithInsightFace/web_page;
     
     # 默认首页
     index index.html monitor_dashboard.html;
     
+    # API代理配置 - 将/api路径路由到后端服务
+    location /api/ {
+        # 后端服务地址（请根据实际情况修改）
+        proxy_pass http://localhost:8000/api/;
+        
+        # 代理设置
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        
+        # 超时设置
+        proxy_connect_timeout 30s;
+        proxy_send_timeout 30s;
+        proxy_read_timeout 30s;
+        
+        # 启用WebSocket支持（如果需要）
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        
+        # CORS支持
+        add_header Access-Control-Allow-Origin *;
+        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
+        add_header Access-Control-Allow-Headers "Content-Type, Authorization";
+        
+        # 处理预检请求
+        if ($request_method = 'OPTIONS') {
+            add_header Access-Control-Allow-Origin *;
+            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
+            add_header Access-Control-Allow-Headers "Content-Type, Authorization";
+            add_header Access-Control-Max-Age 86400;
+            return 204;
+        }
+    }
+    
     # 主页面服务
     location / {
         try_files $uri $uri/ =404;
@@ -38,9 +74,9 @@ server {
         }
     }
     
-    # 静态资源目录（如果有的话）
+    # 静态资源目录
     location /static/ {
-        alias /path/to/your/FaceRecognitionWithInsightFace/web_page/static/;
+        alias D:/code/python_project/FaceRecognitionWithInsightFace/web_page/static/;
         expires 1y;
         add_header Cache-Control "public, immutable";
     }
@@ -49,7 +85,7 @@ server {
     error_page 404 /404.html;
     error_page 500 502 503 504 /50x.html;
     
-    # 日志设置
-    access_log /var/log/nginx/monitor_dashboard_access.log;
-    error_log /var/log/nginx/monitor_dashboard_error.log;
+    # 日志设置（Windows路径）
+    access_log logs/monitor_dashboard_access.log;
+    error_log logs/monitor_dashboard_error.log;
 }
\ No newline at end of file