feie9454/chaos-tracker-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

离屏canvas

Browse Source
This commit is contained in:
feie9456 2025-09-23 12:59:26 +08:00
parent 0619bafbf9
commit 2bbca1c5e3
1 changed files with 11 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/App.vue
View File

@ -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)
}