javascriptiosaframevirtual-reality

What work arounds exist to make Aframe VR work on an iPhone or other ISO mobile device?

I am running:

I have an aframe webpage that loads in a simple, test environment.

I am able to view the webpage fine (including VR mode) on my MacBook, although there is some lag when trying to run it on Safari.

On my iPhone, I cannot view VR mode at all. The regular view works fine, and I am able to drag to move my camera and look around.

Image of regular view on iPhone

When I try to enter VR mode, I get prompted to place my phone into my Google Cardboard and VR does not work. It will get stuck on a white screen.

Image of a phone going from portrait to landscape mode with text: 'Insert phone into Cardboard Holder. Image of blank screen where VR should've loaded

I understand that there have been issues with IOS and webXR support in the past and people seem to be encountering similar issues to mine. The fixes suggested in those links also did not work for me.

I also get the following errors in the iPhone web inspector:

TypeError: scope.dispatchEvent is not a function. (In 'scope.dispatchEvent({
    type: 'sessionstart'
})', 'scope.dispatchEvent' is undefined)
        
        
TypeError: undefined is not an object (evaluating 'camera.near')

I'd really like to make the VR work on both Android and Apple devices. Are there any work arounds to make Aframe VR work on IOS mobile devices?

Solution

  • I ended up using an older version of A-Frame.

    The newest version of A-Frame doesn't run in VR mode on IOS; version 1.2.0 does. You can identify what OS the webpage is using and change the A-Frame version based on this. However, version 1.2.0 has different bugs and sometimes gives different behavior than 1.3.0. I had to make other changes on top of the A-Frame version to ensure the experience was consistent on both devices.