Detect WebVR Support with JavaScript

By  on  

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
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

Discussion

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