WebXR

MagicLeap now offers full support for the WebXR Device API. It comes already installed on your Magic Leap device and should work with your standard WebXR applications out of the box. All features described in the WebXR specification are supported.

WebXR Viewer has been replaced with the System Web Browser

Starting on Magic Leap OS version 1.3.0-dev1, the WebXR viewer has been replaced with the more full featured system web browser. This document has been updated to reflect those changes.

What's Supported, What's Not

The following WebXR specifications and extensions are supported on MagicLeap:

• WebXR core/device API
• WebXR reference spaces (viewer, local, local-floor, bounded-floor, unbounded)
• HandTracking
• Input Controller
• Hit Test
• Segmented Dimmer through immersive-vr and immersive-ar during requestSession API in WebXR. If you use immersive-vr, it will darken the real world to create a VR experience. immersive-ar will show the real world along with the virtual content.

Currently, Magic Leap does not support WebXR Anchor and WebXR Layers modules.

You can launch WebXR Applications directly for the Web Browser application by manually entering the url or by using the QR Reader application

Reference Spaces

Only viewer and local reference spaces are default and can be used without any request. For all other reference spaces, the application needs to specify explicitly in the required features when requesting a session. For more details see the Web XR specifications.

Pinning Web Apps

MagicLeap does not support pinning web applications from the browser to the home menu. However, any APK (Android Package Kit) which can load a URL on startup can be used. Third-party developers using WebXR can launch their web content using custom tabs and trusted web activities. When the User launches the APK, it opens the URL in a browser.

NOTE: This is a browser/system feature, not a WebXR feature.

Start with QR Code

You can launch your application through a QR code. When someone scans the QR code with the QR Reader application, the MagicLeap browser will open with the URL provided in the QR code.

NOTE: This is a browser/system feature, not a WebXR feature.

Permissions

MagicLeap handles permissions for you. When a user navigates to your WebXR experience webpage, they'll be asked to grant permission to allow WebXR to start immersive mode. For WebXR content, you must always have the permission prompt. This is true for all WebXR experiences.

NOTE: This is a browser/system feature, not a WebXR feature.

Quit Web XR

Users can quit a WebXR immersive experience by pressing the menu button on the controller at any time. The immersive session will close, and the user will be able to see web contents in standard browser mode(non immersive).

Determain if your Website is being viewed on a Magic Leap 2

While WebXR provides APIs to identify the devices, you may want to identify the devices before starting your WebXR application to verify compatibility. One way to do this is to use the SEC-CH-UA-MODEL ID, which is a header that indicates the model of the device. For the Magic Leap 2, the value of this header is "Magic Leap 2". You can use this value to detect if the user is using a Magic Leap 2 device and provide them with a tailored web experience.

For example, you can use the following JavaScript code to check the value of the SEC-CH-UA-MODEL header:

// Fetch the SEC-CH-UA-MODEL header from the server
fetch("/", {headers: {"Sec-Fetch-Site": "same-origin"}})
.then(response => response.headers.get("sec-ch-ua-model"))
.then(model => {
  // Check if the model is "Magic Leap 2"
  if (model === "Magic Leap 2") {
    // Do something specific for the Magic Leap 2 device
    console.log("You are using a Magic Leap 2 device!");
  } else {
    // Do something else for other devices
    console.log("You are using a different device!");
  }
})
.catch(error => {
  // Handle errors
  console.error(error);
});

Samples

If you’d like to try the WebXR experience to see how it appears in Magic Leap, see additional resources on the documentation that you can use to learn more about WebXR:

• WebXR Samples: Web pages showing how to use WebXR API features, such as VR and AR sessions, input tracking, spatial audio, etc.
• Mozilla Hubs Labs: A platform for sharing ideas, tutorials, and tools about Mozilla Hubs, a web-based immersive space creator.
• WebXR - Samples - Wright State University: Web pages demonstrating how to use WebXR API, with test pages and performance tips.