AFrame AR Barcode keeps changing the y rotation of the displayed scene from 45 deg to -45 deg

[AntonioMartinezC]

Describe the bug
I Want to project an image to the Barcode with the number 5 but ARjs seems to fail at figuring out the orientation of the marker and keeps projecting it at some about 45 deg angle. Which would be fine if it was consistently the same angle but sometimes it just switches back and forth between the negative and positive 45 deg angle.

I am using AFrame 1.4.0 and tested on a mac with chrome and SamsungS22 with brave as the browser.

To Reproduce
These are the imports in the headder

<!--A Frame camera zooms in by default which kinda breaks the whole thing on mobile devices. Stopping the page from being zoomable at all fixes the issue allthough it aint pretty https://github.com/jeromeetienne/AR.js/issues/369 --> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <!-- include A-Frame obviously --> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <!-- include ar.js for A-Frame --> <!--Custom Aframe build with higher camera quality--> <script src="libs/aframecustomlib/aframe-ar.js"></script>

The only thing i changed in A Frame is the camera quality to be ideally 1920x1080 but the bug keeps happening even with the official release being imported.

<a-scene embedded arjs='detectionMode: mono_and_matrix; matrixCodeType: 3x3;'> <a-assets> <img id="card" src="assets/images/img.jpeg" /> </a-assets> <!--More info on keywords for markers and cameras https://jeromeetienne.github.io/AR.js/aframe/ --> <a-marker id="marker0" type='barcode' value='5' smooth='true' smoothCount="10" registerevents> <a-plane id="imageTarget1" src="#card" position="0 0 -1" height="1" width="1" rotation="-90 0 0"></a-plane> </a-marker> <a-entity camera></a-entity> </a-scene>

this is the created scene

<script>
      let index = 1;

      //The size of the Marker that is handed out to customers
      let markerHeight = 10;
      let markerWidth = 12;

      let targetHeight = 30;

      let image = document.getElementById("card");
      let target = document.getElementById("imageTarget1");
      let marker0 = document.getElementById("marker0")
 
      let ratio, heightScaling, widthScaling;
      
      //this can change the image before it is loaded to the marker
        
     window.onload = function () {
        let queryString = window.location.search;
        let urlParams = new URLSearchParams(queryString)
        let imgSrc = urlParams.get('src');
        image.src=imgSrc

        ratio = image.width/image.height
        heightScaling = targetHeight/markerHeight;
        widthScaling = heightScaling * ratio;
      
        target.setAttribute('scale', widthScaling + ", " + heightScaling)
        target.setAttribute('position', {x:0 , y:0 , z: 0})
        target.flushToDOM();
      }
    </script>

and a small script supposed to readjust the scaling in order to fit the aspect ratio of any given mage
I simply want to project the image on the marker and have it be stable. And in my case I need it to work from about 3 meters away.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Ios
• Browser Chrome

Smartphone (please complete the following information):

• Device: SamsungS22
• OS: Android
• Browser Brave

[AntonioMartinezC]

To me it looks like the camera is repositioning itself while reading a qr code. is there any way i can lock my camera at 0 0 0? But it should be shouldn't it?

Whenever the projected image is doing its angle change it is also switching away from the light or to the light when it decides to switch back. It is also kind of fine from the sides but as soon as I try to approach it from the front it starts glitching out