A devicechange
event is fired on an XRSystem
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 the MediaDevices
devicechange
event.
Bubbles | No |
---|---|
Cancelable | No |
Interface | Event |
Event handler | XRSystem.ondevicechange |
Usage notes
devicechange
events are not delivered if the document which owns the XRSystem
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
devicechange event | Chrome Full support 79 | Edge Full support 79 | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android Full support 79 | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android Full support 11.2 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.