@srsergio/taptapp-ar 1.0.95 → 1.0.96

package/dist/index.d.ts

@@ -3,5 +3,5 @@ export * from "./react/TaptappAR.js";
 export * from "./react/use-ar.js";
 export * from "./compiler/offline-compiler.js";
 export { Controller } from "./runtime/controller.js";
-export { SimpleAR } from "./runtime/simple-ar.js";
+export { createTracker, startTracking } from "./runtime/track.js";
 export * as protocol from "./core/protocol.js";

package/dist/index.js

@@ -3,5 +3,5 @@ export * from "./react/TaptappAR.js";
 export * from "./react/use-ar.js";
 export * from "./compiler/offline-compiler.js";
 export { Controller } from "./runtime/controller.js";
-export { SimpleAR } from "./runtime/simple-ar.js";
+export { createTracker, startTracking } from "./runtime/track.js";
 export * as protocol from "./core/protocol.js";

package/dist/react/TaptappAR.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useAR } from "./use-ar.js";
 export const TaptappAR = ({ config, className = "", showScanningOverlay = true, showErrorOverlay = true }) => {
-    const { containerRef, overlayRef, status, toggleVideo, trackedPoints } = useAR(config);
+    const { containerRef, overlayRef, status, toggleVideo, trackedPoints, error } = useAR(config);
     // Simple heuristic to determine if it's a video or image
     // based on the presence of videoSrc and common extensions
     const isVideo = useMemo(() => {
@@ -12,7 +12,7 @@ export const TaptappAR = ({ config, className = "", showScanningOverlay = true,
         const url = config.videoSrc.toLowerCase().split('?')[0];
         return videoExtensions.some(ext => url.endsWith(ext)) || config.videoSrc.includes('video');
     }, [config.videoSrc]);
-    return (_jsxs("div", { className: `taptapp-ar-wrapper ${className} ${status}`, style: { position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }, children: [showScanningOverlay && status === "scanning" && (_jsx("div", { className: "taptapp-ar-overlay taptapp-ar-scanning", children: _jsxs("div", { className: "scanning-content", children: [_jsxs("div", { className: "scanning-frame", children: [_jsx("img", { className: "target-preview", src: config.targetImageSrc, alt: "Target", crossOrigin: "anonymous" }), _jsx("div", { className: "scanning-line" })] }), _jsx("p", { className: "scanning-text", children: "Apunta a la imagen para comenzar" })] }) })), showErrorOverlay && status === "error" && (_jsx("div", { className: "taptapp-ar-overlay taptapp-ar-error", children: _jsxs("div", { className: "error-content", children: [_jsx("span", { className: "error-icon", children: "\u26A0\uFE0F" }), _jsx("p", { className: "error-title", children: "No se pudo iniciar AR" }), _jsx("p", { className: "error-text", children: "Verifica los permisos de c\u00E1mara" }), _jsx("button", { className: "retry-btn", onClick: () => window.location.reload(), children: "Reintentar" })] }) })), _jsx("div", { ref: containerRef, className: "taptapp-ar-container", onClick: toggleVideo, style: { width: '100%', height: '100%' }, children: isVideo ? (_jsx("video", { ref: overlayRef, className: "taptapp-ar-overlay-element", src: config.videoSrc, preload: "auto", loop: true, playsInline: true, muted: true, crossOrigin: "anonymous" })) : (_jsx("img", { ref: overlayRef, className: "taptapp-ar-overlay-element", src: config.videoSrc || config.targetImageSrc, crossOrigin: "anonymous", alt: "AR Overlay" })) }), trackedPoints.length > 0 && (_jsx("div", { className: "taptapp-ar-points-overlay", style: { opacity: status === "tracking" ? 1 : 0.6 }, children: trackedPoints
+    return (_jsxs("div", { className: `taptapp-ar-wrapper ${className} ${status}`, style: { position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }, children: [showScanningOverlay && status === "scanning" && (_jsx("div", { className: "taptapp-ar-overlay taptapp-ar-scanning", children: _jsxs("div", { className: "scanning-content", children: [_jsxs("div", { className: "scanning-frame", children: [_jsx("img", { className: "target-preview", src: config.targetImageSrc, alt: "Target", crossOrigin: "anonymous" }), _jsx("div", { className: "scanning-line" })] }), _jsx("p", { className: "scanning-text", children: "Apunta a la imagen para comenzar" })] }) })), status === "compiling" && (_jsx("div", { className: "taptapp-ar-overlay taptapp-ar-compiling", style: { background: 'rgba(0,0,0,0.9)' }, children: _jsxs("div", { className: "scanning-content", children: [_jsx("div", { className: "loading-spinner" }), _jsx("p", { className: "scanning-text", style: { marginTop: '20px' }, children: "Preparando motor AR..." }), _jsx("p", { style: { fontSize: '0.8rem', opacity: 0.6 }, children: "Compilando imagen de referencia" })] }) })), showErrorOverlay && status === "error" && (_jsx("div", { className: "taptapp-ar-overlay taptapp-ar-error", children: _jsxs("div", { className: "error-content", children: [_jsx("span", { className: "error-icon", children: "\u26A0\uFE0F" }), _jsx("p", { className: "error-title", children: "No se pudo iniciar AR" }), _jsx("p", { className: "error-text", children: error || "Verifica los permisos de cámara" }), _jsx("button", { className: "retry-btn", onClick: () => window.location.reload(), children: "Reintentar" })] }) })), _jsx("div", { ref: containerRef, className: "taptapp-ar-container", onClick: toggleVideo, style: { width: '100%', height: '100%' }, children: isVideo ? (_jsx("video", { ref: overlayRef, className: "taptapp-ar-overlay-element", src: config.videoSrc, preload: "auto", loop: true, playsInline: true, muted: true, crossOrigin: "anonymous" })) : (_jsx("img", { ref: overlayRef, className: "taptapp-ar-overlay-element", src: config.videoSrc || config.targetImageSrc, crossOrigin: "anonymous", alt: "AR Overlay" })) }), trackedPoints.length > 0 && (_jsx("div", { className: "taptapp-ar-points-overlay", style: { opacity: status === "tracking" ? 1 : 0.6 }, children: trackedPoints
                     .map((point, i) => {
                     // 🚀 Reflex visualization of the engine's new sensitivity
                     const isStable = point.stability > 0.3 && point.reliability > 0.2;
@@ -89,6 +89,17 @@ export const TaptappAR = ({ config, className = "", showScanningOverlay = true,
                     font-weight: 500;
                     letter-spacing: 0.5px;
                 }
+                .loading-spinner {
+                    width: 40px;
+                    height: 40px;
+                    border: 3px solid rgba(255,255,255,0.1);
+                    border-radius: 50%;
+                    border-top-color: #00e5ff;
+                    animation: spin 1s ease-in-out infinite;
+                }
+                @keyframes spin {
+                    to { transform: rotate(360deg); }
+                }
                 .error-icon { font-size: 3rem; margin-bottom: 10px; }
                 .error-title { font-size: 1.2rem; font-weight: bold; margin: 0; }
                 .error-text { opacity: 0.8; margin: 5px 0 20px; }
@@ -104,12 +115,15 @@ export const TaptappAR = ({ config, className = "", showScanningOverlay = true,
                 }
                 .retry-btn:active { transform: scale(0.95); }
                 .taptapp-ar-overlay-element {
-                    display: block;
-                    width: 100%;
+                    display: none; /* Controlled by tracker */
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: auto;
                     height: auto;
-                    opacity: 0;
                     pointer-events: none;
-                    transition: opacity 0.3s ease;
+                    z-index: 10;
+                    /* Will be positioned via matrix3d by track.ts */
                 }
                 .taptapp-ar-points-overlay {
                     position: absolute;

package/dist/react/types.d.ts

@@ -1,7 +1,7 @@
 export interface ARConfig {
     cardId: string;
     targetImageSrc: string;
-    targetTaarSrc: string;
+    targetTaarSrc?: string;
     videoSrc: string;
     videoWidth: number;
     videoHeight: number;

package/dist/react/use-ar.d.ts

@@ -1,5 +1,5 @@
 import type { ARConfig } from "./types.js";
-export type ARStatus = "scanning" | "tracking" | "error";
+export type ARStatus = "compiling" | "scanning" | "tracking" | "error";
 export interface TrackedPoint {
     x: number;
     y: number;
@@ -13,5 +13,6 @@ export interface UseARReturn {
     isPlaying: boolean;
     toggleVideo: () => Promise<void>;
     trackedPoints: TrackedPoint[];
+    error: string | null;
 }
 export declare const useAR: (config: ARConfig) => UseARReturn;

package/dist/react/use-ar.js

@@ -5,6 +5,7 @@ export const useAR = (config) => {
     const [status, setStatus] = useState("scanning");
     const [isPlaying, setIsPlaying] = useState(false);
     const [trackedPoints, setTrackedPoints] = useState([]);
+    const [error, setError] = useState(null);
     const arInstanceRef = useRef(null);
     const toggleVideo = useCallback(async () => {
         const overlay = overlayRef.current;
@@ -31,65 +32,70 @@ export const useAR = (config) => {
         const initAR = async () => {
             try {
                 // Safe hybrid import for SSR + Speed
-                const { SimpleAR } = await import("../runtime/simple-ar.js");
+                const { createTracker } = await import("../runtime/track.js");
                 if (!isMounted)
                     return;
-                const instance = new SimpleAR({
+                setStatus("compiling");
+                const instance = await createTracker({
                     container: containerRef.current,
-                    targetSrc: config.targetTaarSrc,
+                    targetSrc: config.targetTaarSrc || config.targetImageSrc,
                     overlay: overlayRef.current,
                     scale: config.scale,
-                    debug: false,
-                    onUpdate: (data) => {
-                        const { screenCoords, reliabilities, stabilities } = data;
-                        if (screenCoords && reliabilities && stabilities) {
-                            const points = screenCoords.map((p, i) => ({
-                                x: p.x,
-                                y: p.y,
-                                reliability: reliabilities[i],
-                                stability: stabilities[i]
-                            }));
-                            setTrackedPoints(points);
-                        }
-                    },
-                    onFound: async ({ targetIndex }) => {
-                        console.log(`🎯 Target ${targetIndex} detected!`);
-                        if (!isMounted)
-                            return;
-                        setStatus("tracking");
-                        const overlay = overlayRef.current;
-                        if (overlay instanceof HTMLVideoElement) {
-                            try {
-                                await overlay.play();
-                                setIsPlaying(true);
+                    debugMode: false,
+                    callbacks: {
+                        onUpdate: (data) => {
+                            const { screenCoords, reliabilities, stabilities } = data;
+                            if (screenCoords && reliabilities && stabilities) {
+                                const points = screenCoords.map((p, i) => ({
+                                    x: p.x,
+                                    y: p.y,
+                                    reliability: reliabilities[i],
+                                    stability: stabilities[i]
+                                }));
+                                setTrackedPoints(points);
                             }
-                            catch (err) {
-                                console.warn("Auto-play blocked:", err);
+                        },
+                        onFound: async ({ targetIndex }) => {
+                            console.log(`🎯 Target ${targetIndex} detected!`);
+                            if (!isMounted)
+                                return;
+                            setStatus("tracking");
+                            const overlay = overlayRef.current;
+                            if (overlay instanceof HTMLVideoElement) {
+                                try {
+                                    await overlay.play();
+                                    setIsPlaying(true);
+                                }
+                                catch (err) {
+                                    console.warn("Auto-play blocked:", err);
+                                }
+                            }
+                        },
+                        onLost: ({ targetIndex }) => {
+                            console.log(`👋 Target ${targetIndex} lost`);
+                            if (!isMounted)
+                                return;
+                            setStatus("scanning");
+                            setTrackedPoints([]);
+                            const overlay = overlayRef.current;
+                            if (overlay instanceof HTMLVideoElement) {
+                                overlay.pause();
+                                setIsPlaying(false);
                             }
-                        }
-                    },
-                    onLost: ({ targetIndex }) => {
-                        console.log(`👋 Target ${targetIndex} lost`);
-                        if (!isMounted)
-                            return;
-                        setStatus("scanning");
-                        setTrackedPoints([]);
-                        const overlay = overlayRef.current;
-                        if (overlay instanceof HTMLVideoElement) {
-                            overlay.pause();
-                            setIsPlaying(false);
                         }
                     }
                 });
                 arInstanceRef.current = instance;
-                await instance.start();
+                await instance.startCamera();
                 if (isMounted)
                     setStatus("scanning");
             }
             catch (err) {
-                console.error("Failed to initialize AR:", err);
-                if (isMounted)
+                console.error("❌ [TapTapp AR] Error durante la inicialización:", err);
+                if (isMounted) {
+                    setError(err.message || String(err));
                     setStatus("error");
+                }
             }
         };
         initAR();
@@ -98,13 +104,14 @@ export const useAR = (config) => {
             arInstanceRef.current?.stop();
             arInstanceRef.current = null;
         };
-    }, [config.targetTaarSrc, config.scale]);
+    }, [config.targetTaarSrc, config.targetImageSrc, config.scale]);
     return {
         containerRef,
         overlayRef,
         status,
         isPlaying,
         toggleVideo,
-        trackedPoints
+        trackedPoints,
+        error
     };
 };

package/dist/runtime/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./controller.js";
-export * from "./simple-ar.js";
+export * from "./bio-inspired-controller.js";
+export * from "./track.js";
 export * from "./three.js";
 export * from "./aframe.js";

package/dist/runtime/index.js

@@ -1,4 +1,5 @@
 export * from "./controller.js";
-export * from "./simple-ar.js";
+export * from "./bio-inspired-controller.js";
+export * from "./track.js";
 export * from "./three.js";
 export * from "./aframe.js";

package/dist/runtime/track.d.ts

@@ -0,0 +1,170 @@
+/**
+ * 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';
+/**
+ * Tracking update data passed to onUpdate callback
+ */
+export interface TrackingUpdate {
+    /** Whether the target is currently being tracked */
+    isTracking: boolean;
+    /** 4x4 world transformation matrix (column-major, for WebGL/Three.js) */
+    worldMatrix: number[] | null;
+    /** 3x4 model-view transform matrix */
+    modelViewTransform: number[][] | null;
+    /** Screen coordinates of tracked feature points */
+    screenCoords: Array<{
+        x: number;
+        y: number;
+        id: number;
+    }>;
+    /** Reliability scores (0-1) for each tracked point */
+    reliabilities: number[];
+    /** Stability scores (0-1) for each tracked point */
+    stabilities: number[];
+    /** Average reliability across all points */
+    avgReliability: number;
+    /** Average stability across all points */
+    avgStability: number;
+    /** Reference to the controller for advanced usage */
+    controller: BioInspiredController;
+    /** Index of the tracked target (for multi-target tracking) */
+    targetIndex: number;
+    /** Target dimensions [width, height] */
+    targetDimensions: [number, number];
+}
+/**
+ * Tracking event callbacks
+ */
+export interface TrackingCallbacks {
+    /**
+     * Called when the target is first detected
+     * @param data Initial tracking data
+     */
+    onFound?: (data: TrackingUpdate) => void;
+    /**
+     * Called when tracking is lost
+     * @param data Last known tracking data
+     */
+    onLost?: (data: TrackingUpdate) => void;
+    /**
+     * Called on every frame update while tracking
+     * @param data Current tracking data
+     */
+    onUpdate?: (data: TrackingUpdate) => void;
+    /**
+     * Called during target compilation
+     * @param progress Progress percentage (0-100)
+     */
+    onCompileProgress?: (progress: number) => void;
+}
+/**
+ * Configuration options for the tracker
+ */
+export interface TrackerConfig {
+    /**
+     * Source of the target image to track.
+     * Can be a URL string, HTMLImageElement, ImageData, or ArrayBuffer (pre-compiled .taar)
+     */
+    targetSrc: string | HTMLImageElement | ImageData | ArrayBuffer;
+    /**
+     * Container element for the video/canvas display
+     */
+    container: HTMLElement;
+    /**
+     * Optional overlay element to position over the tracked target
+     */
+    overlay?: HTMLElement;
+    /**
+     * Tracking event callbacks
+     */
+    callbacks?: TrackingCallbacks;
+    /**
+     * Camera configuration (MediaStreamConstraints['video'])
+     * @default { facingMode: 'environment', width: { ideal: 1280 }, height: { ideal: 960 } }
+     */
+    cameraConfig?: MediaStreamConstraints['video'];
+    /**
+     * Viewport width for processing
+     * @default 1280
+     */
+    viewportWidth?: number;
+    /**
+     * Viewport height for processing
+     * @default 960
+     */
+    viewportHeight?: number;
+    /**
+     * Enable debug mode for additional logging
+     * @default false
+     */
+    debugMode?: boolean;
+    /**
+     * Enable bio-inspired perception optimizations
+     * @default true
+     */
+    bioInspiredEnabled?: boolean;
+    /**
+     * Scale multiplier for the overlay
+     * @default 1.0
+     */
+    scale?: number;
+}
+/**
+ * Tracker instance returned by createTracker
+ */
+export interface Tracker {
+    /** Start tracking from device camera */
+    startCamera(): Promise<void>;
+    /** Start tracking from a video or canvas element */
+    startVideo(source: HTMLVideoElement | HTMLCanvasElement): void;
+    /** Stop tracking and release resources */
+    stop(): void;
+    /** Whether the tracker is currently active */
+    readonly isActive: boolean;
+    /** Whether a target is currently being tracked */
+    readonly isTracking: boolean;
+    /** The underlying BioInspiredController instance */
+    readonly controller: BioInspiredController;
+    /** Target dimensions [width, height] */
+    readonly targetDimensions: [number, number];
+    /** Get the projection matrix for 3D rendering */
+    getProjectionMatrix(): number[];
+}
+/**
+ * Create and configure an AR tracker with minimal setup
+ */
+export declare function createTracker(config: TrackerConfig): Promise<Tracker>;
+/**
+ * Convenience function to create a tracker with camera autostart
+ */
+export declare function startTracking(config: TrackerConfig): Promise<Tracker>;
+export default createTracker;