React-360: How to convert full screen Mobile VR into split screen to use with google daydream or oculusrift?

[MrKanthaliya]

Right now I see full screen version of VR on my mobile browser. I want to convert into 2 split screen so that one can use it with google daydream or any other VR headset.

[andrewimm]

React VR uses the WebVR APIs to render to VR headsets, which is supported by Chrome on daydream devices. You can learn more about this here: https://webvr.info/

If you're running in a WebVR-compatible browser, you'll automatically see a "View in VR" button that will take you into VR mode.

[flockonus]

Using the latest Android + Chrome, shouldn't i have the split view? I just downloaded and ran the latest npm demo

[andrewimm]

@flockonus to use WebVR on all domains, you need to manually enable it for Chrome on Android. Go to chrome://flags#enable-webvr and toggle the Enable WebVR flag.

By default, Chrome only turns on WebVR for sites that are part of an "Origin Trial," a special set of websites testing the experience.

[flockonus]

Thank you, with that flag Chrome can detect it :)

A heads up, after getting into VR mode the message pops up: not secure ~your connection to this website is not secure, go back ... so pretty clearly chrome detected, but still could not use

[andrewimm]

Yes, that's something that all WebVR developers will hit if you don't have https certs. If you wait long enough, the message eventually goes away. If this annoys you, you should provide feedback to the Chrome WebVR team, since this impacts all developers, regardless of which library they use.

[flockonus]

Definitely agree with you. I just thought maybe it would make sense to serve https with a self signed certificate. webpack-dev-server can do it with --https flag

[MrKanthaliya]

Yeah, Even I am using self signed certificate and executing this code with node

var fs = require('fs');
var http = require('http'),
    httpProxy = require('http-proxy');

httpProxy.createProxyServer(
  {
    target:'http://localhost:8081',
    ssl: {
      key: fs.readFileSync('key.pem', 'utf8'),
      cert: fs.readFileSync('cert.pem', 'utf8'),
      passphrase: 'covfefe'
    },
  }).listen(8000); 

[andrewimm]

I'm working on a PR to metro-bundler right now that will add custom & self-signed certs.

[andrewimm]

Just landed support for https with custom ssl certs in React Native: https://github.com/facebook/react-native/commit/2c32acb755730ac20775aec4aad50d853d0577bf

It should go out with RN 0.46, which we'll include in React VR when it's stable.

[diogofgr]

@flockonus to use WebVR on all domains, you need to manually enable it for Chrome on Android. Go to chrome://flags#enable-webvr and toggle the Enable WebVR flag.

By default, Chrome only turns on WebVR for sites that are part of an "Origin Trial," a special set of websites testing the experience.

@andrewimm this little tip should be somewhere in the docs, maybe in the "Publishing" section. I lost a whole day trying to figure out why the "view in vr" button wasn't showing. Finally solved it :laughing: