Detect XR Support with JavaScript

By  on  

A few years ago I wrote an article about how to detect VR support with JavaScript. Since that time, a whole lot has changed. "Augmented reality" became a thing and terminology has moved to "XR", instead of VR or AR. As such, the API has needed to evolve.

The presence of navigator.xr signals that the browser supports the WebXR API and XR devices:

const supportsXR = 'xr' in window.navigator;

I really like using in for feature checking rather than if(navigator.xr), as simply invoking that could cause some initialization to take place. In future posts we'll explore identifying and connecting to different devices.

Recent Features

Incredible Demos

  • By
    Fade Images with MooTools LazyLoad

    I recently received an email from a MooTools developer asking a great question about my LazyLoad class: "I'm using your LazyLoad MooTools plugin (which is great, by the way). I have been trying to figure out how to modify it so that once an image scrolls into...

  • By
    Use Elements as Background Images with -moz-element

    We all know that each browser vendor takes the liberty of implementing their own CSS and JavaScript features, and I'm thankful for that. Mozilla and WebKit have come out with some interesting proprietary CSS properties, and since we all know that cementing standards...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!