@srsergio/taptapp-ar 1.0.101 → 1.1.2

package/dist/runtime/track.js

@@ -1,381 +1 @@
-/**
- * TapTapp AR - Easy Tracking Configuration
- *
- * Simple API for configuring image target tracking with minimal setup.
- * Based on the reliable configuration from reliability-test.html.
- *
- * @example
- * ```typescript
- * import { createTracker } from 'taptapp-ar';
- *
- * const tracker = await createTracker({
- *   targetSrc: './my-target.png',
- *   container: document.getElementById('ar-container')!,
- *   overlay: document.getElementById('overlay')!,
- *   callbacks: {
- *     onFound: () => console.log('Target found!'),
- *     onLost: () => console.log('Target lost'),
- *     onUpdate: (data) => console.log('Update:', data)
- *   }
- * });
- *
- * // Start tracking from camera
- * tracker.startCamera();
- *
- * // Or track from a video/canvas element
- * tracker.startVideo(videoElement);
- *
- * // Stop tracking
- * tracker.stop();
- * ```
- */
-import { BioInspiredController } from './bio-inspired-controller.js';
-import { OfflineCompiler } from '../compiler/offline-compiler.js';
-import { projectToScreen } from '../core/utils/projection.js';
-// ============================================================================
-// Implementation
-// ============================================================================
-/**
- * Load an image from a URL
- */
-async function loadImage(url) {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.crossOrigin = 'anonymous';
-        img.onload = () => resolve(img);
-        img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
-        img.src = url;
-    });
-}
-/**
- * Get ImageData from various source types
- */
-async function getImageData(source) {
-    let img;
-    if (typeof source === 'string') {
-        img = await loadImage(source);
-    }
-    else if (source instanceof HTMLImageElement) {
-        img = source;
-        if (!img.complete) {
-            await new Promise((resolve, reject) => {
-                img.onload = resolve;
-                img.onerror = reject;
-            });
-        }
-    }
-    else {
-        // Already ImageData
-        return { imageData: source, width: source.width, height: source.height };
-    }
-    const canvas = document.createElement('canvas');
-    canvas.width = img.width;
-    canvas.height = img.height;
-    const ctx = canvas.getContext('2d');
-    ctx.drawImage(img, 0, 0);
-    const imageData = ctx.getImageData(0, 0, img.width, img.height);
-    return { imageData, width: img.width, height: img.height };
-}
-/**
- * Solve homography for overlay positioning (from reliability-test.html)
- */
-function solveHomography(w, h, p1, p2, p3, p4) {
-    const x1 = p1.sx, y1 = p1.sy;
-    const x2 = p2.sx, y2 = p2.sy;
-    const x3 = p3.sx, y3 = p3.sy;
-    const x4 = p4.sx, y4 = p4.sy;
-    const dx1 = x2 - x4, dx2 = x3 - x4, dx3 = x1 - x2 + x4 - x3;
-    const dy1 = y2 - y4, dy2 = y3 - y4, dy3 = y1 - y2 + y4 - y3;
-    const det = dx1 * dy2 - dx2 * dy1;
-    const g = (dx3 * dy2 - dx2 * dy3) / det;
-    const h_coeff = (dx1 * dy3 - dx3 * dy1) / det;
-    const a = x2 - x1 + g * x2;
-    const b = x3 - x1 + h_coeff * x3;
-    const c = x1;
-    const d = y2 - y1 + g * y2;
-    const e = y3 - y1 + h_coeff * y3;
-    const f = y1;
-    return [
-        a / w, d / w, 0, g / w,
-        b / h, e / h, 0, h_coeff / h,
-        0, 0, 1, 0,
-        c, f, 0, 1
-    ];
-}
-/**
- * Create and configure an AR tracker with minimal setup
- */
-export async function createTracker(config) {
-    const { targetSrc, container, overlay, callbacks = {}, cameraConfig = {
-        facingMode: 'environment',
-        width: { ideal: 1280 },
-        height: { ideal: 960 }
-    }, viewportWidth = 1280, viewportHeight = 960, debugMode = false, bioInspiredEnabled = true, scale = 1.0 } = config;
-    // State
-    let isActive = false;
-    let wasTracking = false;
-    let mediaStream = null;
-    let videoElement = null;
-    let targetDimensions = [0, 0];
-    // Create video canvas for camera input
-    const videoCanvas = document.createElement('canvas');
-    videoCanvas.width = viewportWidth;
-    videoCanvas.height = viewportHeight;
-    videoCanvas.style.width = '100%';
-    videoCanvas.style.height = '100%';
-    videoCanvas.style.objectFit = 'cover';
-    videoCanvas.style.position = 'absolute';
-    videoCanvas.style.top = '0';
-    videoCanvas.style.left = '0';
-    videoCanvas.style.zIndex = '0';
-    const videoCtx = videoCanvas.getContext('2d');
-    // Setup overlay styles if provided
-    if (overlay) {
-        overlay.style.position = 'absolute';
-        overlay.style.transformOrigin = '0 0';
-        overlay.style.display = 'none';
-        overlay.style.pointerEvents = 'none';
-    }
-    // Compile target or load pre-compiled data
-    let compiledBuffer;
-    if (targetSrc instanceof ArrayBuffer) {
-        compiledBuffer = targetSrc;
-    }
-    else if (typeof targetSrc === 'string' && targetSrc.toLowerCase().split('?')[0].endsWith('.taar')) {
-        // Pre-compiled .taar file URL
-        if (debugMode)
-            console.log(`[TapTapp AR] Fetching pre-compiled target: ${targetSrc}`);
-        const response = await fetch(targetSrc);
-        if (!response.ok)
-            throw new Error(`Failed to fetch .taar file: ${response.statusText}`);
-        compiledBuffer = await response.arrayBuffer();
-    }
-    else {
-        // Source is an image or ImageData that needs compilation
-        if (debugMode)
-            console.log('[TapTapp AR] Compiling image target...');
-        const { imageData, width, height } = await getImageData(targetSrc);
-        targetDimensions = [width, height];
-        const compiler = new OfflineCompiler();
-        await compiler.compileImageTargets([{ width, height, data: imageData.data }], (progress) => callbacks.onCompileProgress?.(progress));
-        const exported = compiler.exportData();
-        compiledBuffer = exported.buffer.slice(exported.byteOffset, exported.byteOffset + exported.byteLength);
-    }
-    // Create controller with bio-inspired perception
-    const controller = new BioInspiredController({
-        inputWidth: viewportWidth,
-        inputHeight: viewportHeight,
-        debugMode,
-        bioInspired: {
-            enabled: bioInspiredEnabled,
-            aggressiveSkipping: false // Keep stable for real-world conditions
-        },
-        onUpdate: (data) => handleControllerUpdate(data)
-    });
-    // Load compiled targets
-    const loadResult = await controller.addImageTargetsFromBuffer(compiledBuffer);
-    if (loadResult.dimensions && loadResult.dimensions[0]) {
-        targetDimensions = loadResult.dimensions[0];
-    }
-    /**
-     * Handle controller updates and dispatch to user callbacks
-     */
-    function handleControllerUpdate(data) {
-        if (data.type === 'processDone')
-            return;
-        if (data.type !== 'updateMatrix')
-            return;
-        const { targetIndex, worldMatrix, modelViewTransform, screenCoords = [], reliabilities = [], stabilities = [] } = data;
-        const isTracking = worldMatrix !== null;
-        // Calculate averages
-        const avgReliability = reliabilities.length > 0
-            ? reliabilities.reduce((a, b) => a + b, 0) / reliabilities.length
-            : 0;
-        const avgStability = stabilities.length > 0
-            ? stabilities.reduce((a, b) => a + b, 0) / stabilities.length
-            : 0;
-        const updateData = {
-            isTracking,
-            worldMatrix,
-            modelViewTransform,
-            screenCoords,
-            reliabilities,
-            stabilities,
-            avgReliability,
-            avgStability,
-            controller,
-            targetIndex,
-            targetDimensions
-        };
-        // Dispatch state change callbacks
-        if (isTracking && !wasTracking) {
-            callbacks.onFound?.(updateData);
-        }
-        else if (!isTracking && wasTracking) {
-            callbacks.onLost?.(updateData);
-        }
-        // Always call onUpdate when tracking
-        if (isTracking || wasTracking) {
-            callbacks.onUpdate?.(updateData);
-        }
-        // Update overlay position if provided
-        if (overlay && modelViewTransform && worldMatrix) {
-            positionOverlay(modelViewTransform);
-        }
-        else if (overlay && !isTracking) {
-            overlay.style.display = 'none';
-        }
-        wasTracking = isTracking;
-    }
-    /**
-     * Position the overlay element using homography transform
-     */
-    function positionOverlay(modelViewTransform) {
-        if (!overlay)
-            return;
-        const [markerW, markerH] = targetDimensions;
-        const proj = controller.projectionTransform;
-        const containerRect = container.getBoundingClientRect();
-        // Get corners in screen space
-        const pUL = projectToScreen(0, 0, 0, modelViewTransform, proj, viewportWidth, viewportHeight, containerRect, false);
-        const pUR = projectToScreen(markerW, 0, 0, modelViewTransform, proj, viewportWidth, viewportHeight, containerRect, false);
-        const pLL = projectToScreen(0, markerH, 0, modelViewTransform, proj, viewportWidth, viewportHeight, containerRect, false);
-        const pLR = projectToScreen(markerW, markerH, 0, modelViewTransform, proj, viewportWidth, viewportHeight, containerRect, false);
-        const matrix = solveHomography(markerW, markerH, pUL, pUR, pLL, pLR);
-        overlay.style.width = `${markerW}px`;
-        overlay.style.height = `${markerH}px`;
-        // Apply custom scale if provided
-        let matrixString = matrix.join(',');
-        if (scale !== 1.0) {
-            overlay.style.transform = `matrix3d(${matrixString}) scale(${scale})`;
-        }
-        else {
-            overlay.style.transform = `matrix3d(${matrixString})`;
-        }
-        overlay.style.display = 'block';
-    }
-    /**
-     * Draw video frame to canvas
-     */
-    function drawVideoToCanvas(source) {
-        if (source instanceof HTMLVideoElement) {
-            videoCtx.drawImage(source, 0, 0, viewportWidth, viewportHeight);
-        }
-        else {
-            videoCtx.drawImage(source, 0, 0, viewportWidth, viewportHeight);
-        }
-    }
-    // ========================================================================
-    // Public API
-    // ========================================================================
-    const tracker = {
-        async startCamera() {
-            if (isActive)
-                return;
-            try {
-                // Try environment mode first (mobile back camera)
-                try {
-                    mediaStream = await navigator.mediaDevices.getUserMedia({
-                        video: cameraConfig,
-                        audio: false
-                    });
-                }
-                catch (e) {
-                    console.warn('[TapTapp AR] Failed to open environment camera, falling back to default:', e);
-                    // Fallback to any camera
-                    mediaStream = await navigator.mediaDevices.getUserMedia({
-                        video: true,
-                        audio: false
-                    });
-                }
-                videoElement = document.createElement('video');
-                videoElement.srcObject = mediaStream;
-                videoElement.playsInline = true;
-                videoElement.muted = true;
-                await videoElement.play();
-                // Add video canvas to container (at the beginning to be behind)
-                container.style.position = 'relative';
-                if (container.firstChild) {
-                    container.insertBefore(videoCanvas, container.firstChild);
-                }
-                else {
-                    container.appendChild(videoCanvas);
-                }
-                isActive = true;
-                // Start processing loop
-                const processLoop = () => {
-                    if (!isActive || !videoElement)
-                        return;
-                    drawVideoToCanvas(videoElement);
-                    requestAnimationFrame(processLoop);
-                };
-                processLoop();
-                controller.processVideo(videoCanvas);
-            }
-            catch (error) {
-                console.error('[TapTapp AR] Camera access failed:', error);
-                throw error;
-            }
-        },
-        startVideo(source) {
-            if (isActive)
-                return;
-            container.style.position = 'relative';
-            container.appendChild(videoCanvas);
-            isActive = true;
-            // Start processing loop
-            const processLoop = () => {
-                if (!isActive)
-                    return;
-                drawVideoToCanvas(source);
-                requestAnimationFrame(processLoop);
-            };
-            processLoop();
-            controller.processVideo(videoCanvas);
-        },
-        stop() {
-            isActive = false;
-            controller.stopProcessVideo();
-            if (mediaStream) {
-                mediaStream.getTracks().forEach(track => track.stop());
-                mediaStream = null;
-            }
-            if (videoElement) {
-                videoElement.srcObject = null;
-                videoElement = null;
-            }
-            if (videoCanvas.parentNode) {
-                videoCanvas.parentNode.removeChild(videoCanvas);
-            }
-            if (overlay) {
-                overlay.style.display = 'none';
-            }
-        },
-        get isActive() {
-            return isActive;
-        },
-        get isTracking() {
-            return wasTracking;
-        },
-        get controller() {
-            return controller;
-        },
-        get targetDimensions() {
-            return targetDimensions;
-        },
-        getProjectionMatrix() {
-            return controller.getProjectionMatrix();
-        }
-    };
-    return tracker;
-}
-/**
- * Convenience function to create a tracker with camera autostart
- */
-export async function startTracking(config) {
-    const tracker = await createTracker(config);
-    await tracker.startCamera();
-    return tracker;
-}
-// Default export for easy importing
-export default createTracker;
+import{BioInspiredController as e}from"./bio-inspired-controller.js";import{OfflineCompiler as t}from"../compiler/offline-compiler.js";import{projectToScreen as i}from"../core/utils/projection.js";export async function createTracker(a){const{targetSrc:r,container:n,overlay:o,callbacks:s={},cameraConfig:l={facingMode:"environment",width:{ideal:1280},height:{ideal:960}},viewportWidth:c=1280,viewportHeight:d=960,debugMode:g=!1,bioInspiredEnabled:p=!0,scale:m=1}=a;let h=!1,f=!1,u=null,y=null,w=[0,0];const b=document.createElement("canvas");b.width=c,b.height=d,b.style.width="100%",b.style.height="100%",b.style.objectFit="cover",b.style.position="absolute",b.style.top="0",b.style.left="0",b.style.zIndex="0";const v=b.getContext("2d");let x;if(o&&(o.style.position="absolute",o.style.transformOrigin="0 0",o.style.display="none",o.style.pointerEvents="none"),r instanceof ArrayBuffer)x=r;else if("string"==typeof r&&r.toLowerCase().split("?")[0].endsWith(".taar")){g&&console.log(`[TapTapp AR] Fetching pre-compiled target: ${r}`);const e=await fetch(r);if(!e.ok)throw new Error(`Failed to fetch .taar file: ${e.statusText}`);x=await e.arrayBuffer()}else{g&&console.log("[TapTapp AR] Compiling image target...");const{imageData:e,width:i,height:a}=await async function(e){let t;if("string"==typeof e)t=await async function(e){return new Promise((t,i)=>{const a=new Image;a.crossOrigin="anonymous",a.onload=()=>t(a),a.onerror=()=>i(new Error(`Failed to load image: ${e}`)),a.src=e})}(e);else{if(!(e instanceof HTMLImageElement))return{imageData:e,width:e.width,height:e.height};t=e,t.complete||await new Promise((e,i)=>{t.onload=e,t.onerror=i})}const i=document.createElement("canvas");i.width=t.width,i.height=t.height;const a=i.getContext("2d");return a.drawImage(t,0,0),{imageData:a.getImageData(0,0,t.width,t.height),width:t.width,height:t.height}}(r);w=[i,a];const n=new t;await n.compileImageTargets([{width:i,height:a,data:e.data}],e=>s.onCompileProgress?.(e));const o=n.exportData();x=o.buffer.slice(o.byteOffset,o.byteOffset+o.byteLength)}const T=new e({inputWidth:c,inputHeight:d,debugMode:g,bioInspired:{enabled:p,aggressiveSkipping:!1},onUpdate:e=>function(e){if("processDone"===e.type)return;if("updateMatrix"!==e.type)return;const{targetIndex:t,worldMatrix:a,modelViewTransform:r,screenCoords:l=[],reliabilities:g=[],stabilities:p=[]}=e,h=null!==a,u=g.length>0?g.reduce((e,t)=>e+t,0)/g.length:0,y=p.length>0?p.reduce((e,t)=>e+t,0)/p.length:0,b={isTracking:h,worldMatrix:a,modelViewTransform:r,screenCoords:l,reliabilities:g,stabilities:p,avgReliability:u,avgStability:y,controller:T,targetIndex:t,targetDimensions:w};h&&!f?s.onFound?.(b):!h&&f&&s.onLost?.(b),(h||f)&&s.onUpdate?.(b),o&&r&&a?function(e){if(!o)return;const[t,a]=w,r=T.projectionTransform,s=n.getBoundingClientRect(),l=function(e,t,i,a,r,n){const o=i.sx,s=i.sy,l=a.sx,c=a.sy,d=r.sx,g=r.sy,p=n.sx,m=n.sy,h=l-p,f=d-p,u=o-l+p-d,y=c-m,w=g-m,b=s-c+m-g,v=h*w-f*y,x=(u*w-f*b)/v,T=(h*b-u*y)/v;return[(l-o+x*l)/e,(c-s+x*c)/e,0,x/e,(d-o+T*d)/t,(g-s+T*g)/t,0,T/t,0,0,1,0,o,s,0,1]}(t,a,i(0,0,0,e,r,c,d,s,!1),i(t,0,0,e,r,c,d,s,!1),i(0,a,0,e,r,c,d,s,!1),i(t,a,0,e,r,c,d,s,!1));o.style.width=`${t}px`,o.style.height=`${a}px`;let g=l.join(",");o.style.transform=1!==m?`matrix3d(${g}) scale(${m})`:`matrix3d(${g})`,o.style.display="block"}(r):o&&!h&&(o.style.display="none"),f=h}(e)}),C=await T.addImageTargetsFromBuffer(x);function I(e){HTMLVideoElement,v.drawImage(e,0,0,c,d)}return C.dimensions&&C.dimensions[0]&&(w=C.dimensions[0]),{async startCamera(){if(!h)try{try{u=await navigator.mediaDevices.getUserMedia({video:l,audio:!1})}catch(e){console.warn("[TapTapp AR] Failed to open environment camera, falling back to default:",e),u=await navigator.mediaDevices.getUserMedia({video:!0,audio:!1})}y=document.createElement("video"),y.srcObject=u,y.playsInline=!0,y.muted=!0,await y.play(),n.style.position="relative",n.firstChild?n.insertBefore(b,n.firstChild):n.appendChild(b),h=!0;const e=()=>{h&&y&&(I(y),requestAnimationFrame(e))};e(),T.processVideo(b)}catch(e){throw console.error("[TapTapp AR] Camera access failed:",e),e}},startVideo(e){if(h)return;n.style.position="relative",n.appendChild(b),h=!0;const t=()=>{h&&(I(e),requestAnimationFrame(t))};t(),T.processVideo(b)},stop(){h=!1,T.stopProcessVideo(),u&&(u.getTracks().forEach(e=>e.stop()),u=null),y&&(y.srcObject=null,y=null),b.parentNode&&b.parentNode.removeChild(b),o&&(o.style.display="none")},get isActive(){return h},get isTracking(){return f},get controller(){return T},get targetDimensions(){return w},getProjectionMatrix:()=>T.getProjectionMatrix()}}export async function startTracking(e){const t=await createTracker(e);return await t.startCamera(),t}export default createTracker;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@srsergio/taptapp-ar",
-    "version": "1.0.101",
+    "version": "1.1.2",
     "description": "Ultra-fast Augmented Reality (AR) SDK for Node.js and Browser. Image tracking with 100% pure JavaScript, zero-dependencies, and high-performance compilation.",
     "keywords": [
         "augmented reality",
@@ -41,7 +41,10 @@
             "types": "./dist/index.d.ts",
             "import": "./dist/index.js"
         },
-        "./compiler/*": "./dist/compiler/*"
+        "./compiler": {
+            "types": "./dist/compiler/offline-compiler.d.ts",
+            "import": "./dist/compiler/offline-compiler.js"
+        }
     },
     "files": [
         "dist",
@@ -49,7 +52,9 @@
         "LICENSE"
     ],
     "scripts": {
-        "build": "tsc",
+        "build": "tsc && node scripts/minify-dist.mjs",
+        "build:dev": "tsc",
+        "minify": "node scripts/minify-dist.mjs",
         "prepublishOnly": "npm run build",
         "test": "vitest",
         "test:react": "vite --port 4321 --open tests/reliability-test.html",
@@ -88,6 +93,7 @@
         "jimp": "^1.6.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "terser": "^5.44.1",
         "typescript": "^5.4.5",
         "vitest": "^4.0.16"
     },