@srsergio/taptapp-ar 1.0.95 → 1.0.96

package/dist/runtime/simple-ar.js

@@ -1,323 +0,0 @@
-import { BioInspiredController } from "./bio-inspired-controller.js";
-import { projectToScreen } from "../core/utils/projection.js";
-/**
- * 🕵️ Internal Smoothing Manager
- * Applies Median + Adaptive Alpha filtering for sub-pixel stability.
- */
-class SmoothingManager {
-    history = new Map();
-    lastFiltered = new Map();
-    medianSize = 3;
-    deadZone = 0.2;
-    smooth(id, raw, reliability) {
-        if (!this.history.has(id))
-            this.history.set(id, []);
-        const h = this.history.get(id);
-        h.push(raw);
-        if (h.length > this.medianSize)
-            h.shift();
-        // Get median
-        const sortedX = [...h].map(p => p.x).sort((a, b) => a - b);
-        const sortedY = [...h].map(p => p.y).sort((a, b) => a - b);
-        const median = {
-            x: sortedX[Math.floor(sortedX.length / 2)],
-            y: sortedY[Math.floor(sortedY.length / 2)]
-        };
-        // Adaptive Alpha based on reliability
-        const baseAlpha = 0.15;
-        const alpha = baseAlpha + (reliability * (1.0 - baseAlpha));
-        const last = this.lastFiltered.get(id) || median;
-        let filteredX = last.x * (1 - alpha) + median.x * alpha;
-        let filteredY = last.y * (1 - alpha) + median.y * alpha;
-        // Dead-zone to kill jitter at rest
-        if (Math.abs(filteredX - last.x) < this.deadZone)
-            filteredX = last.x;
-        if (Math.abs(filteredY - last.y) < this.deadZone)
-            filteredY = last.y;
-        const result = { x: filteredX, y: filteredY };
-        this.lastFiltered.set(id, result);
-        return result;
-    }
-    reset(id) {
-        if (id !== undefined) {
-            this.history.delete(id);
-            this.lastFiltered.delete(id);
-        }
-        else {
-            this.history.clear();
-            this.lastFiltered.clear();
-        }
-    }
-}
-class SimpleAR {
-    container;
-    targetSrc;
-    overlay;
-    scaleMultiplier;
-    onFound;
-    onLost;
-    onUpdateCallback;
-    cameraConfig;
-    debug;
-    video = null;
-    controller = null;
-    smoother = new SmoothingManager();
-    isTracking = false;
-    markerDimensions = [];
-    debugPanel = null;
-    debugCanvas = null;
-    debugCtx = null;
-    lastTime = 0;
-    fps = 0;
-    frameCount = 0;
-    constructor({ container, targetSrc, overlay, scale = 1.0, onFound = null, onLost = null, onUpdate = null, cameraConfig = { facingMode: 'environment', width: 1280, height: 720 }, debug = false, }) {
-        this.container = container;
-        this.targetSrc = targetSrc;
-        this.overlay = overlay;
-        this.scaleMultiplier = scale;
-        this.onFound = onFound;
-        this.onLost = onLost;
-        this.onUpdateCallback = onUpdate;
-        this.cameraConfig = cameraConfig;
-        this.debug = debug;
-    }
-    async start() {
-        this._createVideo();
-        await this._startCamera();
-        this._initController();
-        if (this.debug) {
-            this._createDebugPanel();
-            this._createDebugCanvas();
-        }
-        const targets = Array.isArray(this.targetSrc) ? this.targetSrc : [this.targetSrc];
-        const result = await this.controller.addImageTargets(targets);
-        this.markerDimensions = result.dimensions;
-        // Kick off loop
-        this.controller.processVideo(this.video);
-        return this;
-    }
-    stop() {
-        if (this.controller) {
-            this.controller.dispose();
-            this.controller = null;
-        }
-        if (this.video && this.video.srcObject) {
-            this.video.srcObject.getTracks().forEach(track => track.stop());
-            this.video.remove();
-            this.video = null;
-        }
-        this.isTracking = false;
-        this.smoother.reset();
-    }
-    _createVideo() {
-        this.video = document.createElement('video');
-        this.video.setAttribute('autoplay', '');
-        this.video.setAttribute('playsinline', '');
-        this.video.setAttribute('muted', '');
-        this.video.style.cssText = `
-          position: absolute;
-          top: 0; left: 0; width: 100%; height: 100%;
-          object-fit: cover; z-index: 0;
-        `;
-        this.container.style.position = 'relative';
-        this.container.style.overflow = 'hidden';
-        this.container.insertBefore(this.video, this.container.firstChild);
-    }
-    async _startCamera() {
-        const stream = await navigator.mediaDevices.getUserMedia({ video: this.cameraConfig });
-        this.video.srcObject = stream;
-        await this.video.play();
-        await new Promise(resolve => {
-            if (this.video.videoWidth > 0)
-                return resolve();
-            this.video.onloadedmetadata = () => resolve();
-        });
-    }
-    _initController() {
-        this.controller = new BioInspiredController({
-            inputWidth: this.video.videoWidth,
-            inputHeight: this.video.videoHeight,
-            debugMode: this.debug,
-            bioInspired: {
-                enabled: true,
-                aggressiveSkipping: false
-            },
-            onUpdate: (data) => this._handleUpdate(data)
-        });
-    }
-    _handleUpdate(data) {
-        if (data.type !== 'updateMatrix') {
-            if (data.type === 'featurePoints' && this.debugCtx) {
-                this._drawDebugFeatures(data.featurePoints);
-            }
-            return;
-        }
-        // FPS Meter
-        const now = performance.now();
-        this.frameCount++;
-        if (now - this.lastTime >= 1000) {
-            this.fps = Math.round((this.frameCount * 1000) / (now - this.lastTime));
-            this.frameCount = 0;
-            this.lastTime = now;
-        }
-        const { targetIndex, worldMatrix, modelViewTransform, reliabilities, stabilities, screenCoords, pixelsSaved } = data;
-        // Apply Smoothing
-        let smoothedCoords = screenCoords || [];
-        if (screenCoords && screenCoords.length > 0) {
-            smoothedCoords = screenCoords.map((p) => {
-                const rel = reliabilities ? (reliabilities[p.id] || 0.5) : 0.5;
-                const sm = this.smoother.smooth(p.id, p, rel);
-                return { ...sm, id: p.id };
-            });
-        }
-        if (worldMatrix) {
-            if (!this.isTracking) {
-                this.isTracking = true;
-                if (this.overlay)
-                    this.overlay.style.opacity = '1';
-                this.onFound && this.onFound({ targetIndex });
-            }
-            this._positionOverlay(modelViewTransform, targetIndex);
-        }
-        else {
-            if (this.isTracking) {
-                this.isTracking = false;
-                if (this.overlay)
-                    this.overlay.style.opacity = '0';
-                this.onLost && this.onLost({ targetIndex });
-                this.smoother.reset();
-            }
-        }
-        // Notify callback
-        if (this.onUpdateCallback) {
-            this.onUpdateCallback({
-                targetIndex,
-                worldMatrix,
-                screenCoords: smoothedCoords,
-                reliabilities: reliabilities || [],
-                stabilities: stabilities || [],
-                detectionPoints: data.featurePoints
-            });
-        }
-        // Draw Debug UI
-        if (this.debug) {
-            this._updateHUD(data);
-            this._drawDebugPoints(smoothedCoords, stabilities);
-        }
-    }
-    _positionOverlay(mVT, targetIndex) {
-        if (!this.overlay || !this.markerDimensions[targetIndex])
-            return;
-        const [markerW, markerH] = this.markerDimensions[targetIndex];
-        const containerRect = this.container.getBoundingClientRect();
-        const videoW = this.video.videoWidth;
-        const videoH = this.video.videoHeight;
-        const proj = this.controller.projectionTransform;
-        // Handle portrait rotation for mobile
-        const isPortrait = containerRect.height > containerRect.width;
-        const isVideoLandscape = videoW > videoH;
-        const needsRotation = isPortrait && isVideoLandscape;
-        const pUL = projectToScreen(0, 0, 0, mVT, proj, videoW, videoH, containerRect, needsRotation);
-        const pUR = projectToScreen(markerW, 0, 0, mVT, proj, videoW, videoH, containerRect, needsRotation);
-        const pLL = projectToScreen(0, markerH, 0, mVT, proj, videoW, videoH, containerRect, needsRotation);
-        const pLR = projectToScreen(markerW, markerH, 0, mVT, proj, videoW, videoH, containerRect, needsRotation);
-        const matrix = this._solveHomography(markerW, markerH, pUL, pUR, pLL, pLR);
-        this.overlay.style.maxWidth = 'none';
-        this.overlay.style.width = `${markerW}px`;
-        this.overlay.style.height = `${markerH}px`;
-        this.overlay.style.position = 'absolute';
-        this.overlay.style.transformOrigin = '0 0';
-        this.overlay.style.left = '0';
-        this.overlay.style.top = '0';
-        this.overlay.style.display = 'block';
-        this.overlay.style.transform = `
-            matrix3d(${matrix.join(',')})
-            translate(${markerW / 2}px, ${markerH / 2}px)
-            scale(${this.scaleMultiplier})
-            translate(${-markerW / 2}px, ${-markerH / 2}px)
-        `;
-    }
-    _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
-        ];
-    }
-    // --- DEBUG METHODS ---
-    _createDebugPanel() {
-        this.debugPanel = document.createElement('div');
-        this.debugPanel.style.cssText = `
-            position: absolute; top: 10px; left: 10px;
-            background: rgba(0, 0, 0, 0.7); color: #0f0;
-            font-family: monospace; font-size: 11px; padding: 10px;
-            border-radius: 5px; z-index: 100; pointer-events: none;
-            line-height: 1.4; border-left: 3px solid #0f0;
-        `;
-        this.container.appendChild(this.debugPanel);
-    }
-    _createDebugCanvas() {
-        this.debugCanvas = document.createElement('canvas');
-        this.debugCanvas.width = this.container.clientWidth;
-        this.debugCanvas.height = this.container.clientHeight;
-        this.debugCanvas.style.cssText = `
-            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-            pointer-events: none; z-index: 99;
-        `;
-        this.container.appendChild(this.debugCanvas);
-        this.debugCtx = this.debugCanvas.getContext('2d');
-    }
-    _updateHUD(data) {
-        if (!this.debugPanel)
-            return;
-        const rel = data.reliabilities ? (data.reliabilities.reduce((a, b) => a + b, 0) / data.reliabilities.length).toFixed(2) : "0.00";
-        const stab = data.stabilities ? (data.stabilities.reduce((a, b) => a + b, 0) / data.stabilities.length).toFixed(2) : "0.00";
-        const savings = data.pixelsSaved ? ((data.pixelsSaved / (this.video.videoWidth * this.video.videoHeight)) * 100).toFixed(0) : "0";
-        this.debugPanel.innerHTML = `
-            <b>TapTapp AR HUD</b><br>
-            ------------------<br>
-            STATUS:   <span style="color:${this.isTracking ? '#0f0' : '#f00'}">${this.isTracking ? 'TRACKING' : 'SEARCHING'}</span><br>
-            FPS:      ${this.fps}<br>
-            RELIAB:   ${rel}<br>
-            STABIL:   ${stab}<br>
-            SAVINGS:  ${savings}% Pixels<br>
-            POINTS:   ${data.screenCoords?.length || 0}
-        `;
-    }
-    _drawDebugPoints(coords, stabilities) {
-        if (!this.debugCtx)
-            return;
-        this.debugCtx.clearRect(0, 0, this.debugCanvas.width, this.debugCanvas.height);
-        coords.forEach((p, i) => {
-            const s = stabilities ? (stabilities[i] || 0) : 0.5;
-            this.debugCtx.fillStyle = `rgba(0, 255, 0, ${0.4 + s * 0.6})`;
-            this.debugCtx.fillRect(p.x - 1, p.y - 1, 2, 2);
-        });
-    }
-    _drawDebugFeatures(points) {
-        if (!this.debugCtx || this.isTracking)
-            return;
-        this.debugCtx.clearRect(0, 0, this.debugCanvas.width, this.debugCanvas.height);
-        this.debugCtx.fillStyle = 'rgba(255, 255, 0, 0.4)';
-        points.slice(0, 200).forEach(p => {
-            this.debugCtx.fillRect(p.x - 1, p.y - 1, 2, 2);
-        });
-    }
-}
-export { SimpleAR };