Spaces:
Running
Running
File size: 2,634 Bytes
3729df2 2cbe8b1 3729df2 2cbe8b1 3729df2 2cbe8b1 3729df2 2cbe8b1 fc000bd 2cbe8b1 9510626 2cbe8b1 fc000bd 2cbe8b1 3729df2 2cbe8b1 3729df2 2cbe8b1 3729df2 2cbe8b1 3729df2 2cbe8b1 3729df2 2cbe8b1 3729df2 2cbe8b1 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 | <!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</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; }
/* Nasconde il video sorgente dalla vista standard */
#vid { position: absolute; top: 0; left: 0; opacity: 0; z-index: -1; pointer-events: none; }
</style>
</head>
<body>
<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.25; height: 1"
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");
// Quando il target viene trovato -> Play Video
target.addEventListener("targetFound", () => {
console.log("Target trovato: Play video");
video.play();
});
// Quando il target viene perso -> Pause Video
target.addEventListener("targetLost", () => {
console.log("Target perso: Pause video");
video.pause();
});
// FIX AUDIO: I browser moderni bloccano l'audio senza interazione utente.
// Cliccando ovunque sullo schermo, sblocchiamo l'audio del video.
document.body.addEventListener('click', () => {
if(video.muted) {
video.muted = false;
console.log("Audio attivato tramite tocco utente");
}
});
</script>
</body>
</html> |