Skip to content

Instantly share code, notes, and snippets.

@IgorDePaula

IgorDePaula/index.html

Forked from aschmelyun/index.html
Created February 9, 2024 01:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save IgorDePaula/6c4b56866c9945b853f0afb1cb242108 to your computer and use it in GitHub Desktop.
Save IgorDePaula/6c4b56866c9945b853f0afb1cb242108 to your computer and use it in GitHub Desktop.
Download ZIP
In AR.js display a video which transitions into an image on completion
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>AR Demo</title>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
<script>
// We're going to register a custom event listener through a-frame that will fire
// whenever a marker has entered the camera view and is found through ar.js
AFRAME.registerComponent('registerevents', {
init: function() {
var marker = this.el;
// Element emits events when found and lost
marker.setAttribute('emitevents', 'true');
marker.addEventListener('markerFound', function() {
// Alright, a marker has been found. Let's get the video element
var vid = document.getElementById('waterVideo');
// Make sure that the video a-frame object is visible
document.querySelector('#water').setAttribute('visible', true);
// Reset the video to the beginning and play it through
vid.currentTime = 0;
vid.play();
// Once the video has completed, we're going to hide the a-video element
// which will display the a-image element with the watch behind it
vid.addEventListener('ended', function(e) {
document.querySelector('#water').setAttribute('visible', false);
});
});
}
});
</script>
</head>
<body style="margin:0; overflow:hidden;">
<a-scene embedded arjs="" artoolkit="">
<a-assets timeout="10000">
<img id="watchImage" src="/img/watch.jpg">
<video id="waterVideo" loop="false" autoplay="false" src="/img/videos/water.mp4" preload="auto"></video>
</a-assets>
<a-marker preset="hiro" registerevents>
<a-image id="watch" src="#watchImage" height="2" width="1" position="0 1 0"></a-image>
<a-video id="water" src="#waterVideo" height="2" width="1" position="0 1 0" autoplay="false"></a-video>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment