11

This is my index.html file

<html>
<head>
  <title>VR Sample</title>
  <script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>

</head>

<body>

  <div id="vrview">
    <iframe width="100%"
    height="300px"
    allowfullscreen
    frameborder="0"
    src="http://storage.googleapis.com/vrview/index.html?image=ffff.jpg&is_stereo=true">
</iframe>
  </div>



</body>
</html>

And this is the structure of the website folder

I tried hosting it in Webserver for chrome as per the instructions in the google codelabs. But I clicked the 127.0.0.1.8887 url, I got a blank page with no files or folders. Then I tried hosting it on XAMPP and It did work. However, I did not get the panaroma image. Instead I got this error

enter image description here

I took the 360 image with google camera app and converted it to stereo with the google's online converter but got the same error. I also tried downloading the VRView repo from github and modified the code as

src="vrview/index.html?image=ffff.jpg&is_stereo=true"

that too didn't work.

Shyam Prasad
  • 172
  • 1
  • 11

1 Answers1

4

You are using the iframe version of vrview meaning when you request "ffff.jpg", you are actually requesting:

http://storage.googleapis.com/ffff.jpg

Try using the javascript version

Try this:

<html>
  <head>
    <script src="http://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
    <script>
      window.addEventListener('load', onVrViewLoad);

      function onVrViewLoad() {
        var vrView = new VRView.Player('#vrview', {
          image: 'http://storage.googleapis.com/vrview/examples/coral.jpg',
          is_stereo: true,
          width: '100%',
          height: 300
        });
      }
    </script>
  </head>
  <body>
    <div id="vrview"></div>
  </body>
</html>

Note: chrome cannot access files off a harddrive.

EDIT: This is due to CORS.

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.

Thanks to @Eleanor Zimmermann for noting this.

Liam. B
  • 114
  • 6
  • 1
    Thank-you for the answer! For posterity - I found that CORS issues were going on here as well. When I served up my image from a CORS enabled host, the VR viewer rendered it happily. Previously, I'd been trying just a generalized image link from my google drive. Thanks again, @Liam. B – Eleanor Zimmermann Feb 28 '17 at 23:42
  • where can I find the "javascript version" of vrview? The project is discontinued and there is no more "embedded.js" or "vrviews.js" or anything else available for download. – jumpjack Aug 25 '21 at 17:33