Enhance error handling and visualization in WebARKit

- Improved logging for 'getMatrix' and 'lostMarker' events in example HTML files to provide clearer context.
- Added corner drawing functionality in the overlay for better visual feedback when corners are detected.
- Implemented buffer size validation in WebARKitCVWorkers to catch mismatches early, preventing potential errors in processing.
- Enforced strict validation of ImageData buffer lengths in WebARKitCoreCV2, eliminating silent failures and improving debugging.

Author: kalwalt

dist/src/Workers/WebARKitCVWorkers.js

@@ -55,8 +55,41 @@
                     webarkit.track(track.trackers, cameraView.image).then((t) => {
                         console.log('tracker: ', t);
                         window.addEventListener("getMatrix", function (e) {
-                            console.log('infos from getMatix Event: ', e.detail);
+                            console.log('%c infos from getMatrix Event: %o', 'background: orange; color: #000; padding: 2px 4px; border-radius: 3px;', e.detail);
                             drawOverlay(e.detail.finalImage);
+                            // If corners are provided, draw them on the overlay and
+                            // also call cameraView.drawCorners (internal canvas)
+                            try {
+                                const corners = e.detail.corners;
+                                if (corners && Array.isArray(corners) && corners.length >= 8) {
+                                    // draw on overlay so the user sees it
+                                    const overlayCtx = overlayCanvas.getContext('2d');
+                                    overlayCtx.save();
+                                    overlayCtx.strokeStyle = 'lime';
+                                    overlayCtx.fillStyle = 'lime';
+                                    overlayCtx.lineWidth = 3;
+                                    overlayCtx.beginPath();
+                                    overlayCtx.moveTo(corners[0], corners[1]);
+                                    overlayCtx.lineTo(corners[2], corners[3]);
+                                    overlayCtx.lineTo(corners[4], corners[5]);
+                                    overlayCtx.lineTo(corners[6], corners[7]);
+                                    overlayCtx.closePath();
+                                    overlayCtx.stroke();
+                                    for (let i = 0; i < 8; i += 2) {
+                                        overlayCtx.beginPath();
+                                        overlayCtx.arc(corners[i], corners[i+1], 5, 0, Math.PI*2);
+                                        overlayCtx.fill();
+                                    }
+                                    overlayCtx.restore();
+
+                                    // also call cameraView.drawCorners for completeness
+                                    if (typeof cameraView.drawCorners === 'function') {
+                                        cameraView.drawCorners(corners);
+                                    }
+                                }
+                            } catch (err) {
+                                console.warn('Error drawing corners on overlay', err);
+                            }
                         })
                         window.addEventListener("lostMarker", function (e) {
                             console.log('infos from lostMarker Event: ', e.detail);

dist/src/Workers/WebARKitCVWorkers.js.map

@@ -35,7 +35,7 @@
                 console.log(t);
                 var imgElem = document.getElementById("face");
                 window.addEventListener("getMatrix", function (e) {
-                    console.log(e.detail);
+                    console.log('%c detected and tracked: %o', 'background: orange; color: #000; padding: 2px 4px; border-radius: 3px;', e.detail);
                     //transformElem(e.detail.matrix, imgElem);
                     //drawCorners(e.detail.corners);
                     drawOverlay(e.detail.finalImage);

dist/src/core/WebARKitCoreCV2.js

@@ -59,6 +59,26 @@ export class WebARKitCVOrbWorker extends AbstractWebARKitCVWorker {
 
     console.log("WebARKitCVOrbWorker process imagedata: ", imagedata);
 
+    // Validate ImageData buffer size before posting to worker. This helps
+    // catch mismatches early (for example when the processing canvas size is
+    // different from the video dimensions). We log a clear warning so callers
+    // can fix the producer rather than relying on worker-side fallbacks.
+    try {
+      const bufLen = imagedata.data?.buffer?.byteLength ?? 0;
+      const expected = 4 * imagedata.width * imagedata.height;
+      if (bufLen !== expected) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Posting ImageData to worker: buffer length (${bufLen}) !== 4*width*height (${expected}). This will likely cause an error in the worker.`,
+          { bufLen, width: imagedata.width, height: imagedata.height },
+        );
+      }
+    } catch (e) {
+      // Non-fatal: just log and continue
+      // eslint-disable-next-line no-console
+      console.warn("Failed to validate ImageData buffer length:", e);
+    }
+
     this.worker.postMessage({
       type: "process",
       // send the actual ImageData buffer and its width/height so the worker

dist/src/core/WebARKitCoreCV2.js.map

@@ -91,40 +91,21 @@ export class WebARKitCoreCV {
 
     const buf = new Uint8ClampedArray(msg.imagedata);
     const expectedLen = 4 * width * height;
+
+    // Strict validation: don't silently slice/pad mismatched buffers. If the
+    // buffer length doesn't match the expected 4*width*height, log an error
+    // and abort processing this frame. This makes debugging easier and avoids
+    // silently corrupting frames.
     if (buf.length !== expectedLen) {
-      // If the incoming buffer length doesn't match, log a warning and try
-      // to infer a matching width/height by using the provided vWidth or
-      // falling back to a best-effort width derived from the buffer length.
-      // This makes the worker more robust to mismatched sizes from the host.
       // eslint-disable-next-line no-console
-      console.warn(
-        `ImageData buffer length (${buf.length}) does not match 4*width*height (${expectedLen}). Falling back to derived dimensions.",`,
+      console.error(
+        `ImageData buffer length (${buf.length}) does not match 4*width*height (${expectedLen}).`,
         { bufLen: buf.length, width, height },
       );
-
-      // Derive width from vWidth when available, otherwise try to compute
-      // a width assuming a common aspect ratio. Keep width integer.
-      let derivedWidth = width;
-      let derivedHeight = height;
-      if (!Number.isFinite(msg.vWidth) || !Number.isFinite(msg.vHeight)) {
-        // try to infer width from buffer length: pick width = Math.floor(Math.sqrt(bufLen/4))
-        const pixels = Math.floor(buf.length / 4);
-        derivedWidth = Math.max(1, Math.floor(Math.sqrt(pixels)));
-        derivedHeight = Math.max(1, Math.floor(pixels / derivedWidth));
-      }
-
-      // If still mismatched, slice or pad the buffer to expected size for
-      // the derived dimensions to avoid ImageData construction exceptions.
-      const derivedExpected = 4 * derivedWidth * derivedHeight;
-      let finalBuf;
-      if (buf.length > derivedExpected) finalBuf = buf.slice(0, derivedExpected);
-      else if (buf.length < derivedExpected) {
-        finalBuf = new Uint8ClampedArray(derivedExpected);
-        finalBuf.set(buf);
-      } else finalBuf = buf;
-
-      const imageData = new ImageData(finalBuf, derivedWidth, derivedHeight);
-      return this.estimateCameraPosition({ id: 0, imageData: imageData });
+      // Clear memory/state for this id to avoid reusing possibly invalid mats
+      // on subsequent frames and bail out.
+      if (this.memoryData[id]) this.clearMemory(this.memoryData[id]);
+      return;
     }
 
     const imageData = new ImageData(buf, width, height);