From 4d09dd0a3a487cde3dca3430280711daa970cb49 Mon Sep 17 00:00:00 2001 From: infrost Date: Mon, 13 Jul 2026 00:21:42 +0100 Subject: [PATCH] only resize canvas when changed, use arrary buffer to transfer frames --- apps/web/src/app/routes/receiver.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/apps/web/src/app/routes/receiver.tsx b/apps/web/src/app/routes/receiver.tsx index 415ca11..e9d451d 100644 --- a/apps/web/src/app/routes/receiver.tsx +++ b/apps/web/src/app/routes/receiver.tsx @@ -228,6 +228,7 @@ export function ReceiverPage() { const streamRef = useRef(null); const animRef = useRef(0); const scanningRef = useRef(false); + const captureSizeRef = useRef({ width: 0, height: 0 }); const [inputMode, setInputMode] = useState('camera'); const [scanning, setScanning] = useState(false); @@ -663,13 +664,20 @@ export function ReceiverPage() { ch = Math.min(vh, maxCanvas); cw = Math.round(ch * aspect); } - canvas.width = cw; - canvas.height = ch; + if (captureSizeRef.current.width !== cw || captureSizeRef.current.height !== ch) { + canvas.width = cw; + canvas.height = ch; + captureSizeRef.current = { width: cw, height: ch }; + } ctx.drawImage(video, 0, 0, vw, vh, 0, 0, cw, ch); const imageData = ctx.getImageData(0, 0, cw, ch); + const pixels = imageData.data.buffer as ArrayBuffer; - worker.postMessage({ type: 'frame', imageData, realtime: true }); + worker.postMessage( + { type: 'frame', pixels, width: cw, height: ch, realtime: true }, + [pixels], + ); }, []); // ── Download recovered file ──────────────────────────────────────────────