localhost and 192.168.x.x over HTTPS for a-frame webVR development and local testing

Question

I'm trying to develop a A-frame-based VR experience.

I can test it on my mac via http://localhost but can't do the same using mobile phone or VR headset via http://192.168.1.123.

The problem is that those browsers demand that the page is served over HTTPS rather than HTTP, otherwise it denies access to the device motion sensor, making testing impossible.

Using the following instructions, I managed to successfully have my VR web page served over with a valid certificate.

• https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/
• https://github.com/mattdesl/budo/blob/master/docs/command-line-usage.md#ssl-and-https

But, that is not enough, mobile device and headset access the page over a local-wifi IP like 192.168.1.123 rather than localhost and the ssl certificate doesn't seem to work for those, even if i replace localhost by the correct IP when generating the domain key & certificates.

i guess each device browser would need to have its trusted store updated or something...

Would be curious to know how people solved their problem in their a-frame local development and testing flow.

Answer 1

Partial answer -- for Oculus Quest or Go browser development at least.

You can use the Chrome remote device debugging tools: https://developer.oculus.com/documentation/oculus-browser/browser-remote-debugging/

Then setup port forwarding for the remote device: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server

This method allows you to sidestep the whole certificate thing since you can still use localhost:port to which the browser grants appropriate device permissions.

Answer 2

Since you can't use IP numbers, you want to include your local domain name into the certificate, like this: https://stackoverflow.com/a/10176685/573216

Worked for me in a similar context.