fix: 不能“sender 里先按 fps 睡再去 DQBUF”

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 streamUrl = ref('')
-const currentFps = computed(() => props.video?.fps ?? 30)
 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
+function refreshStreamUrl() {
-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
-  }
-
   if (!canRequestFrames.value) {
+    streamUrl.value = ''
     return
   }
 
-  refreshFrame()
+  // Keep the browser attached to a higher-frequency local MJPEG stream
-  const intervalMs = Math.max(33, Math.round(1000 / currentFps.value))
+  // so the dashboard does not add an extra 0-100 ms polling delay.
-  frameTimer = window.setInterval(() => {
+  streamUrl.value = buildVideoStreamUrl(streamFps.value, Date.now())
-    refreshFrame()
-  }, intervalMs)
 }
 
-onMounted(() => {
+watch([streamFps, canRequestFrames], refreshStreamUrl, { immediate: true })
-  startFrameLoop()
-})
-
-onUnmounted(() => {
-  if (frameTimer != null) {
-    window.clearInterval(frameTimer)
-  }
-})
-
-watch([currentFps, canRequestFrames], () => {
-  startFrameLoop()
-})
 </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">

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}`
+}