Skip to main content
Version: 10 Jul 2024

WebXR

Magic Leap now offers full support for the WebXR Device API. It comes pre-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 with 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 Magic Leap:

  • 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 the requestSession API in WebXR. Using immersive-vr 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 from 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 them explicitly in the required features when requesting a session. For more details, see the WebXR specifications.

Pinning Web Apps​

Magic Leap does not support pinning web applications from the browser to the home menu. However, any APK (Android Package Kit) that 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.

Web Converter

You can use the Web Converter Tool to create an apk from a website url. To learn more see the Web Converter Guide for more information.

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 Magic Leap browser will open with the URL provided in the QR code.

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

Permissions​

Magic Leap 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).

Determine if Your Website is Being Viewed on a Magic Leap 2​

While WebXR provides APIs to identify devices, you may want to identify the device 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:

// Function to detect if the user is using a Magic Leap 2 device
function detectMagicLeap2() {
  // Fetch the root document with the hint to receive the 'Sec-CH-UA-Model' header
  fetch("/", {
    headers: {
      "Sec-Fetch-Site": "same-origin",
      "Accept-CH": "Sec-CH-UA-Model" // Correctly request to receive the device model
    }
  })
  .then(response => {
    // Retrieve the 'Sec-CH-UA-Model' header from the response
    const model = response.headers.get("sec-ch-ua-model");
    if (model) {
      // Compare the model string to the target device
      if (model === "Magic Leap 2") {
        console.log("You are using a Magic Leap 2 device!");
        // Optionally, invoke any Magic Leap 2 specific code here
      } else {
        console.log("You are using a different device:", model);
        // Optionally, handle other devices here
      }
    } else {
      console.warn("The SEC-CH-UA-MODEL header is not available. Ensure the header is properly requested and accessible.");
    }
  })
  .catch(error => {
    // Handle potential errors from the fetch operation
    console.error("Error detecting the device:", error);
  });
}

// Invoke the function to perform the device detection
detectMagicLeap2();

For more information on how to use the Sec-CH-UA-Model header and other client hints, you can refer to the following resources:

Samples​

If you’d like to try the WebXR experience to see how it appears on Magic Leap, see the following resources for learning 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.