AR

Running

App Files Files Community

MatteoScript commited on Dec 18, 2025

Commit

cdca82e

verified ·

1 Parent(s): 0c9bcec

Update index.html

Browse files

Files changed (1) hide show

index.html +45 -25

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <title>AR Video 9:16 + Mirino Verticale</title>
     <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image.prod.js"></script>
@@ -11,39 +11,36 @@
     <style>
         body { margin: 0; overflow: hidden; background-color: black; }
         #vid { position: absolute; top: 0; left: 0; opacity: 0; z-index: -1; pointer-events: none; }
-        /* --- STILE DEL MIRINO (Aggiornato per 9:16) --- */
         #viewfinder-container {
             position: fixed;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            /* Larghezza relativa */
-            width: 50vw;
-            /* Altezza calcolata per mantenere il rapporto ~9:16 rispetto alla larghezza */
-            height: 89vw;
-            /* Limiti massimi in pixel per schermi grandi (desktop/tablet) */
-            /* Se la larghezza max è 270px, l'altezza sarà circa 480px (270 * 1.77) */
-            max-width: 270px;
-            max-height: 480px;
             z-index: 10;
-            pointer-events: none; /* Lascia passare i click */
         }
-        /* Stile comune per i 4 angoli */
         .corner {
             position: absolute;
-            width: 40px;
-            height: 40px;
-            border-color: rgba(255, 255, 255, 0.8);
             border-style: solid;
             border-width: 0;
-            box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Aggiunta ombra per visibilità su sfondi chiari */
         }
         /* Posizionamento angoli */
@@ -71,14 +68,14 @@
         device-orientation-permission-ui="enabled: false">
         <a-assets>
-            <video id="vid" src="./video.mp4" loop muted playsinline webkit-playsinline crossorigin="anonymous"></video>
         </a-assets>
         <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
         <a-entity id="example-target" mindar-image-target="targetIndex: 0">
             <a-entity id="ar-video-plane"
-                geometry="primitive: plane; width: 1; height: 1.78"
                 material="src: #vid; shader: flat; transparent: true; opacity: 1"
                 position="0 0 0">
             </a-entity>
@@ -88,27 +85,50 @@
     <script>
         const video = document.querySelector("#vid");
         const target = document.querySelector("#example-target");
-        // Opzionale: riferimento al mirino se volessi nasconderlo quando trova il target
         const viewfinder = document.querySelector("#viewfinder-container");
         target.addEventListener("targetFound", () => {
-            console.log("Target trovato: Play video");
             video.play();
-            // Effetto visivo: il mirino diventa più trasparente quando trova il target
             viewfinder.style.opacity = 0.2;
         });
         target.addEventListener("targetLost", () => {
-            console.log("Target perso: Pause video");
             video.pause();
-            // Il mirino torna ben visibile
             viewfinder.style.opacity = 1;
         });
         document.body.addEventListener('click', () => {
             if(video.muted) {
                 video.muted = false;
-                console.log("Audio attivato");
             }
         });
     </script>

 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>AR Video - Auto Aspect Ratio</title>
     <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image.prod.js"></script>
     <style>
         body { margin: 0; overflow: hidden; background-color: black; }
+        /* Il video è nascosto, serve solo come texture */
         #vid { position: absolute; top: 0; left: 0; opacity: 0; z-index: -1; pointer-events: none; }
+        /* --- STILE DEL MIRINO DINAMICO --- */
         #viewfinder-container {
             position: fixed;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            /* Larghezza di base */
+            width: 60vw;
+            max-width: 300px;
+            /* L'altezza verrà calcolata automaticamente via JS in base al video */
+            aspect-ratio: 9/16; /* Fallback iniziale */
             z-index: 10;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
         }
         .corner {
             position: absolute;
+            width: 30px;
+            height: 30px;
+            border-color: rgba(255, 255, 255, 0.9);
             border-style: solid;
             border-width: 0;
+            box-shadow: 0 0 8px rgba(0,0,0,0.3);
         }
         /* Posizionamento angoli */
         device-orientation-permission-ui="enabled: false">
         <a-assets>
+            <video id="vid" src="video (2) (1).mp4" loop muted playsinline webkit-playsinline crossorigin="anonymous"></video>
         </a-assets>
         <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
         <a-entity id="example-target" mindar-image-target="targetIndex: 0">
             <a-entity id="ar-video-plane"
+                geometry="primitive: plane; width: 1; height: 1"
                 material="src: #vid; shader: flat; transparent: true; opacity: 1"
                 position="0 0 0">
             </a-entity>
     <script>
         const video = document.querySelector("#vid");
         const target = document.querySelector("#example-target");
+        const plane = document.querySelector("#ar-video-plane");
         const viewfinder = document.querySelector("#viewfinder-container");
+        // --- FUNZIONE CRUCIALE: Adatta il formato al video ---
+        video.addEventListener('loadedmetadata', () => {
+            const vWidth = video.videoWidth;
+            const vHeight = video.videoHeight;
+            // Calcola il rapporto (es. se video è 1080x1350, ratio è 1.25)
+            const ratio = vHeight / vWidth;
+            console.log(`Video caricato: ${vWidth}x${vHeight}. Ratio: ${ratio}`);
+            // 1. Aggiorna il piano AR (Mantiene larghezza 1, adatta altezza)
+            plane.setAttribute("geometry", {
+                primitive: "plane",
+                width: 1,
+                height: ratio
+            });
+            // 2. Aggiorna il mirino CSS per riflettere la forma del video
+            viewfinder.style.aspectRatio = `${vWidth} / ${vHeight}`;
+        });
+        // --- Gestione Play/Pause ---
         target.addEventListener("targetFound", () => {
+            console.log("Target trovato");
             video.play();
             viewfinder.style.opacity = 0.2;
         });
         target.addEventListener("targetLost", () => {
+            console.log("Target perso");
             video.pause();
             viewfinder.style.opacity = 1;
         });
+        // --- Gestione Audio al tocco ---
         document.body.addEventListener('click', () => {
             if(video.muted) {
                 video.muted = false;
+                // A volte serve resettare il tempo per sincronizzare l'audio se era partito muto
+                // video.currentTime = 0;
+                console.log("Unmute");
             }
         });
     </script>