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