AR.js
AR.js copied to clipboard
A-Frame <a-scene> stuck at 640x480 after user denies camera permission. How to resize to fullscreen? (NFT)
Do you want to request a feature or report a bug? I wish to request a feature to fix a bug (or find out if the "feature" is already available)
What is the current behavior? Whenever the user denies camera permission on the NFT image tracking A-Frame branch, the A-Frame portion of the page is stuck at 640x480, leaving a large gap at the bottom of the page. I'm trying to find a way to change it to the window width/height.
If the current behavior is a bug, please provide the steps to reproduce. I made a modified version of the AR.js T-Rex demo ( https://github.com/AR-js-org/AR.js/tree/master/aframe/examples/image-tracking/nft ) that dynamically adds an a-sky 360 degree panorama image to a-scene after the user denies camera access and triggers a window "camera-error" event.
It may be tested here: https://object404.com/artrex2
Code is here: https://github.com/object404/artrex2
All I significantly did was add the following script:
<script>
function onCameraError(e) {
document.getElementsByClassName('arjs-loader')[0].style.display = 'none';
let sky = document.createElement('a-sky');
sky.setAttribute('src', 'biscayne360.jpg');
document.getElementById('mainScene').appendChild(sky);
}
window.addEventListener('camera-error', onCameraError);
</script>
Please mention other relevant information such as the browser version, Operating System and Device Name Any browser, any OS.
What is the expected behavior? I suppose what is happening is expected behavior since 640x480 is the default camera size in the AR.js library code and if a webcam is not found, the experience will resize to 640x480. I'm trying to look for a way to resize the experience to fullscreen actual width/height after the user denies camera access.
If this is a feature request, what is motivation or use case for changing the behavior? This is so we can provide fallback experiences if the user denies camera access on the NFT image tracking experience.
This ALMOST works:
When I measure the window width/height before loading the AR.js library and change the following values at line 1494 of aframe-ar-nft.js:
// resolution of at which we initialize in the source image
sourceWidth: 640,
sourceHeight: 480,
// resolution displayed for the source
displayWidth: 640,
displayHeight: 480,
to use the measured window width/height instead of 640x480, the A-Frame portion of the DOM resizes to fullscreen, which is what I want, but it breaks image recognition on iPhone X and iPhone 11. Image recognition still works on iPhone 7 and Android, but not on iPhone X+11.