In A-Frame, I want to detect if the user has a VR headset connected and to tell which device they are using. How can I do this?
- Desktop (no VR display)
- Mobile (e.g., webvr-polyfilled Google Cardboard, iPhone, Android)
- Samsung GearVR
- Oculus Rift
- HTC Vive
There are several utility functions in A-Frame we can use to detect compatibility: https://aframe.io/docs/master/core/utils.html
The mobile-related utils look at navigator.userAgent
. The VR-related utils check to see if the pose data returned from the headset/polyfill is not 0,0,0.
Given the current API:
- Desktop:
!AFRAME.utils.checkHeadsetConnected()
- Mobile:
AFRAME.utils.isMobile()
- GearVR:
AFRAME.utils.isGearVR()
- Oculus Rift:
!AFRAME.utils.isMobile() && AFRAME.utils.checkHeadsetConnected()
- HTC Vive:
!AFRAME.utils.isMobile() && AFRAME.utils.checkHeadsetConnected()
To differentiate Rift vs. Vive, try using WebVR API Stage Parameters https://w3c.github.io/webvr/#interface-vrstageparameters