WebAR output not working in iPhone

Help & Support
1

Hi Team,

I am developing an WebAR output using AR.js in Playcanvas platform. The output doesn’t seem to work with the iPhone? Is this how the WebAR developed in Playcanvas would behave? Is there any workaround/ solution to make the output work on the iPhones?

Any solution would be highly appreciated.

Thanks.

2

Surprised that AR.js doesn’t work. What issues are you facing with it? (Note: It is outdated now though and limited in functionality)

PlayCanvas supports WebXR that has AR support but the API is not yet available on iOS.

Developers have been using 8th Wall or Zappar for cross platform WebAR experiences.

See: AR | Learn PlayCanvas

3

Hi Yaustar,

Thanks a lot for your quick reply. Both 8th Wall and Zappar are costly solutions. Unfortunately, they provide self hosting and access to platform APIs only in their enterprise solutions and only big companies can afford it.

Any other option that we can go with to get iPhone support?

Thanks.

4

Until iOS gets WebXR API support (they are working on it now), your only option is to integrate an AR library that is supported for you in terms of cost/licensing.

The 8th Wall and Zappar integrations with PlayCanvas are developed by the respective companies and our engine supports WebXR API natively.

Unfortunately, anything else is dependent on the library vendor or the developer to integrated themselves.

5

Just to check, when you say AR.js, do you mean AR.js · GitHub or something else?

7

Yes, this is the one we are using.

8

Ah, I thought you were referring to something else before.

AFAIK, AR.js only has integrations with three.js and aframe. So if you are using it, you would have to write the PlayCanvas integration yourself.

We have done this before a long time ago with an old version of AR toolkit (2016?) https://playcanvas.com/project/481413/overview/ar-starter-kit which may help with your integration?

Key points is to have a clear color (alpha = 0) on the camera and a transparent canvas (see rendering under project options) so that you can have the video feed under the WebGL canvas and and be able to see it.