XR

Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The WebXR Device API interface XR provides methods which let you get access to the a XRSession object represneting a WebXR session. With that XRSession in hand, you can use it to interact with the Augmented Reality (AR) or Virtual Reality (VR) device.

Properties

While XR directly offers no properties, it does inherit properties from its parent interface, EventTarget.

Methods

In addition to inherriting methods from its parent interface, EventTarget, the XR interface includes the following methods:

isSessionSupported() 
Returns a promise which resolves to true if the browser supports the given XRSessionMode. Resolves to false if the specified mode isn't supported.
requestSession() 
Returns a promise that resolves to a new XRSession with the specified XRSessionMode.

Events

devicechange
Sent when the set of available XR devices has changed.
Also available using the ondevicechange event handler.

Examples

The following example shows how to use both isSessionSupported() and requestSession().

if (navigator.xr) {
  immersiveButton.addEventListener("click", onButtonClicked);
  navigator.xr.isSessionSupported('immersive-vr')
  .then((isSupported) => {
    if (isSupported) {
      immersiveButton.disabled = false;
    } else {
      immersiveButton.disabled = true;
  });
}

function onButtonClicked() {
  if (!xrSession) {
    navigator.xr.requestSession('immersive-vr')
    .then(() => {
      // onSessionStarted() not shown for reasons of brevity and clarity.
      onSessionStarted(xrSession);
    });
  } else {
    // Shut down the already running XRSession
    xrSession.end()
    .then(() => xrSession = null);
  }
}

This code starts by checking to see if WebXR is available by looking for the navigator.xr property. If it's found, we know WebXR is present, so we proceed by establishing a handler for the button which the user can click to toggle immersive VR mode on and off.

However, we don't yet know if the desired immersive mode is available. To determine this, we call isSessionSupported(), passing it the desired session option before enabling the button, immersiveButton, which the user can then use to switch to immersive mode only if immersive VR mode is available. If immersive VR isn't available, the button is disabled to prevent its use.

The onButtonClicked() function checks to see if there's already a session running. If there isn't, we use requestSession() to start one and, once the returned promise resolves, we call a function onSessionStarted() to set up our session for rendering and so forth.

If, on the other hand, there is already an ongoing XR session, we instead call end() to end the current session. When the returned promise resolves, we set xrSession to null to record the fact that we no longer have an ongoing session. That way, if the user clicks the button again, a new session will start.

Specifications

Specification Status Comment
WebXR Device API
The definition of 'XR' 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
XR
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
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
ondevicechange
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
requestSession()
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
supportsSession()
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.