Menu
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
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.
517
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.
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
