Created
March 17, 2020 14:10
-
-
Save RobTranquillo/8132191d48596dae68cef8e9cf48f812 to your computer and use it in GitHub Desktop.
AR.js on Android and iOS supporting a video with audio track
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| This one mainly based on https://github.com/taylordigital13/ARjs_Unity | |
| Fullscreen buttons are just simple png and the video is mpeg-4 baseline-profile with AAC audio. | |
| The video is placed on the Hiro marker and playback is stopped until the user clicks the play button. | |
| The same applies to losing and finding the marker again. | |
| Problem: On iOS, the video sticks 1.5 times below the actual mark on the screen. | |
| This, I have read, comes from the VR setup on iOS, which sets the camera a bit higher. | |
| !--> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> | |
| <!-- we import arjs version without NFT but with marker + location based support --> | |
| <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script> | |
| <script> | |
| var markerFound = 0; | |
| AFRAME.registerComponent('button', { | |
| init: function () | |
| { | |
| var elem = document.documentElement; | |
| var marker = document.querySelector("#marker"); | |
| var fullbutton = document.querySelector("#fullscreen"); | |
| var Video_0 = document.querySelector("#Video_Asset_0"); | |
| var button = document.querySelector("#mutebutton"); | |
| button.hidden = true; | |
| Video_0.pause(); | |
| marker.addEventListener("markerFound", function (evt) { | |
| markerFound = 1; | |
| button.hidden = false; | |
| //Video_0.play(); //if video should start immediently on marker detection | |
| }); | |
| marker.addEventListener("markerLost", function (evt) { | |
| markerFound = 0; | |
| Video_0.pause(); | |
| button.hidden = true; | |
| }); | |
| button.addEventListener("click", function(evt){ | |
| console.log("button clicked") | |
| if(Video_0.muted==true){ | |
| button.innerHTML="Pause"; | |
| Video_0.muted=false; | |
| Video_0.play(); | |
| }else{ | |
| button.innerHTML="Play"; | |
| Video_0.muted=true; | |
| Video_0.pause(); | |
| } | |
| }); | |
| fullbutton.addEventListener("click", | |
| function (evt){ | |
| if (fullscreen == 0) { | |
| if (elem.requestFullscreen) { | |
| elem.requestFullscreen(); | |
| } else if (elem.mozRequestFullScreen) { | |
| /* Firefox */ | |
| elem.mozRequestFullScreen(); | |
| } else if (elem.webkitRequestFullscreen) { | |
| /* Chrome, Safari and Opera */ | |
| elem.webkitRequestFullscreen(); | |
| } else if (elem.msRequestFullscreen) { | |
| /* IE/Edge */ | |
| elem.msRequestFullscreen(); | |
| } | |
| fullbutton.setAttribute("src", "vendor/exit_fullscreen.png"); | |
| fullscreen = 1; | |
| } else { | |
| if (document.exitFullscreen) { | |
| document.exitFullscreen(); | |
| } else if (document.webkitExitFullscreen) { | |
| document.webkitExitFullscreen(); | |
| } else if (document.mozCancelFullScreen) { | |
| document.mozCancelFullScreen(); | |
| } else if (document.msExitFullscreen) { | |
| document.msExitFullscreen(); | |
| } | |
| fullbutton.setAttribute("src", "vendor/fullscreen.png"); | |
| fullscreen = 0; | |
| } | |
| }); | |
| }, | |
| tick: function (totalTime, deltaTime) | |
| { | |
| var dTime = deltaTime / 1000; | |
| if (markerFound == 1) { | |
| } | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body style='margin : 0px; overflow: hidden; font-family: Monospace;'> | |
| <div style='position: absolute; bottom: 10px; right: 30px; width:100%; text-align: center; z-index: 1;'> | |
| <button id="mutebutton" style='position: absolute; bottom: 10px' hidden>Play</button> | |
| </div> | |
| <div style='position: absolute; bottom: 5px; left: 30px; width:100%; text-align: right; z-index: 1;'> | |
| <input type="image" id="fullscreen" src="vendor/fullscreen.png" style='position: absolute; bottom: 0px; right: 35px;'></input> | |
| </div> | |
| <a-scene embedded arjs="debugUIEnabled: false; sourceType: webcam" vr-mode-ui="enabled: false"> | |
| <a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: .intersectable; useWorldCoordinates: true;"></a-entity> | |
| <a-assets> | |
| <video id="Video_Asset_0" autoplay="false" loop crossorigin="anonymous" src="media/30SekPal.mp4" webkit-playsinline playsinline controls muted></video> | |
| </a-assets> | |
| <a-marker id="marker" preset="hiro" emitevents="true" button> | |
| <a-video src="#Video_Asset_0" id="Video_0" class="intersectable" width="1" height="1" position="0 0 0" rotation="0 0 0" color="#FFFFFF" transparent=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