Detect WebVR 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!
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![5 More HTML5 APIs You Didn’t Know Existed]()
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
![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...
![Web Notifications API]()
Every UI framework has the same set of widgets which have become almost essential to modern sites: modals, tooltips, button varieties, and notifications. One problem I find is each site having their own widget colors, styles, and more -- users don't get a consistent experience. Apparently the...
Looks like
is deprecated and should not be used any more. Oculus Quest 2 does not implement it, so it can’t really be relied on: https://discourse.threejs.org/t/navigator-getvrdisplays-not-working-on-oculus-quest-browser/23273