Model-viewer: AR button shows on devices that don't support AR

[hybridherbst]

Description

On some devices the AR button shows but the devices don't actually support AR:

• Huawei P10
• Huawei P9 lite
• Galaxy A3

This makes for pretty bad UX as for the user it feels broken and we can't react to it on the website.

Live Demo

https://modelviewer.dev/examples/augmented-reality.html

Browser Affected

• [x] Chrome
• [ ] Edge
• [ ] Firefox
• [ ] Helios
• [ ] IE
• [ ] Safari

OS

• [x] Android
• [ ] iOS
• [ ] Linux
• [ ] MacOS
• [ ] Windows

[elalish]

Since I don't have any of those devices to repro with, can you show the output of the JS console when it fails? This might be a WebXR thing...

[hybridherbst]

In this case there's no WebXR involved, but SceneViewer only.
These devices don't support AR / SceneViewer at all but still show the button.
I'll try to get a log (these are customer reports so might take a bit)

[elalish]

Oh yeah, it's a known issue that we can't tell accurately if SceneViewer is really available or not. Unfortunately there's not much I can do about this one.

[FrankHiguera]

Hello, it would be great to be able to capture the incompatibility of a device with the call to activate AR, not necessarily before showing the button but it could also be after pressing it. I am going to share what I have done so far but without much success. I have created a Custom Console that captures the Warnings and when it occurs and identifies this message (No AR Mode can be activated. This is probably due to missing configuration or device capabilities) which is a message that returns from model-viewer when there is no PC AR supported, I hide the AR button and show an unsupported message to the user. The above works well on PC but not on mobiles, because I think it returns a different message that I cannot capture well as it is variable and it is something like this (Prevented navigation to “intent: //arvr.google.com/scene-viewer/1.0 ? file ....... model-viewer-no-ar-fallback; end; ”due to an unknown protocol), as the middle part of the (....) of the message is variable, and I have not been able to parse it correctly to hide the AR-button and show the message of incompatibility with the same logic. I tried various other things like try and catch, or promises to analyze the state of the modelviewer its events .., but I have not succeeded because my knowledge in JS is very limited. I have a few more ideas but I think I'll end up creating an array of compatible models and comparing the user's device against it, with the exception of if it is a very high OS, assume that it is compatible, but it will give false positives anyway. If anyone has a suggestion it would be welcome.

[elalish]

@FrankHiguera Actually, we had some logic that was intended to detect problems like this, so I think this is somewhere between a regression and a feature request. Let me see if I can get it working again.

[milesgreen]

Captured as an ar-status event would be pretty sweet.

[FrankHiguera]

@elalish thanks!, if in the future I can help to test a feature, I have some devices with different configurations to validate it, just let me know.