Spaces:
Running
Running
File size: 4,516 Bytes
3729df2 ca6c5eb 3729df2 2cbe8b1 3729df2 ca6c5eb 2cbe8b1 ca6c5eb 3729df2 ca6c5eb 2cbe8b1 fc000bd 2cbe8b1 9510626 2cbe8b1 fc000bd 2cbe8b1 3729df2 2cbe8b1 3729df2 2cbe8b1 ca6c5eb 2cbe8b1 3729df2 2cbe8b1 ca6c5eb 3729df2 2cbe8b1 ca6c5eb 3729df2 2cbe8b1 ca6c5eb 3729df2 2cbe8b1 ca6c5eb 3729df2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
<!DOCTYPE html>
<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> |