npm - @srsergio/taptapp-ar - Versions diffs - 1.0.7 → 1.0.8 - Mend

@srsergio/taptapp-ar 1.0.7 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md +5 -43
package/package.json +2 -5
package/src/astro/ARScene.astro +0 -59
package/src/astro/ARVideoTrigger.astro +0 -73
package/src/astro/overlays/ErrorOverlay.astro +0 -40
package/src/astro/overlays/LoadingOverlay.astro +0 -28
package/src/astro/overlays/ScanningOverlay.astro +0 -119
package/src/astro/scripts/ARScripts.astro +0 -118
package/src/astro/styles/ARStyles.astro +0 -147

package/README.md CHANGED Viewed

@@ -1,18 +1,18 @@
 # @srsergio/taptapp-ar
-🚀 **TapTapp AR** is a high-performance Augmented Reality (AR) toolkit specifically designed for **Astro** and **Node.js** environments. It provides a seamless way to integrate image tracking, video overlays, and an offline compiler for image targets.
+🚀 **TapTapp AR** is a high-performance Augmented Reality (AR) compiler toolkit for **Node.js** and **Browser** environments. It provides an ultra-fast offline compiler for image targets.
-Built on top of **MindAR** and **A-Frame**, this package features a **pure JavaScript offline compiler** that requires **no TensorFlow** for backend compilation, while still supporting TensorFlow.js for real-time tracking in the browser.
+Built with performance in mind, this package features a **pure JavaScript offline compiler** that requires **no TensorFlow** for compilation, generating high-quality `.mind` files in record time.
 ---
 ## 🌟 Key Features
-- 🚀 **Astro Native**: Optimized components for Astro's Islands architecture.
 - 🖼️ **Ultra-Fast Offline Compiler**: Pure JavaScript compiler that generates `.mind` target files in **~1.3s per image**.
 - ⚡ **Zero TensorFlow for Compilation**: The offline compiler uses optimized pure JS algorithms - no TensorFlow installation required.
 - 🧵 **Multi-threaded Engine**: Truly parallel processing using Node.js `worker_threads` for bulk image compilation.
 - 🚀 **Serverless Ready**: Lightweight compiler with minimal dependencies, perfect for Vercel, AWS Lambda, and Netlify.
+- 📦 **Protocol V3 (Columnar Binary)**: Industry-leading performance with zero-copy loading and 80%+ smaller files.
 ---
@@ -26,34 +26,6 @@ npm install @srsergio/taptapp-ar
 > **Note:** TensorFlow is **NOT required** for the offline compiler. It only uses pure JavaScript.
-For real-time AR tracking in the browser, TensorFlow.js is loaded automatically via CDN.
----
-## 🚀 Astro Integration Guide
-The easiest way to display AR content is using the `ARVideoTrigger` component.
-### Usage
-```astro
----
-import ARVideoTrigger from '@srsergio/taptapp-ar/astro/ARVideoTrigger.astro';
-const config = {
-  cardId: 'unique-id',
-  targetImageSrc: 'https://cdn.example.com/target.jpg',
-  targetMindSrc: 'https://cdn.example.com/targets.mind',
-  videoSrc: 'https://cdn.example.com/overlay.mp4',
-  videoWidth: 1280,
-  videoHeight: 720,
-  scale: 1.2,
-};
----
-<ARVideoTrigger config={config} />
-```
 ---
 ## 🖼️ High-Performance Compiler (Protocol V3)
@@ -83,7 +55,7 @@ TaptApp AR features the industry's most advanced **pure JavaScript** offline com
 Optimized for server-side compilation with multi-core parallelism:
 ```javascript
-import { OfflineCompiler } from '@srsergio/taptapp-ar/compiler/offline-compiler.js';
+import { OfflineCompiler } from '@srsergio/taptapp-ar';
 const compiler = new OfflineCompiler();
@@ -100,22 +72,12 @@ const binaryBuffer = compiler.exportData(); // Yields a much smaller .mind file
 ### 🌐 Frontend (Zero-Latency Loading)
 ```javascript
-import { OfflineCompiler } from '@srsergio/taptapp-ar/compiler/offline-compiler.js';
+import { OfflineCompiler } from '@srsergio/taptapp-ar';
 const compiler = new OfflineCompiler();
 // Loading 127KB instead of 800KB saves bandwidth and CPU parsing time
 compiler.importData(binaryBuffer);
 ```
----
-## ❓ Troubleshooting
-| Issue | Solution |
-| :--- | :--- |
-| **Camera not starting** | Ensure your site is served via `HTTPS`. Browsers block camera access on insecure origins. |
-| **Video not playing** | iOS Safari requires `muted` and `playsinline` attributes for autoplaying videos. Our components handle this by default. |
-| **CORS errors** | Ensure that `targetImageSrc`, `targetMindSrc`, and `videoSrc` have CORS headers enabled (`Access-Control-Allow-Origin: *`). |
-| **Memory Outage on Serverless** | Reduce the resolution of your target images. High-res images increase memory pressure during compilation. |
 ---

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "name": "@srsergio/taptapp-ar",
-    "version": "1.0.7",
-    "description": "AR Visualizer and Compiler for Astro and React",
+    "version": "1.0.8",
+    "description": "AR Compiler for Node.js and Browser",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/srsergiolazaro/taptapp-ar.git"
@@ -19,7 +19,6 @@
             "types": "./dist/index.d.ts",
             "import": "./dist/index.js"
         },
-        "./astro/*": "./src/astro/*",
         "./compiler/*": "./src/compiler/*"
     },
     "files": [
@@ -34,7 +33,6 @@
     },
     "peerDependencies": {
         "aframe": ">=1.5.0",
-        "astro": ">=4.0.0",
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0",
         "three": ">=0.160.0"
@@ -48,7 +46,6 @@
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@types/three": "^0.170.0",
-        "astro": "5.16.4",
         "jimp": "^1.6.0",
         "typescript": "^5.4.5",
         "vitest": "^4.0.16"

package/src/astro/ARScene.astro DELETED Viewed

@@ -1,59 +0,0 @@
----
-import type { PropsConfig } from "../react/types";
-interface Props {
-  config: PropsConfig;
-}
-const { config } = Astro.props;
----
-<a-scene
-  mindar-image={`imageTargetSrc: ${config.targetMindSrc};uiLoading: #loading-overlay;uiScanning: #scanning-overlay;uiError: #error-overlay`}
-  color-space="sRGB"
-  renderer="colorManagement: true, physicallyCorrectLights"
-  vr-mode-ui="enabled: false"
-  device-orientation-permission-ui="enabled: false"
->
-  <a-assets>
-    <img id="target-image" crossorigin="anonymous" src={config.targetImageSrc} />
-    <video
-      id="ar-video"
-      src={config.videoSrc}
-      preload="auto"
-      loop
-      autoplay
-      playsinline
-      webkit-playsinline
-      muted
-      crossorigin="anonymous"
-      class="absolute opacity-0"
-      width="1"
-      height="1"></video></a-assets
-  >
-  <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
-  <a-entity mindar-image-target="targetIndex: 0">
-    <a-video
-      id="main-video"
-      src="#ar-video"
-      position="0 0 0"
-      opacity="1"
-      width={(config.videoWidth / config.videoHeight) * config.scale}
-      height={1 * config.scale}
-      rotation="0 0 0"
-      visible="true"
-      play-on-click
-      autoplay></a-video>
-  </a-entity>
-</a-scene>
-<style>
-  video {
-    width: 100% !important;
-    height: 100% !important;
-    object-fit: cover !important;
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-  }
-</style>

package/src/astro/ARVideoTrigger.astro DELETED Viewed

@@ -1,73 +0,0 @@
----
-import ARStyles from "./styles/ARStyles.astro";
-import LoadingOverlay from "./overlays/LoadingOverlay.astro";
-import ScanningOverlay from "./overlays/ScanningOverlay.astro";
-import ErrorOverlay from "./overlays/ErrorOverlay.astro";
-import ARScene from "./ARScene.astro";
-import ARScripts from "./scripts/ARScripts.astro";
-import type { PropsConfig } from "../react/types";
-interface Props {
-  config: PropsConfig;
-}
-const {config} = Astro.props ;
----
-<!doctype html>
-<html lang="es-PE">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <meta name="robots" content="index, follow" />
-    <link rel="canonical" href="https://go.taptapp.xyz" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any" />
-    <meta name="theme-color" content="#3367D6" />
-    <meta
-      name="description"
-      content="Crea impacto duradero y genera confianza en tus clientes con la tarjeta digital TapTapp. Presenta tu información de manera clara y atractiva para conectar con el futuro."
-    />
-    <meta name="keywords" content="tarjeta digital, identidad, futuro, confianza, clientes" />
-    <meta name="author" content="@srsergiolazaro" />
-    <meta property="og:title" content="TapTapp AR Experience" />
-    <meta
-      property="og:description"
-      content="Descubre nuestra experiencia de realidad aumentada y da vida a tu tarjeta digital TapTapp."
-    />
-    <meta property="og:image" content="https://go.taptapp.xyz/Imgsocial.jpg" />
-    <meta property="og:url" content="https://go.taptapp.xyz" />
-    <link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous" />
-    <title>TapTapp AR Experience</title>
-    <script is:inline src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
-    <script is:inline src="https://r2-worker.sergiolazaromondargo.workers.dev/taptapp-ar.prod.js"
-    ></script>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap"
-      rel="stylesheet"
-    />
-    <ARStyles />
-    <ARScripts />
-    <style>
-      body {
-        font-family: "Montserrat", sans-serif;
-        margin: 0;
-        overflow: hidden;
-      }
-      @view-transition {
-        navigation: auto;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- Custom UI Overlays -->
-    <LoadingOverlay />
-    <ScanningOverlay targetImage={config.targetImageSrc} />
-    <ErrorOverlay />
-    <ARScene config={config} />
-  </body>
-</html>

package/src/astro/overlays/ErrorOverlay.astro DELETED Viewed

@@ -1,40 +0,0 @@
-<div id="error-overlay" class="custom-overlay hidden bg-gradient-to-br from-red-700 to-purple-700">
-  <div class="mb-5 text-5xl">⚠️</div>
-  <div class="font-semibold tracking-wide text-white/95 text-xl">No se pudo iniciar</div>
-  <div class="mt-3 max-w-[80%] text-center font-light text-white/75 text-sm">
-    Verifique los permisos de cámara o intente con otro dispositivo
-  </div>
-  <button
-    onclick="location.reload()"
-    class="mt-6 rounded-lg bg-blue-500 px-6 py-2.5 font-semibold text-white transition-all hover:bg-blue-600 hover:shadow-lg"
-  >
-    Reintentar
-  </button>
-</div>
-<style>
-  #error-overlay {
-    background: linear-gradient(135deg, #c0392b, #8e44ad);
-  }
-  .error-icon {
-    font-size: 50px;
-    margin-bottom: 20px;
-  }
-  .retry-button {
-    margin-top: 20px;
-    padding: 10px 20px;
-    background-color: #3498db;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-  }
-  .retry-button:hover {
-    background-color: #2980b9;
-  }
-</style>

package/src/astro/overlays/LoadingOverlay.astro DELETED Viewed

@@ -1,28 +0,0 @@
-<div id="loading-overlay" class="custom-overlay bg-gradient-to-br from-gray-800 to-gray-900">
-  <div class="loader"></div>
-  <div class="mt-5 font-semibold tracking-wide text-white/95 text-xl">Preparando...</div>
-  <div class="mt-3 max-w-[80%] text-center font-light text-white/75 text-sm">
-    Un momento mientras optimizamos su experiencia
-  </div>
-</div>
-<style>
-  .loader {
-    width: 60px;
-    height: 60px;
-    border: 5px solid rgba(255, 255, 255, 0.2);
-    border-top: 5px solid #3498db;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin-bottom: 20px;
-  }
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-</style>

package/src/astro/overlays/ScanningOverlay.astro DELETED Viewed

@@ -1,119 +0,0 @@
----
-interface Props {
-  targetImage?: string;
-}
-const { targetImage } = Astro.props;
----
-<div
-  id="scanning-overlay"
-  class="custom-overlay relative flex flex-col items-center justify-center"
->
-  <div class="scan-region relative mb-8 h-[300px] w-[300px] overflow-hidden">
-    <!-- Esquinas del recuadro de escaneo -->
-    <div class="corner top-left"></div>
-    <div class="corner top-right"></div>
-    <div class="corner bottom-left"></div>
-    <div class="corner bottom-right"></div>
-    <div class="absolute inset-0 p-6">
-      <img id="target-preview" src={targetImage} class="h-full w-full object-contain opacity-90" />
-    </div>
-    <div class="scan-animation"></div>
-  </div>
-  <div class="font-semibold tracking-wide text-white/95 text-2xl">Escaneando...</div>
-  <div class="mt-3 max-w-[80%] text-center font-light text-white/75 text-sm">
-    Centre el sticker dentro del marco
-  </div>
-</div>
-<style>
-  .scan-region img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    opacity: 0.7;
-  }
-  .scan-animation {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background: linear-gradient(
-      90deg,
-      rgba(52, 152, 219, 0),
-      rgba(52, 152, 219, 0.8),
-      rgba(155, 89, 182, 0.8),
-      rgba(52, 152, 219, 0)
-    );
-    box-shadow:
-      0 0 10px rgba(52, 152, 219, 0.7),
-      0 0 20px rgba(155, 89, 182, 0.4);
-    animation: scan 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-  }
-  @keyframes scan {
-    0% {
-      transform: translateY(0);
-      opacity: 0.8;
-    }
-    15% {
-      opacity: 1;
-    }
-    50% {
-      transform: translateY(298px);
-      opacity: 1;
-    }
-    85% {
-      opacity: 0.8;
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 0.8;
-    }
-  }
-  /* Estilos para las esquinas */
-  .corner {
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    border-color: white;
-    border-style: solid;
-    opacity: 0.7;
-    z-index: 1;
-  }
-  .top-left {
-    top: 6px;
-    left: 6px;
-    border-width: 2px 0 0 2px;
-    border-top-left-radius: 6px;
-  }
-  .top-right {
-    top: 6px;
-    right: 6px;
-    border-width: 2px 2px 0 0;
-    border-top-right-radius: 6px;
-  }
-  .bottom-left {
-    bottom: 6px;
-    left: 6px;
-    border-width: 0 0 2px 2px;
-    border-bottom-left-radius: 6px;
-  }
-  .bottom-right {
-    bottom: 6px;
-    right: 6px;
-    border-width: 0 2px 2px 0;
-    border-bottom-right-radius: 6px;
-  }
-</style>

package/src/astro/scripts/ARScripts.astro DELETED Viewed

@@ -1,118 +0,0 @@
-<script is:inline>
-  // Lógica mejorada para reproducción de video
-  let started = false;
-  let playing = false;
-  window.addEventListener("click", async function () {
-    try {
-      let video = document.querySelector("#ar-video");
-      let avideo = document.querySelector("a-video");
-      if (!video || !avideo) {
-        console.error("Elementos de video no encontrados");
-        return;
-      }
-      if (!started) {
-        await video.play();
-        avideo.setAttribute("opacity", 1);
-        started = true;
-        playing = true;
-      } else {
-        if (playing) {
-          video.pause();
-          playing = false;
-        } else {
-          await video.play();
-          playing = true;
-        }
-      }
-    } catch (error) {
-      console.error("Error en la reproducción del video:", error);
-    }
-  });
-</script>
-<script is:inline>
-  document.addEventListener("DOMContentLoaded", function () {
-    const scene = document.querySelector("a-scene");
-    const errorOverlay = document.getElementById("error-overlay");
-    const scanningOverlay = document.getElementById("scanning-overlay");
-    const videoEl = document.querySelector("#ar-video");
-    const mainVideo = document.querySelector("#main-video");
-    const targetImage = document.querySelector("#target-image");
-    if (!scene || !errorOverlay || !scanningOverlay || !videoEl || !mainVideo || !targetImage) {
-      console.error("Elementos críticos no encontrados");
-      if (errorOverlay) errorOverlay.classList.remove("hidden");
-      return;
-    }
-    // Verificación de recursos
-    targetImage.addEventListener("error", () => {
-      console.error("Error al cargar la imagen objetivo");
-      errorOverlay.classList.remove("hidden");
-    });
-    videoEl.addEventListener("error", () => {
-      console.error("Error al cargar el video");
-      errorOverlay.classList.remove("hidden");
-    });
-    // Gestión mejorada de errores AR
-    scene.addEventListener("arError", (event) => {
-      console.error("Error AR:", event);
-      errorOverlay.classList.remove("hidden");
-    });
-    // Verificar si MindAR está disponible
-    if (!window.MINDAR || !window.MINDAR.IMAGE) {
-      console.error("MindAR no está disponible");
-      errorOverlay.classList.remove("hidden");
-      return;
-    }
-    // Manejo de eventos de target
-    const targetEntity = document.querySelector("a-entity[mindar-image-target]");
-    targetEntity.addEventListener("targetFound", () => {
-      console.log("¡Objetivo encontrado!");
-      scanningOverlay.classList.add("hidden");
-      // Hacer visible el video
-      mainVideo.setAttribute("opacity", "1");
-      // Intentar reproducir
-      videoEl.play().catch((err) => {
-        console.error("Error reproduciendo video:", err);
-      });
-    });
-    targetEntity.addEventListener("targetLost", () => {
-      console.log("Objetivo perdido");
-      scanningOverlay.classList.remove("hidden");
-      mainVideo.setAttribute("opacity", "0");
-    });
-    // Función para aplicar estilos adaptativos
-    function applyVideoStyles() {
-      // Estilos del elemento video HTML
-      if (videoEl) {
-        videoEl.style.width = "100%";
-        videoEl.style.height = "100%";
-        videoEl.style.objectFit = "contain";
-      }
-    }
-    // Aplicar estilos al inicio y cuando cambie la orientación
-    applyVideoStyles();
-    window.addEventListener("resize", applyVideoStyles);
-    // Manejar toques para dispositivos móviles
-    document.addEventListener("touchstart", () => {
-      if (videoEl.paused && mainVideo.getAttribute("opacity") === "1") {
-        videoEl.play().catch((e) => console.log("Error en touchstart:", e));
-      }
-    });
-  });
-</script>

package/src/astro/styles/ARStyles.astro DELETED Viewed

@@ -1,147 +0,0 @@
-<style is:global>
-  /* Estilos globales básicos de A-Frame */
-  .a-enter-vr,
-  .a-enter-vr-button {
-    display: none !important;
-  }
-  body,
-  a-scene {
-    background-color: transparent !important;
-    font-family: "Montserrat", sans-serif;
-  }
-  .a-canvas {
-    background-color: transparent !important;
-    width: 100% !important;
-    height: 100% !important;
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-  }
-  /* Clase base compartida para overlays */
-  .custom-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    z-index: 999;
-    color: white;
-    text-align: center;
-    transition: opacity 0.5s ease;
-  }
-  .custom-overlay.hidden {
-    display: none;
-  }
-  /* Texto compartido */
-  .status-text {
-    font-size: 18px;
-    font-weight: 600;
-    margin-top: 20px;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-  }
-  .instruction-text {
-    font-size: 14px;
-    max-width: 80%;
-    margin-top: 10px;
-    opacity: 0.8;
-  }
-  /* Estilos para las pantallas de UI personalizadas */
-  .custom-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    z-index: 999;
-    background-color: rgba(0, 0, 0, 0);
-    color: white;
-    text-align: center;
-    transition: opacity 0.5s ease;
-  }
-  .custom-overlay.hidden {
-    display: none;
-  }
-  /* Pantalla de carga */
-  #loading-overlay {
-    background: linear-gradient(135deg, #2c3e50, #1a1a2e);
-  }
-  .loader {
-    width: 60px;
-    height: 60px;
-    border: 5px solid rgba(255, 255, 255, 0.2);
-    border-top: 5px solid #3498db;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin-bottom: 20px;
-  }
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-  /* Pantalla de error */
-  #error-overlay {
-    background: linear-gradient(135deg, #c0392b, #8e44ad);
-  }
-  .error-icon {
-    font-size: 50px;
-    margin-bottom: 20px;
-  }
-  /* Pantalla de escaneo */
-  #scanning-overlay {
-    background-color: rgba(0, 0, 0, 0);
-  }
-  /* Botón para reintentar */
-  .retry-button {
-    margin-top: 20px;
-    padding: 10px 20px;
-    background-color: #3498db;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-  }
-  .retry-button:hover {
-    background-color: #2980b9;
-  }
-  video {
-    width: 100% !important;
-    height: 100% !important;
-    object-fit: cover !important;
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-  }
-</style>