Why doesn't the AR button appear in Chrome on iPhone?

[MilosNikolic]

Description

I started playing with and I noticed that AR button is not showing in Chrome on iPhone.
Phone i was using is iPhone 6s, with iOS 12.4
Here is the glitch project i used for testing:
https://glitch.com/edit/#!/midnight-friday

Interestingly, it works fine in Safari on iPhone, but not in Chrome.

Live Demo

https://glitch.com/edit/#!/midnight-friday

Browser Affected

• Chrome
• Edge
• Firefox
• Helios
• IE
• Safari

OS

• Android
• iOS 12.4
• Linux
• MacOS
• Windows

Versions

• model-viewer: v0.6.0

[makc]

related: #758 ?

[cwervo]

Hey @MilosNikolic I forked your Glitch demo into a CodePen example and added this line:

quick-look-browsers="safari chrome"

This tells the model-viewer component to make this available on both Chrome & Safari on iOS & works on my iOS device:

Does that solve the issue for you?

[MilosNikolic]

@cwervo - Hi Andrés, that did work indeed, icon showed up, but the model is still not loading in AR, this is using both your remixed code and when I add it, which means its essentially not a solution.

Thanks for checking it tho!

[cwervo]

@MilosNikolic Do you get an error, a gray object panel showing something like "object cannot be loaded", or just no feedback at all?

[cdata]

Hi all, due to an inconsistency in how iOS Chrome handles .usdz files, you have to opt-in to AR in iOS Chrome. Please refer to the quick-look-browsers attribute in our documentation.

Be advised that until recently, iOS Chrome does not activate Quick Look unless you set the correct Content-Type header when serving the .usdz file. If the header is not set correctly, iOS Chrome just downloads the file and it is a pretty lame experience.

An example of opting in looks like this:

<model-viewer src="..." ios-src="any.usdz" quick-look-browsers="safari chrome">
</model-viewer>

Please also refer to this related issue: #534

[cdata]

Also worth mentioning that recent versions of Chrome should behave the same as Safari even if the header is omitted, but for now we are making it opt-in until the inconsistency is really far in the rear-view mirror.

[cdata]

If there are no further issues, I'm going to re-categorize this issue as a question.

[pixelrgb028]

I have 4 products to choose from, and am able to update the path of my .glb product models with an onClick event that updates the 'src' attribute. But when I try to update the 'ios-src' attribute to view the usdz version of the model in QuickLook on an iPhone 6S, I end up with "Object could not be opened".

However, if I link the path of the 'ios-src' to a single usdz directly, the browser tiggers QuickLook and it works.

After checking the inspector I find the following warning------------------
DevTools failed to load SourceMap: Could not load content for https://unpkg.com/@google/[email protected]/dist/model-viewer.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

*Console.log('ios-src') renders undefined; is this attribute available to modifications at runtime? I really appreciate any advise you have on this issue..

[elalish]

@pixelrgb028 It's possible this is the same error as #1286, but for quicklook instead. I think I fixed them both; can you verify if this repros for you on master?

[elalish]

@pixelrgb028 And just checking since someone else had this trouble; the attribute name is ios-src, but in JS, the member is called iosSrc, as this is the traditional naming convention on the web.