Make React VR work on iOS devices.
Yes, it’s possible. You can make your React VR application work on iOS browser thanks to webvr-polyfill! Documentation isn’t mentioning this possibility, polyfill’s example is dirty in the context of the framework and figuring out how to properly implement it can cause a severe headache. I’ll help you to avoid it.
Let’s start with an empty project.
Install react-vr-cli globally if you didn’t yet.
npm install -g react-vr-cli
Find you favorite directory on your drive and initialize a new project. I’ll call it reactvr-ios.
react-vr init reactvr-ios
and enter freshly created directory
cd reactvr-ios
Install the polyfill.
webvr-polyfill adds JavaScript implementation of WebVR spec and it’ll allow non-supporting browsers to use this functionality.
npm install -save webvr-polyfill
Add the polyfill to your project.
Open vr directory in your projects folder and edit client.js file.
Import webvr-polyfill at the top of the script.
import 'webvr-polyfill';If you compile your project, browser console will display a few errors blocking application from running. The problem is that ReactVR relies on version 1.1 of the WebVR spec. Polyfill provides us with special shim method which will update the polyfilled version. Use this method after importing the patch.
WebVRPolyfill.InstallWebVRSpecShim();Now open your application in iOS Safari and have fun with virtual reality before Apple makes it’s “iPhone moment” with it! Polyfilled spec isn’t perfect but good enough and you can configure it to match your expectations.
