离屏canvas

src/App.vue

@@ -10,8 +10,8 @@ const videoEl = ref<HTMLVideoElement | null>(null)
 const canvasEl = ref<HTMLCanvasElement | null>(null)
 let ctx: CanvasRenderingContext2D | null = null
 // 离屏处理画布：用于抓帧与图像处理，fetch 期间继续更新它
-let procCanvasEl: HTMLCanvasElement | null = null
-let procCtx: CanvasRenderingContext2D | null = null
+let procCanvasEl: OffscreenCanvas | null = null
+let procCtx: OffscreenCanvasRenderingContext2D | null = null
 // 视图尺寸（用于 SVG overlay 同步尺寸）
 const viewW = ref(0)
 const viewH = ref(0)
@@ -235,10 +235,8 @@ function resizeCanvasToVideo(video: HTMLVideoElement, canvas: HTMLCanvasElement)
   canvas.style.width = '100%'
   canvas.style.height = 'auto'
   // 同步离屏处理画布尺寸
-  if (!procCanvasEl) procCanvasEl = document.createElement('canvas')
-  procCanvasEl.width = canvas.width
-  procCanvasEl.height = canvas.height
-  if (!procCtx) procCtx = procCanvasEl.getContext('2d')
+  if (!procCanvasEl) procCanvasEl = new OffscreenCanvas(canvas.width, canvas.height)
+  if (!procCtx) procCtx = procCanvasEl.getContext('2d', {willReadFrequently: true})
   // 同步 SVG 尺寸
   viewW.value = canvas.width
   viewH.value = canvas.height
@@ -306,10 +304,8 @@ async function startStream() {
     if (!ctx) throw new Error('CanvasRenderingContext2D 获取失败')
     resizeCanvasToVideo(videoEl.value, canvasEl.value)
     // 初始化离屏处理上下文
-    if (!procCanvasEl) procCanvasEl = document.createElement('canvas')
-    procCanvasEl.width = canvasEl.value.width
-    procCanvasEl.height = canvasEl.value.height
-    procCtx = procCanvasEl.getContext('2d')
+    if (!procCanvasEl) procCanvasEl = new OffscreenCanvas(canvasEl.value.width, canvasEl.value.height)
+    procCtx = procCanvasEl.getContext('2d', {willReadFrequently: true})
     if (!procCtx) throw new Error('离屏 CanvasRenderingContext2D 获取失败')
 
     // 重置计数与缓存
@@ -392,10 +388,8 @@ async function startFilePlayback() {
     if (!ctx) throw new Error('CanvasRenderingContext2D 获取失败')
     resizeCanvasToVideo(videoEl.value, canvasEl.value)
     // 初始化离屏处理上下文
-    if (!procCanvasEl) procCanvasEl = document.createElement('canvas')
-    procCanvasEl.width = canvasEl.value.width
-    procCanvasEl.height = canvasEl.value.height
-    procCtx = procCanvasEl.getContext('2d')
+    if (!procCanvasEl) procCanvasEl = new OffscreenCanvas(canvasEl.value.width, canvasEl.value.height)
+    procCtx = procCanvasEl.getContext('2d', {willReadFrequently: true})
     if (!procCtx) throw new Error('离屏 CanvasRenderingContext2D 获取失败')
 
     // 重置计数与缓存
@@ -701,7 +695,7 @@ async function loop() {
     }
 
     // 本帧绘制完成后再启动 fetch（若需要）
-    if (shouldStartFetch) {
+/*     if (shouldStartFetch) {
       isFetching.value = true
       const payload = framesBuffer.slice() // 不改动缓冲
       fetch('/api/predict', {
@@ -720,10 +714,10 @@ async function loop() {
             predictionHorizon = 0
           }
         })
-        .catch(() => { /* 忽略错误，不影响主循环 */ })
+        .catch(() => {  })
         .finally(() => { isFetching.value = false })
     }
-  } catch (e: any) {
+ */  } catch (e: any) {
     // 单帧异常不中断，显示在 HUD
     err.value = e?.message ?? String(e)
   }