Detect AR availability

[giuliac1989]

Is there a way to detect if AR is available on a device? I tried with modelViewer.canActivateAR but it return always false.

Thank you!

[ghost]

The canActivateAR() should return this, but you do need to indicate which AR backends you allow with ar-modes="webxr scene-viewer quick-look"
As in the example: https://modelviewer.dev/examples/augmentedreality/#ar

Beyond that it would depend on the device your using, also if you can provide a glitch example of your setup that would be helpful, thanks!

[giuliac1989]

The method canActivateAR() get me an error (doesn't exist), but the property canActivateAR not.
Below a screenshot of my model. Clicking on "AR" I want to detect if the AR is available in the device, if so I run modelViewer.activateAR(), otherwise I do something else.

My configuration is
<model-viewer id="modelViewer" src="../ar-models/scene.glb" camera-controls ar ar-modes="webxr quick-look" shadow-intensity="0" shadow-softness="0" min-camera-orbit="auto auto auto" max-camera-orbit="auto auto auto" camera-target="0m 0m 0.01m" field-of-view="0" min-field-of-view="7deg" max-field-of-view="100deg" exposure="1"></model-viewer>

[elalish]

Yes, that's right, it's a getter method, so you call it like a property. Is that working for you?

[giuliac1989]

No, it's not working for me. It seems that it always return false, but I can't figure why. I tried on a device which support AR and it works with the examples in the model-viewer website.

[elalish]

Can you post a link so I can take a look?

[giuliac1989]

I realized that I made a mistake! I miss the "scene viewer" mode in the html, so it not works on Android device. If I put ar-modes="webxr scene-viewer quick-look" instead of ar-modes="webxr quick-look" it works. Thank you!

[veronicamontezuma]

hi @elalish, sorry to piggyback on someone else's question, but I do think there might be a problem here... canActivateAR is only returning true for scene-viewer for me as well!
on webxr/quick-look, everything comes back false. I've tried a few user agents/phones that I know for a fact have AR and it's not working. (I am not actually using scene-viewer, only tested to see if anything would return true)

[david-rhodes]

Aside from some obvious lifecycle unpredictability, I'm wondering if it makes sense for canActivateAR to also have fallback methods? For example, it currently looks like it reports the value based on the currently selected AR mode. If you ask in WebXR mode and it is either buggy or not supported, it returns false. But, shouldn't it then ask the next ar-mode if it supports AR or not? This way as a developer we have a handle to know if AR is supported by at least one mode. Ideally this happens or is available from some event (ARCapabilityReported, perhaps?). The event details can contain information about which modes are supported? Is this feasible?

The main issue right now is that I'd rather not implement my own AR capability checker that needs to be updated in line with your in the future as that will inevitably lead to bugs. But, in the current form canActivateAR is simply not working reliably because of various lifecycle oddities and fallback routines.

Thank you for any assistance or recommendations here!

[elalish]

PRs welcome! It'll be easier to figure out the best solution if we have code on a branch of model-viewer to test and comment on.

[rawwerks]

@david-rhodes @elalish - is there a better way to do this? the idea is that if the browser cannot activate AR, display a modal with a QR code and a warning. i'm not having much luck with this working consistently...

	window.addEventListener("load", () => {
		var modelViewer = document.querySelector('model-viewer');
		console.log("model-viewer can activate AR: " + modelViewer.canActivateAR);
		if( !Boolean( modelViewer.canActivateAR ) ) {
			modal.style.display = "block";
		} else {
			modal.style.display = "none";
		}
	});

[rawwerks]

related - do we need to wait for modelViewer.loaded = true before modelViewer.canActivateAR will return the correct value?

if so, could someone show me the best way to wait for modelViewer to load? unfortunately loaded is a boolean, not an event. right now i'm doing a timeout for 5 seconds after page-load, which seems like a silly workaround.

[elalish]

You are already awaiting the load event, so that's happening and AR is not dependent on the model, just the HTML attributes. As for consistency, canActivateAR is sadly imperfect since there isn't a way to completely test the AR modes due to privacy. Can you share some examples that are incorrect?

[ConfidantCommunications]

The "load" event needs a listener on the model viewer, not the window.

<script type="text/javascript">
      var modelViewer = document.querySelector('#model-viewer');
      modelViewer.addEventListener("load", () => {
        console.log("model-viewer can activate AR: " + modelViewer.canActivateAR);
        if(modelViewer.canActivateAR) document.getElementById("qr").classList.add("hidden");
      });

    </script>

[Mrbside]

this works

The "load" event needs a listener on the model viewer, not the window.

<script type="text/javascript">
      var modelViewer = document.querySelector('#model-viewer');
      modelViewer.addEventListener("load", () => {
        console.log("model-viewer can activate AR: " + modelViewer.canActivateAR);
        if(modelViewer.canActivateAR) document.getElementById("qr").classList.add("hidden");
      });

    </script>