@srsergio/taptapp-ar 1.0.20 → 1.0.22

package/dist/compiler/simple-ar.d.ts

@@ -15,10 +15,11 @@
  * await ar.start();
  */
 export class SimpleAR {
-    constructor({ container, targetSrc, overlay, onFound, onLost, onUpdate, cameraConfig, }: {
+    constructor({ container, targetSrc, overlay, scale, onFound, onLost, onUpdate, cameraConfig, }: {
         container: any;
         targetSrc: any;
         overlay: any;
+        scale?: number | undefined;
         onFound?: null | undefined;
         onLost?: null | undefined;
         onUpdate?: null | undefined;
@@ -31,6 +32,7 @@ export class SimpleAR {
     container: any;
     targetSrc: any;
     overlay: any;
+    scaleMultiplier: number;
     onFound: any;
     onLost: any;
     onUpdateCallback: any;

package/dist/compiler/simple-ar.js

@@ -16,10 +16,12 @@ import { Controller } from "./controller.js";
  * await ar.start();
  */
 class SimpleAR {
-    constructor({ container, targetSrc, overlay, onFound = null, onLost = null, onUpdate = null, cameraConfig = { facingMode: 'environment', width: 1280, height: 720 }, }) {
+    constructor({ container, targetSrc, overlay, scale = 1.0, // Multiplicador de escala personalizado
+    onFound = null, onLost = null, onUpdate = null, cameraConfig = { facingMode: 'environment', width: 1280, height: 720 }, }) {
         this.container = container;
         this.targetSrc = targetSrc;
         this.overlay = overlay;
+        this.scaleMultiplier = scale;
         this.onFound = onFound;
         this.onLost = onLost;
         this.onUpdateCallback = onUpdate;
@@ -129,52 +131,70 @@ class SimpleAR {
             return;
         const [markerW, markerH] = this.markerDimensions[targetIndex];
         const containerRect = this.container.getBoundingClientRect();
-        const videoW = this.video.videoWidth;
-        const videoH = this.video.videoHeight;
+        // Video source dimensions (e.g., 1280x720)
+        let videoW = this.video.videoWidth;
+        let videoH = this.video.videoHeight;
+        // Detect if the video is effectively rotated (Portrait on Mobile)
+        // Browser displays video vertically but videoWidth > videoHeight
+        const isPortrait = containerRect.height > containerRect.width;
+        const isVideoLandscape = videoW > videoH;
+        const needsRotation = isPortrait && isVideoLandscape;
+        // If rotated, the effective buffer dimensions are swapped
+        const effectiveBufferW = needsRotation ? videoH : videoW;
+        const effectiveBufferH = needsRotation ? videoW : videoH;
         // Calculate display area considering object-fit: cover
         const containerAspect = containerRect.width / containerRect.height;
-        const videoAspect = videoW / videoH;
+        const bufferAspect = effectiveBufferW / effectiveBufferH;
         let displayW, displayH, offsetX, offsetY;
-        if (containerAspect > videoAspect) {
+        if (containerAspect > bufferAspect) {
             displayW = containerRect.width;
-            displayH = containerRect.width / videoAspect;
+            displayH = containerRect.width / bufferAspect;
             offsetX = 0;
             offsetY = (containerRect.height - displayH) / 2;
         }
         else {
             displayH = containerRect.height;
-            displayW = containerRect.height * videoAspect;
+            displayW = containerRect.height * bufferAspect;
             offsetX = (containerRect.width - displayW) / 2;
             offsetY = 0;
         }
-        const scaleX = displayW / videoW;
-        const scaleY = displayH / videoH;
-        // Project the center of the marker (markerW/2, markerH/2, 0) into camera space
-        // Marker coordinates are pixels from top-left.
+        const scaleX = displayW / effectiveBufferW;
+        const scaleY = displayH / effectiveBufferH;
+        // Project marker center into camera space
         const tx = mVT[0][0] * (markerW / 2) + mVT[0][1] * (markerH / 2) + mVT[0][3];
         const ty = mVT[1][0] * (markerW / 2) + mVT[1][1] * (markerH / 2) + mVT[1][3];
         const tz = mVT[2][0] * (markerW / 2) + mVT[2][1] * (markerH / 2) + mVT[2][3];
         // focal length (roughly 45 degrees FOV match Controller.js)
-        const f = videoH / 2 / Math.tan((45.0 * Math.PI / 180) / 2);
-        // Perspective projection to screen space
-        // The estimator returns positive Z for depth, so we divide by tz directly.
-        const screenX = offsetX + (videoW / 2 + (tx * f / tz)) * scaleX;
-        const screenY = offsetY + (videoH / 2 - (ty * f / tz)) * scaleY;
-        // Use the first row of mVT to determine rotation and base scale component
-        const rotation = Math.atan2(mVT[1][0], mVT[0][0]);
+        const f = effectiveBufferH / 2 / Math.tan((45.0 * Math.PI / 180) / 2);
+        // Normalized Device Coordinates (NDC) to Screen space
+        let screenX, screenY;
+        if (needsRotation) {
+            // Map camera X/Y to rotated screen Y/X
+            // Camera X -> Screen Y, Camera Y -> Screen -X
+            screenX = offsetX + (effectiveBufferW / 2 + (ty * f / tz)) * scaleX;
+            screenY = offsetY + (effectiveBufferH / 2 - (tx * f / tz)) * scaleY;
+        }
+        else {
+            screenX = offsetX + (effectiveBufferW / 2 + (tx * f / tz)) * scaleX;
+            screenY = offsetY + (effectiveBufferH / 2 + (ty * f / tz)) * scaleY;
+        }
+        // Rotation: compensate for buffer rotation
+        let rotation = Math.atan2(mVT[1][0], mVT[0][0]);
+        if (needsRotation)
+            rotation -= Math.PI / 2;
         const matrixScale = Math.sqrt(mVT[0][0] ** 2 + mVT[1][0] ** 2);
-        // Perspective scale: 1 world pixel = (f/tz) screen pixels
         const perspectiveScale = (f / tz) * scaleX;
-        // Detect overlay intrinsic size (videoWidth for video, naturalWidth for images)
+        // Detect overlay intrinsic size
         const intrinsicWidth = (this.overlay instanceof HTMLVideoElement)
             ? this.overlay.videoWidth
             : (this.overlay instanceof HTMLImageElement ? this.overlay.naturalWidth : 0);
-        // Final scale = (Target Width in Pixels on screen) / (Overlay Intrinsic Width)
-        // If intrinsicWidth is 0 (not loaded), we fallback to a safe 1.0 scale to avoid Infinity
-        const finalScale = intrinsicWidth > 0
+        const baseScale = intrinsicWidth > 0
             ? (matrixScale * markerW * perspectiveScale) / intrinsicWidth
             : 1.0;
+        const finalScale = baseScale * this.scaleMultiplier;
         // Apply transform
+        this.overlay.style.width = 'auto';
+        this.overlay.style.height = 'auto';
         this.overlay.style.position = 'absolute';
         this.overlay.style.transformOrigin = 'center center';
         this.overlay.style.left = '0';
@@ -183,7 +203,7 @@ class SimpleAR {
       translate(${screenX}px, ${screenY}px)
       translate(-50%, -50%)
       scale(${finalScale})
-      rotate(${-rotation}rad)
+      rotate(${rotation}rad)
     `;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@srsergio/taptapp-ar",
-    "version": "1.0.20",
+    "version": "1.0.22",
     "description": "AR Compiler for Node.js and Browser",
     "repository": {
         "type": "git",

package/src/compiler/simple-ar.js

@@ -21,6 +21,7 @@ class SimpleAR {
         container,
         targetSrc,
         overlay,
+        scale = 1.0, // Multiplicador de escala personalizado
         onFound = null,
         onLost = null,
         onUpdate = null,
@@ -29,6 +30,7 @@ class SimpleAR {
         this.container = container;
         this.targetSrc = targetSrc;
         this.overlay = overlay;
+        this.scaleMultiplier = scale;
         this.onFound = onFound;
         this.onLost = onLost;
         this.onUpdateCallback = onUpdate;
@@ -153,63 +155,84 @@ class SimpleAR {
 
         const [markerW, markerH] = this.markerDimensions[targetIndex];
         const containerRect = this.container.getBoundingClientRect();
-        const videoW = this.video.videoWidth;
-        const videoH = this.video.videoHeight;
+
+        // Video source dimensions (e.g., 1280x720)
+        let videoW = this.video.videoWidth;
+        let videoH = this.video.videoHeight;
+
+        // Detect if the video is effectively rotated (Portrait on Mobile)
+        // Browser displays video vertically but videoWidth > videoHeight
+        const isPortrait = containerRect.height > containerRect.width;
+        const isVideoLandscape = videoW > videoH;
+        const needsRotation = isPortrait && isVideoLandscape;
+
+        // If rotated, the effective buffer dimensions are swapped
+        const effectiveBufferW = needsRotation ? videoH : videoW;
+        const effectiveBufferH = needsRotation ? videoW : videoH;
 
         // Calculate display area considering object-fit: cover
         const containerAspect = containerRect.width / containerRect.height;
-        const videoAspect = videoW / videoH;
+        const bufferAspect = effectiveBufferW / effectiveBufferH;
 
         let displayW, displayH, offsetX, offsetY;
 
-        if (containerAspect > videoAspect) {
+        if (containerAspect > bufferAspect) {
             displayW = containerRect.width;
-            displayH = containerRect.width / videoAspect;
+            displayH = containerRect.width / bufferAspect;
             offsetX = 0;
             offsetY = (containerRect.height - displayH) / 2;
         } else {
             displayH = containerRect.height;
-            displayW = containerRect.height * videoAspect;
+            displayW = containerRect.height * bufferAspect;
             offsetX = (containerRect.width - displayW) / 2;
             offsetY = 0;
         }
 
-        const scaleX = displayW / videoW;
-        const scaleY = displayH / videoH;
+        const scaleX = displayW / effectiveBufferW;
+        const scaleY = displayH / effectiveBufferH;
 
-        // Project the center of the marker (markerW/2, markerH/2, 0) into camera space
-        // Marker coordinates are pixels from top-left.
+        // Project marker center into camera space
         const tx = mVT[0][0] * (markerW / 2) + mVT[0][1] * (markerH / 2) + mVT[0][3];
         const ty = mVT[1][0] * (markerW / 2) + mVT[1][1] * (markerH / 2) + mVT[1][3];
         const tz = mVT[2][0] * (markerW / 2) + mVT[2][1] * (markerH / 2) + mVT[2][3];
 
         // focal length (roughly 45 degrees FOV match Controller.js)
-        const f = videoH / 2 / Math.tan((45.0 * Math.PI / 180) / 2);
+        const f = effectiveBufferH / 2 / Math.tan((45.0 * Math.PI / 180) / 2);
 
-        // Perspective projection to screen space
-        // The estimator returns positive Z for depth, so we divide by tz directly.
-        const screenX = offsetX + (videoW / 2 + (tx * f / tz)) * scaleX;
-        const screenY = offsetY + (videoH / 2 - (ty * f / tz)) * scaleY;
+        // Normalized Device Coordinates (NDC) to Screen space
+        let screenX, screenY;
 
-        // Use the first row of mVT to determine rotation and base scale component
-        const rotation = Math.atan2(mVT[1][0], mVT[0][0]);
-        const matrixScale = Math.sqrt(mVT[0][0] ** 2 + mVT[1][0] ** 2);
+        if (needsRotation) {
+            // Map camera X/Y to rotated screen Y/X
+            // Camera X -> Screen Y, Camera Y -> Screen -X
+            screenX = offsetX + (effectiveBufferW / 2 + (ty * f / tz)) * scaleX;
+            screenY = offsetY + (effectiveBufferH / 2 - (tx * f / tz)) * scaleY;
+        } else {
+            screenX = offsetX + (effectiveBufferW / 2 + (tx * f / tz)) * scaleX;
+            screenY = offsetY + (effectiveBufferH / 2 + (ty * f / tz)) * scaleY;
+        }
+
+        // Rotation: compensate for buffer rotation
+        let rotation = Math.atan2(mVT[1][0], mVT[0][0]);
+        if (needsRotation) rotation -= Math.PI / 2;
 
-        // Perspective scale: 1 world pixel = (f/tz) screen pixels
+        const matrixScale = Math.sqrt(mVT[0][0] ** 2 + mVT[1][0] ** 2);
         const perspectiveScale = (f / tz) * scaleX;
 
-        // Detect overlay intrinsic size (videoWidth for video, naturalWidth for images)
+        // Detect overlay intrinsic size
         const intrinsicWidth = (this.overlay instanceof HTMLVideoElement)
             ? this.overlay.videoWidth
             : (this.overlay instanceof HTMLImageElement ? this.overlay.naturalWidth : 0);
 
-        // Final scale = (Target Width in Pixels on screen) / (Overlay Intrinsic Width)
-        // If intrinsicWidth is 0 (not loaded), we fallback to a safe 1.0 scale to avoid Infinity
-        const finalScale = intrinsicWidth > 0
+        const baseScale = intrinsicWidth > 0
             ? (matrixScale * markerW * perspectiveScale) / intrinsicWidth
             : 1.0;
 
+        const finalScale = baseScale * this.scaleMultiplier;
+
         // Apply transform
+        this.overlay.style.width = 'auto';
+        this.overlay.style.height = 'auto';
         this.overlay.style.position = 'absolute';
         this.overlay.style.transformOrigin = 'center center';
         this.overlay.style.left = '0';
@@ -218,10 +241,9 @@ class SimpleAR {
       translate(${screenX}px, ${screenY}px)
       translate(-50%, -50%)
       scale(${finalScale})
-      rotate(${-rotation}rad)
+      rotate(${rotation}rad)
     `;
     }
-
 }
 
 export { SimpleAR };