CODEWITHSUNDEEP
augmented-realityar.jslocation-basedweb-ar
Sven Luipold
Sven Luipold

Reputation: 11

AR.js Location Based issues (on iOS 17.6 with Safari) with A-Frame (Mobile AR)

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:

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.

Upvotes: 1

Views: 348

Answers (0)

Related Questions