How to hide "VR" button unless VR headset is present on A-Frame scene

By default an A-Frame scene shows a "VR" icon to enter immersive VR mode in all cases, even if a headset is not present. Is there a simple way to only show this icon when a user is using a headset with WebXR available?

Solution

Yes, there is a built in A-Frame function checkHeadsetConnected() for this purpose. You can use this in a component attached to the a-scene entity to disable vr-mode-ui when a headset is not present. Here is example code for this:

  // only show VR button if headset connected
  AFRAME.registerComponent('vr-mode-ui-if-headset', {
    dependencies: ['vr-mode-ui'],
    init: function () {
      if (!AFRAME.utils.device.checkHeadsetConnected()) {
        this.el.setAttribute('vr-mode-ui', 'enabled', false);
      }
    }
  })

Here is a glitch A-Frame scene showing this component in use:

Code: https://glitch.com/edit/#!/lapis-wide-cartoon?path=index.html

Live project: https://lapis-wide-cartoon.glitch.me/