XRSystem

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

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

特性

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

方法

In addition to inheriting methods from its parent interface, EventTarget XRSystem 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.

Usage notes

Thsi interface was previously known as simply XR in earlier versions of the specification; if you see references to XR in code or documentation, simply replace that with XRSystem .

范例

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.

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.

规范

规范 状态 Comment
WebXR 设备 API
The definition of 'XR' in that specification.
工作草案 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
XRSystem
Chrome 79
Alternate Name
79
Alternate Name
Alternate Name Uses the non-standard name: XR
Edge 79
Alternate Name
79
Alternate Name
Alternate Name Uses the non-standard name: XR
Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 79
Alternate Name
79
Alternate Name
Alternate Name Uses the non-standard name: XR
Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 11.2
Alternate Name
11.2
Alternate Name
Alternate Name Uses the non-standard name: XR
devicechange event
Chrome 79 Edge 79 Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 79 Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 11.2
isSessionSupported()
Chrome 79 Edge 79 Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 79 Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 11.2
ondevicechange
Chrome 79 Edge 79 Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 79 Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 11.2
requestSession()
Chrome 79 Edge 79 Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 79 Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 11.2

图例

完整支持
完整支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
使用非标名称。
使用非标名称。