I’ve had my eye on React VR for some time now, and after the recent announcement that it’s ready for use, I jumped on it, excited to get my hands dirty. While setting it up on my machine was pretty easy, I encountered a lot of difficult issues getting it to run on my Android device with a Google Cardboard style VR headset. I’ve documented my solution here, with hope that others can avoid an afternoon of struggle. I can only confirm this for Windows + Windows Subsystems for Linux, but the methods should be sound for any OS. I’m going to assume you have Cardboard set up on your device. If you haven’t already, run through the You’ll end up with a fun little early VR checkerboard room running in your browser. Now to get immersed. Getting Started guide. To start off with, you’ll need to open the required port to allow your phone to connect to your computer. You’ll need to look up the methods on how to do this for your respective OS. (you can change this if you must, but you’ll need to change some code later). Why 8000, when the packager runs on 8081? You’ll find this out pretty soon. Allow traffic into port 8000 Next, install on your Android device. We need this because the current release of Chrome (57 as of writing) has issues with WebVR support (the dreaded black screen). However, WebVR is not enabled out of the box, so you’ll need to enable it via flags. Chrome Canary Go to on your device, find and hit Enable. chrome://flags WebVR Chrome will ask to restart. Do so. Now your device is WebVR enabled! If you had port 8081 open like I orignally did, opened up your new VR demo and tried to switch to VR mode, you’d find a big pain point: ! That happens to be how the React VR packager runs. Uh oh. It may be possible, I’m unaware of any way to run the packager in secure mode. So instead, let’s proxy it so we can. WebVR will not run on an insecure origin I used http-proxy, a node library, to create a proxy with https support. So start by install it via: npm install -g http-proxy Next, you’ll need to create some certificates so it can serve them via https. This will depend on your OS. The following command should work with Windows (via WSL), Mac and Linux, although I can’t confirm for Mac. openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem Remember the passphrase you set, you’ll need it soon. Next, create a file and add making sure to update the passphrase with what you set above. Run it via . proxy.js this code, node proxy.js Now on your phone, in Chrome Canary, go to . Since we the cert we created is self signed, you’ll get the Insecure Connection screen. Hit Advanced and add an exception. https://<YOUR MACHINE IP HERE>/vr:8000 Ideally, you’ll now have the same VR demo on your phone. Hit the button in the bottom left hand corner. If you don’t have it, check again to make sure WebVR is enabled and that you didn’t accidentally change back to normal Chrome (it happens). View in VR Chrome may ask you to install the Google VR Services at this point. If so, install it and restart Chrome. Try the View in VR button again. With any luck, VR mode will enable and you can start testing in a real VR environment! Happy Hacking! IT’S ALIVE
