diff --git a/src/App.vue b/src/App.vue index 160985b..0bef108 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,8 +10,8 @@ const videoEl = ref(null) const canvasEl = ref(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) }