Cannot get the 'AR is not supported on this device' message to appear. (from the example on https://modelviewer.dev/examples/augmentedreality/#sceneViewer)

[lilzubr]

Hi, I am new to this so apologies for the very basic question. But I am trying to make a message pop up for when a device isn't compatible with AR so therefore the button doesn't show. I am following the example from here, but am getting an error in the web console:

(index):35 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at (index):35:7

This is the code snippet where thats causing the error:

document.querySelector("#model-viewer").addEventListener('ar-status', (event) => {
      if(event.detail.status === 'failed'){
        const error = document.querySelector("#error");
        error.classList.remove('hide');
        error.addEventListener('transitionend',(event) => {
          error.classList.add('hide');
        });
      }
    });

From looking at model-viewer.js, I believe these events no longer exist, but due to my limited knowledge of javascript, I'm not sure how to proceed and fix it. Any help would be massively appreciated and can provide anymore useful details if needed. Thanks!

[danilokrulj]

I think this error appears when you start an AR session on a device where AR is not supported. Did you maybe change model-viewer components id? Since its searching for id "model-viewer".

[lilzubr]

Ahh, yes I see. That makes sense!

Yes thats something I would like to try and do, do you know the best way of checking for that? I'm trying to check for it being hidden but doesn't seem to be hitting that either.

[danilokrulj]

I tested like this and i get a log in the console so it should work. (remember to put in the correct id)

const arBtn = document.getElementById("ar-button");
if (arBtn.style.visibility = "hidden") {
  do something
}

Also I'm not a pro so maybe there is a better way to do this, this was just my first taught :) maybe someone with more knowledge will show up and give a better suggestion

[lilzubr]

Amazing, thanks so much!

[lilzubr]

Just to update this, I figured out a solid way of getting a AR not supported message to appear every time the AR button does not.

    const arBtn = document.getElementById("arbutton");
    if (arBtn.matches(":not(.enabled)")) {
      const error = document.querySelector("#error");
      error.classList.remove("hide");
    }
    arBtn.addEventListener("click", function () {
      error.classList.add("hide");
    });

EDIT: need to add an event listener on if the button is clicked, as otherwise when the ar button turns itself off to view in AR, the error will come on.