How to detect Desktop vs. Mobile vs. GearVR vs. Oculus Rift vs. Vive in A-Frame?

Question

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

Answer 1

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