From f6d33d6b56d141c3cc6259f26bbefab4b1ebdc29 Mon Sep 17 00:00:00 2001
From: Mock <mochangkang2022@email.szu.edu.cn>
Date: Thu, 2 Apr 2026 22:31:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B8=8D=E8=83=BD=E2=80=9Csender=20?=
 =?UTF-8?q?=E9=87=8C=E5=85=88=E6=8C=89=20fps=20=E7=9D=A1=E5=86=8D=E5=8E=BB?=
 =?UTF-8?q?=20DQBUF=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/VideoPanel.vue | 61 +++++++-------------------
 frontend/src/lib/api.ts                |  4 ++
 2 files changed, 21 insertions(+), 44 deletions(-)

diff --git a/frontend/src/components/VideoPanel.vue b/frontend/src/components/VideoPanel.vue
index 6f43785..799e10e 100644
--- a/frontend/src/components/VideoPanel.vue
+++ b/frontend/src/components/VideoPanel.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
-import { buildVideoFrameUrl } from '@/lib/api'
+import { buildVideoStreamUrl } from '@/lib/api'
 import type { VideoStatus } from '@/types'
 
 const props = defineProps<{
   video: VideoStatus | null
 }>()
 
-const frameUrl = ref(buildVideoFrameUrl(0))
-const currentFps = computed(() => props.video?.fps ?? 30)
+const streamUrl = ref('')
 const canRequestFrames = computed(() => props.video?.available === true)
+const streamFps = computed(() => Math.max(props.video?.fps ?? 0, 30))
+
 const modeLabel = computed(() => {
   if (!props.video) {
     return '正在获取视频状态'
@@ -19,58 +20,30 @@ const modeLabel = computed(() => {
     return `${props.video.fps} FPS 实时接收`
   }
   if (props.video.source_mode === 'omnisocket-waiting') {
-    return '未实时获取真实值'
+    return '尚未收到实时视频帧'
   }
   return `${props.video.fps} FPS`
 })
+
 const placeholderText = computed(() => {
   if (!props.video) {
     return '正在获取视频状态...'
   }
-  return '未实时获取真实值'
+  return '尚未收到实时视频帧'
 })
 
-let frameTimer: number | null = null
-let frameKey = 0
-
-function refreshFrame() {
-  if (!canRequestFrames.value) {
-    return
-  }
-  frameKey += 1
-  frameUrl.value = buildVideoFrameUrl(frameKey)
-}
-
-function startFrameLoop() {
-  if (frameTimer != null) {
-    window.clearInterval(frameTimer)
-    frameTimer = null
-  }
-
+function refreshStreamUrl() {
   if (!canRequestFrames.value) {
+    streamUrl.value = ''
     return
   }
 
-  refreshFrame()
-  const intervalMs = Math.max(33, Math.round(1000 / currentFps.value))
-  frameTimer = window.setInterval(() => {
-    refreshFrame()
-  }, intervalMs)
+  // Keep the browser attached to a higher-frequency local MJPEG stream
+  // so the dashboard does not add an extra 0-100 ms polling delay.
+  streamUrl.value = buildVideoStreamUrl(streamFps.value, Date.now())
 }
 
-onMounted(() => {
-  startFrameLoop()
-})
-
-onUnmounted(() => {
-  if (frameTimer != null) {
-    window.clearInterval(frameTimer)
-  }
-})
-
-watch([currentFps, canRequestFrames], () => {
-  startFrameLoop()
-})
+watch([streamFps, canRequestFrames], refreshStreamUrl, { immediate: true })
 </script>
 
 <template>
@@ -89,7 +62,7 @@ watch([currentFps, canRequestFrames], () => {
       <img
         v-if="canRequestFrames"
         class="video-frame"
-        :src="frameUrl"
+        :src="streamUrl"
         alt="Robot jpeg frame stream"
       />
       <div v-else class="video-placeholder">
@@ -109,8 +82,8 @@ watch([currentFps, canRequestFrames], () => {
     </div>
 
     <p class="hint">
-      这里只有在后端已经收到 OmniSocket 的真实 JPEG 帧时，才会开始逐帧请求并显示画面。
-      如果当前没有真实帧，页面会保持占位提示，不再回退测试视频流。
+      视频可用时，页面会直接连接后端的 MJPEG stream，而不是按当前发送 fps 逐帧轮询。
+      这样能减少 dashboard 本身带来的额外显示延迟。
     </p>
 
     <p class="hint subtle">
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index aba24f1..c220511 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -19,3 +19,7 @@ export function fetchDashboardSnapshot() {
 export function buildVideoFrameUrl(frameKey: number) {
   return `${API_BASE}/api/video/frame/?frame=${frameKey}&t=${Date.now()}`
 }
+
+export function buildVideoStreamUrl(fps: number, token: number) {
+  return `${API_BASE}/api/video/stream/?fps=${fps}&t=${token}`
+}