How to remove the alerts 'trackingBackend' and 'markersAreaEnabled' with AR.js?

Question

On my AR.JS example https://github.com/ybinstock/aframe_ar (github) https://ybinstock.github.io/aframe_ar (live site), I'm getting these two boxes seen in the attached image.

Here's my aframe scene

<a-scene embedded arjs>

  <a-assets>
    <a-asset-item id="drone" src="busterDrone/busterDrone.gltf"></a-asset-item>
    <a-asset-item id="helmet" src="damagedHelmet/damagedHelmet.gltf"></a-asset-item>
    <a-asset-item id="skull" src="skull_downloadable/scene.gltf"></a-asset-item>
  </a-assets>


    <a-marker-camera preset='hiro'>

      <a-entity gltf-model-next="#drone"></a-entity>



    </a-marker-camera>


</a-scene>

Answer 1

You can turn off the debugging junk with configuration options. It isn't documented (which is very frustrating), but I found it when looking at examples of other AR.js projects. You need to add 'debugUIEnabled: false' into the arjs attribute on the <a-scene> element. Here's an example:

<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
  ... your a-frame markup ...
</a-scene>

FYI, you don't need the embedded attribute, nor do you need the sourceType: webcam. A basic a-frame scene that only disables debugging would look like this:

<a-scene arjs="debugUIEnabled: false;">
  ... your a-frame markup ...
</a-scene>

The AR.js Readme that lists the properties you can use in the arjs attribute is here: https://github.com/jeromeetienne/AR.js/tree/master/aframe

This documentation fails to mention exactly how you use these configuration options. Huge oversight. But the answer is you put them in the arjs attribute on the <a-scene> tag.

I know you can just hide the debugging stuff with CSS but this is truly the correct way of hiding it. I hope that helps!

Answer 2

the easiest way to hide them by css. or to use debugUIEnabled: false in ar.js scene system

i hope this helps