Spaces:
Running
Running
| <html lang="it"> | |
| <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 Simple + Mirino</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> | |
| <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image-aframe.prod.js"></script> | |
| <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 --- */ | |
| /* Il contenitore principale del mirino, centrato */ | |
| #viewfinder-container { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 70vw; /* Larghezza relativa allo schermo */ | |
| height: 70vw; /* Altezza uguale per farlo quadrato */ | |
| max-width: 300px; /* Dimensione massima su schermi grandi */ | |
| max-height: 300px; | |
| z-index: 10; /* Sta sopra il video della camera */ | |
| pointer-events: none; /* IMPORTANTE: lascia passare i click sotto (per l'audio) */ | |
| } | |
| /* Stile comune per i 4 angoli */ | |
| .corner { | |
| position: absolute; | |
| width: 40px; /* Lunghezza delle linee */ | |
| height: 40px; | |
| border-color: rgba(255, 255, 255, 0.7); /* Colore bianco semi-trasparente */ | |
| border-style: solid; | |
| border-width: 0; /* Di base nessun bordo, li aggiungiamo specificamente sotto */ | |
| } | |
| /* Posizionamento e bordi specifici per ogni angolo */ | |
| /* Top-Left */ | |
| .corner-tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; } | |
| /* Top-Right */ | |
| .corner-tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; } | |
| /* Bottom-Left */ | |
| .corner-bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; } | |
| /* Bottom-Right */ | |
| .corner-br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="viewfinder-container"> | |
| <div class="corner corner-tl"></div> | |
| <div class="corner corner-tr"></div> | |
| <div class="corner corner-bl"></div> | |
| <div class="corner corner-br"></div> | |
| </div> | |
| <a-scene | |
| mindar-image="imageTargetSrc: targets.mind; filterMinCF:0.0001; filterBeta: 0.01; uiLoading: no; uiScanning: no;" | |
| color-space="sRGB" | |
| renderer="colorManagement: true, physicallyCorrectLights" | |
| vr-mode-ui="enabled: false" | |
| 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.4" | |
| material="src: #vid; shader: flat; transparent: true; opacity: 1" | |
| position="0 0 0"> | |
| </a-entity> | |
| </a-entity> | |
| </a-scene> | |
| <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(); | |
| // Opzionale: nascondi il mirino quando trova il target | |
| // viewfinder.style.opacity = 0; | |
| }); | |
| target.addEventListener("targetLost", () => { | |
| console.log("Target perso: Pause video"); | |
| video.pause(); | |
| // Opzionale: mostra di nuovo il mirino | |
| // viewfinder.style.opacity = 1; | |
| }); | |
| document.body.addEventListener('click', () => { | |
| if(video.muted) { | |
| video.muted = false; | |
| console.log("Audio attivato"); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |