trying to improve the webcam example

webarkit · Dec 4, 2024 · 7e5d992 · 7e5d992
1 parent 74d2fcf
commit 7e5d992
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 30 deletions.
diff --git a/dist/src/Workers/WebARKitCVWorkers.js.map b/dist/src/Workers/WebARKitCVWorkers.js.map
diff --git a/dist/src/core/WebARKitCoreCV.js.map b/dist/src/core/WebARKitCoreCV.js.map
diff --git a/dist/src/core/WebARKitCoreCV2.js b/dist/src/core/WebARKitCoreCV2.js
diff --git a/dist/src/core/WebARKitCoreCV2.js.map b/dist/src/core/WebARKitCoreCV2.js.map
diff --git a/dist/webarkitCV.js b/dist/webarkitCV.js
diff --git a/examples/example.html b/examples/example.html
@@ -18,6 +18,7 @@
         var video = document.getElementById('video');
 
         const cameraView = new WebARKitCV.CameraViewRenderer(video);
+        console.log(cameraView)
 
         var videoSettingData = {
             width: { min: 640, max: 800 },
@@ -26,23 +27,52 @@
             targetFrameRate: 60
         }
 
+        var oWidth = 320;
+        var oHeight = 240;
+
         const webarkit = new WebARKitCV.WebARKitCV(video);
+        var overlayCanvas;
+        createOverlayCanvas();
 
-        webarkit.setWidth(640)
-            .setHeight(480)
+        webarkit.setWidth(320)
+            .setHeight(240)
             .addTrackable("pinball", "./pinball.jpg")
             .loadTrackables()
 
         const track = webarkit.build();
 
         cameraView.initialize(videoSettingData).then(() => {
+            console.log(cameraView.getImage())
             if (track.isLoaded) {
-                webarkit.track(track.trackers, cameraView.image).then((t) => {
-                    console.log(t);
+                webarkit.track(track.trackers, cameraView.getImage()).then((t) => {
+                    console.log('tracker: ', t);
+                    window.addEventListener("getMatrix", function (e) {
+                        console.log(e.detail);
+                        drawOverlay(e.detail.finalImage);
+                    })
                 })
             }
         })
 
+        function createOverlayCanvas() {
+            overlayCanvas = document.createElement("canvas");
+            setVideoStyle(overlayCanvas);
+            overlayCanvas.id = "overlay";
+            overlayCanvas.width = oWidth;
+            overlayCanvas.height = oHeight;
+            overlayCanvas.style.zIndex = 1;
+            document.body.appendChild(overlayCanvas);
+        }
+        function drawOverlay(imageData) {
+            const overlayCtx = overlayCanvas.getContext("2d");
+            overlayCtx.putImageData(imageData, 0, 0);
+        }
+        function setVideoStyle(elem) {
+            elem.style.position = "absolute";
+            elem.style.top = 0;
+            elem.style.left = 0;
+        }
+
     </script>
 
 </body>

diff --git a/src/core/WebARKitCoreCV2.ts b/src/core/WebARKitCoreCV2.ts
@@ -72,6 +72,7 @@ export class WebARKitCoreCV {
   }
 
   track(msg: any) {
+    console.log("Tracking...", msg);
     const imageData = new ImageData(
       new Uint8ClampedArray(msg.imagedata),
       msg.vWidth,