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!
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event...
I'm going to share something with you that will blow your mind: I don't have the MooTools documentation memorized. I just don't. I visit the MooTools docs frequently to figure out the order of parameters of More classes and how best to use...
If you follow me on Twitter, you saw me rage about trying to make position: absolute
work within a TD
element or display: table-cell
element. Chrome? Check. Internet Explorer? Check. Firefox? Ugh, FML. I tinkered in the console...and cussed. I did some researched...and I...
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