javascripthtmlgoogle-vr

Google VR View - Hosting code not working


Perhaps this is a simpler issue than I realize, but I am somewhat new to HTML/JS and this seems to me to be a specific issue with this code. I am using the Google VR Viewer to embed 360 elements within my web-page.

Their documentation here is simple enough and setting up as laid out on their website works fine if I'm using media hosted on Google's domain as well. This the code I'm using that works just dandy:

<script src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
<script>
  window.addEventListener('load', onVrViewLoad);
  function onVrViewLoad() {
    vrView = new VRView.Player('#vrview', {
    width: '100%',
    height: 480,
    image: 'https://storage.googleapis.com/vrview/examples/coral.jpg',
    is_stereo: true,
    is_autopan_off: true
    });
  }
</script>

However, I need to have the .js files hosted on my own server, as opposed to just linking to Google. So I tried downloading the script and using following code and I can't get it to work. Can anyone spot what's wrong?

<script src="build/vrview.min.js"></script>
<script>
  window.addEventListener('load', onVrViewLoad);
  function onVrViewLoad() {
    vrView = new VRView.Player('#vrview', {
    width: '100%',
    height: 480,
    image: '360/coral.jpg',
    is_stereo: true,
    is_autopan_off: true
    });
  }
</script>

For reference, the error I get is

Cannot GET /index.html?image=http://127.0.0.1:61060/360/coral.jpg&amp;is_stereo=true&amp;is_autopan_off=true&amp;

Thanks! Hopefully this isn't too dumb of a question.


Solution

  • This is indeed a lack of documentation on the (Archived) Google VRView.

    You need to download all of the files from this branch of the VRView repo. You can safely remove the examples-folder, but keep everything else. Place all of these files and folders in a sub-folder in your site.

    For example the folder structure could be:

    yoursite/index.html <-- Your website
    yoursite/ <-- Anything else you want, img/, css/, other root .html files
    yoursite/googlevr/ <-- all the files from VRView repo
    

    This should make it so that you have yoursite/googlevr/build, yoursite/googlevr/images etc, along with the index.html and style.css files in the root of googlevr/

    After this you can use the .js from your own index.html (or any other .html in that folder), via

    <script src="/googlevr/build/vrview.min.js"></script>
    

    Please note that the Google VRView is now Archived in Github and they seemingly have stopped any support for this. Also note that by default the VR views won't work on iOS 12.1 devices and newe due to a privacy setting for device orientation being disabled by default. Your users need to manually turn on orientation sensors in their device settings.