ar-status when device not supported?

[veronicamontezuma]

I am trying to display a message when the device/browser does not support AR, and was using model-viewer heuristics as a guide – but then, since I'm essentially trying to do what you guys already do, wondered if we could get this as a value.
I understand it's not 100% accurate and will have some false positives and stuff like that, so maybe that's why it's not something official, but it seems pretty reliable.

[arthurrmp]

As far as I can tell, their heuristics are wrapped in the property canActivateAR.
You can get the value like this:
document.querySelector("model-viewer").canActivateAR

[veronicamontezuma]

thank you! it only reads as undefined here though, do you happen to know if there's something I have to wait for? something to load, perhaps.

[arthurrmp]

No problem! You can set a listener to the window to wait until the page has loaded to get the property.

  window.addEventListener('load', function () {
    const canActivateAR = document.querySelector("model-viewer").canActivateAR;
    console.log(canActivateAR);
  })

[veronicamontezuma]

aha, I just tried a timeout and loading was the problem – thanks again, this seems to do the trick

[david-rhodes]

Thanks @arthurrmp. Any idea why we need to wait until the window is loaded before this property is set properly? Opposed to something like the follow? (Does not work.)

  window.customElements.whenDefined('model-viewer').then(() => {
    var modelViewer = document.querySelector('model-viewer');
    console.log("model-viewer defined: " + modelViewer.canActivateAR);
  });