VR IOS on BROWSER not working

EY GUYS i have a dumb but valid question. I’m developing a keepy up game based on the playcanvas tutorials, but, integrated with the VR set. So when I hit the ball is a real experience .
Is working great

BUUUTTTTTT it doesn’t work on iphone
In android and desktop is ok.
But we have quite a problem because we can find no way to get it to run on iphone Google chrome.

I have seen other forums on this . But no luck on different solutions.
If you can give a word of advise
I’ll be great. Thanks

Is this using WebXR or WebVR?

In either case, you will need to include a polyfill as iOS has no native support for either.

There’s examples in the tutorials section on the VR that have the polyfill included and examples of how to set it up. :slight_smile:


Thanks, I`m new to all this. dont know quite the diference between WebXR or WebVR.
I guess is WebXR, because i what it to work on the mobile browser.
About the polyfill no idea. Ill look for it. ¨
If you have a link, that would be great.

Here’s an example project: https://developer.playcanvas.com/en/tutorials/webxr-hello-world/

You can see the polyfill here which includes the patch file and a script to apply the polyfill:

1 Like

This doesn’t work for me, I tried adding that folder to my scene and I get an error: “WebXRPolyfill is not defined” what am I doing wrong? Sorry I am new to this.

Additionally, when I try the demo scene it never starts to track my phone’s orientation instead it takes me to a page to place my phone in a google cardboard and doesn’t actually track my phone. Is that intended?

Does the test project work for you? https://playcanvas.com/editor/project/433339

Please also check that the polyfill.min.js is before the patch:

You also have to rotate your phone to landscape to ‘enable’ VR

Side notes: VR in the browser on iOS is not well supported yet. Ensure that you only have one tab in Safari before going to landscape otherwise the experience is not full screen.

Thank you I was unaware of load order. Rotating it doesn’t seem to do anything… is there anyway to remove that screen entirely?

Edit: I found them : https://github.com/immersive-web/webxr-polyfill thank you again for the help.

I’m not aware that you can but if you do find a method, please post here.

Can you share a link to your project if you are still having issues please?

var polyfill = new WebXRPolyfill({cardboardConfig: {ROTATE_INSTRUCTIONS_DISABLED: true}});

This doesn’t quite do what I want though, I realized that WebVR and IOS just won’t work unless I want to rewrite google cardboard’s polyfill, which is not something I am about to do.

Also, my project is just a copy of this: https://developer.playcanvas.com/en/tutorials/webxr-360-video/ I figure my issue lies in some setting on my phone or something.

My goal is just to have 360 video and the camera move when your phone moves. Like youtube 360 video (which does work on my phone in browser).

1 Like

Sounds like you want ‘magic window’ or to use the device orientation to move the camera.

Another forum user has tried this in this thread Updating WebVR to WebXR: Magic Window (Single View VR)

But I think it’s missing the permission request for the sensor data.


Oh nice, I need to remember that tidbit

1 Like

Thanks yaustar for pointing that out, I’ve now added the permission request from my core app code, it now should work also independently.

Concerning “Device Rotation only” I would recommend not using webXR as it triggers a weird app installation on some newer Android Phones with Chrome, which is usually a bad user experience. There the request for device rotation only is usually a better option, for iOs 12 you have the problem that this is a safari configuration (instead of a permission prompt), but that issue will be also exist for webvr/webxr polyfill or the device rotation only - solution.


This is perfect thanks, I spent way too long trying to make sense of device orientation last night.

1 Like