update

demo/index-worker.js

@@ -29,11 +29,13 @@ onmessage = async (msg) => {
   }
 
   if (result.canvas) { // convert canvas to imageData and send it by reference
-    const ctx = result.canvas.getContext('2d');
+    const canvas = new OffscreenCanvas(result.canvas.width, result.canvas.height);
-    const img = ctx?.getImageData(0, 0, result.canvas.width, result.canvas.height);
+    const ctx = canvas.getContext('2d');
+    if (ctx) ctx.drawImage(result.canvas, 0, 0);
+    const img = ctx ? ctx.getImageData(0, 0, result.canvas.width, result.canvas.height) : null;
     result.canvas = null; // must strip original canvas from return value as it cannot be transfered from worker thread
     // @ts-ignore tslint wrong type matching for worker
-    if (img) postMessage({ result, image: img.data.buffer, width: msg.data.width, height: msg.data.height }, [img?.data.buffer]);
+    if (img) postMessage({ result, image: img.data.buffer, width: msg.data.width, height: msg.data.height }, [img.data.buffer]);
     // @ts-ignore tslint wrong type matching for worker
     else postMessage({ result });
   } else {

demo/index.js

@@ -415,7 +415,10 @@ function webWorker(input, image, canvas, timestamp) {
       }
 
       ui.framesDetect++;
-      if (!ui.drawThread) drawResults(input);
+      if (!ui.drawThread) {
+        status();
+        drawResults(input);
+      }
       // eslint-disable-next-line no-use-before-define
       ui.detectThread = requestAnimationFrame((now) => runHumanDetect(input, canvas, now));
     });
@@ -455,7 +458,6 @@ function runHumanDetect(input, canvas, timestamp) {
     const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
     // perform detection in worker
     webWorker(input, data, canvas, timestamp);
-    status();
   } else {
     human.detect(input, userConfig).then((result) => {
       status();