I’m working on my bachelor thesis which is related to AR and accessibility. In that response, I’m developing a mobile AR application that is supposed to run on iOS and Android browsers.
I’ve chosen AR.js location-based (https://ar-js-org.github.io/AR.js-Docs/location-based/) since it is supposed to work on both OS. The plan was to put pins into the camera image at special locations to improve navigation.
During my early stages of testing, I found out that the provided sample on the ar.js website worked perfectly fine on the stock Android browser of my colleague. On Safari I can’t get it to work.
Upon loading the page, the prompts for GPS, device orientation and camera are popping up and can be selected. But none of the placed elements are shown in the camera-view. HTTPS is used to load the page.
I’m using the following code (while using it within Angular but that shouldn’t affect anything). This mostly represents the example code from the ar.js website.
Note: this is using the suggested (old) version of A-Frame (1.3.0). When using the new one (1.6.0) I can’t get anything to work.
<html>
<head>
<title>AR.js A-Frame Location-based</title>
<!-- old A-Frame (from example of ar.js)-->
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<!-- new A-Frame (directly from aframe.io). It isn't even starting the camera -->
<!-- <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script> -->
<!-- these should be the most up-to-date versions (since it's the master branch) -->
<script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex-location-only.js'></script>
<script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js'></script>
</head>
<body>
<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' renderer='antialias: true; alpha: true'>
<a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>
<!-- Box which is to be displayed. Obviously the coordinates are not my real ones -->
<a-entity material='color: red' geometry='primitive: box' gps-new-entity-place="latitude: 10; longitude: 20"
scale="10 10 10"></a-entity>
<!-- Solution from another stackoverflow post. Didn't fix it for me (Coordinates aren't real) -->
<a-box material="color: blue" gps-entity-place="latitude: 10; longitude: 20" position="0 350 0" scale="3.5 3.5 3.5" rotation="0 180 0"> </a-box>
</a-scene>
</body>
</html>
I also get an error when loading the page (see screenshot). I can’t find really useful information regarding dpdb.webvr.rocks since it causes “Failed to load the resource: No connection to server”. Maybe this has something to do with the whole thing not working?
(https://i.sstatic.net/O7t38218.png)
I tried a few things but honestly I’m currently disappointed and tired atm. Some things I tried included:
- Switching versions
- Testing on different iOS devices
- Trying multiple browsers (Chrome and Firefox on iOS)
- Trying other features of AR.js (which do work! for example marker based)
- Did some research. Other people got it working in iOS 11 and up. But those videos don’t feature how they did it …
- Followed Issues with AR.js Location-Based Example from Documentation. Did not help in my situation.
Keep in mind that the app did work on my colleagues Android device. I’m currently thinking that the GPS position is not correctly provided to the framework by the phone. But I might be wrong …
Maybe someone has similar problems, is more familiar with the framework or maybe I’m overseeing an obvious mistake.
Looking forward to all replies.
Regards Sven.
Sven Luipold is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.