XR: devicechange event

A devicechange event is fired on an XR object whenever the whenever the availability of immersive XR devices has changed; for example, a VR headset or AR goggles have been connected or disconnected. It's a generic Event with no added properties.

Note: Not to be confused with MediaDevices.devicechange_event.

Bubbles No
Cancelable No
Interface Event
Event handler XR.ondevicechange

Usage notes

devicechange events are not delivered if the document which owns the XR object has been granted permission to do so through the xr-spatial-tracking feature policy.

You can use this event to, for example, monitor for the availability of a WebXR-compatible device so that you can enable a UI element which the user can use to activate immersive mode. This is shown in the example below.

Example

The example shown here handles the devicechange event by toggling the availability of the "Enter XR" button based on whether or not any immersive devices are currently available.

if (navigator.xr) {
  navigator.xr.addEventListener("devicechange", event => {
    navigator.xr.isSessionSupported("immersive-vr")
    .then(immersiveOK) => {
      if (immersiveOK) {
        enableXRButton.disabled = false;
      } else {
        enableXRButton.disabled = true;
      }
    });
  });
}

When devicechange is received, the handler set up in this code calls the XR method isSessionSupported() to find out if there's a device available that can handle immersive VR presentations. If there is, the button to enter XR mode is enabled; otherwise it's disabled.

You can also use the ondevicechange event handler property to set a single handler for devicechange events:

if (navigator.xr) {
  navigator.xr.ondevicechange = event => {
    /* ... etc ... */
  };
}

Specifications

Specification Status Comment
WebXR Device API
The definition of 'devicechange event' in that specification.
Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
devicechange event
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.

See also