Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Detect WebVR Support with JavaScript

By David Walsh on May 16, 2018

Note: This blog post is no longer accurate as the API has changed. Instead, take the time to read How to Detect XR Support with JavaScript.

It's been two years since I was heavily involved with WebVR at Mozilla but, despite not contributing every day, I can see VR making leaps and bounds, from Firefox making an increased effort to Chrome pushing VR and Oculus and HTC (Vive) improving their offerings. Native games are getting better but, more importantly, browsers are getting faster and three.js and aframe are empowering incredible VR experiences with JavaScript. Before you can serve up VR experiences, however, you need to ensure the browser supports VR experiences. To do so, you need to ensure navigator.getVRDisplays is available:

const supportsVR = 'getVRDisplays' in navigator;

if (supportsVR) {
    navigator.getVRDisplays().then(function(displays) {
      // ... Load VR experience
    });
}
else {
    // ... Show "you need {x} browser" message
}

If navigator.getVRDisplays is present, it's likely that the browser supports VR and AR experiences. Virtual reality and augmented reality have the potential to change the world and enrich lives. Learning how to code VR experiences will get you ahead of the curve, and as always, coding those experiences for the browser will break down the barrier of entry!

Recent Features

By David WalshSeptember 3, 2014
Create a CSS Flipping Animation
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...
By David WalshNovember 2, 2015
JavaScript Promise API
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...

Incredible Demos

By David WalshJuly 15, 2008
MooTools TextOverlap Plugin
Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element...
By David WalshMarch 9, 2011
Create a Dojo Lightbox with dojox.image.Lightbox
One of the reasons I love the Dojo Toolkit is that it seems to have everything. No scouring for a plugin from this site and then another plugin from that site to build my application. Buried within the expansive dojox namespace of Dojo is