How I got a React VR dev environment working with an Android Cardboard HMD

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 Getting Started guide. You’ll end up with a fun little early VR checkerboard room running in your browser. Now to get immersed.

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. Allow traffic into port 8000 (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.

Next, install Chrome Canary 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.

Go to chrome://flags on your device, find WebVR and hit Enable.

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: WebVR will not run on an insecure origin! 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.

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 proxy.js file and add this code, making sure to update the passphrase with what you set above. Run it via node proxy.js .

Now on your phone, in Chrome Canary, go to https://<YOUR MACHINE IP HERE>/vr:8000 . Since we the cert we created is self signed, you’ll get the Insecure Connection screen. Hit Advanced and add an exception.

Ideally, you’ll now have the same VR demo on your phone. Hit the View in VR 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).

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