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&is_stereo=true&is_autopan_off=true&

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

回答1:

I think it is looking for the image on the localhost (where it says http://127.0.0.1). Have you uploaded it to your website or are you trying to do it locally? If you do it locally, you have to run a local server.

If you have uploaded it to your website, then instead of using relative paths, try using absolute paths.

Instead of:

image: '360/coral.jpg'

Try:

image: '/360/coral.jpg'

assuming that the folder "360" is indeed in the root directory of your website. (Similarly, if it is not even loading the player, you can use an absolute path instead of a relative one to point to vrview.min.js.)

回答2:

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.