Skip to main content

Embedding 360-Degree Images to a Web Page with iframes

This tutorial assumes you know the basics about HTML and website hosting.

Disclaimer: This iframe approach is for web view only. For embedding media on Android and iOS, please take a look at the Google's official documentation: 
https://developers.google.com/vr/discover/360-degree-media#how_to_embed_your_media

Step 1 - Take an image with the Cardboard Camera 

If you are not familiar with the Cardboard Camera please take a look at this post first: https://vrfanatico.blogspot.com/2018/08/taking-360-degree-photos-with-sound.html.

Your image will look something like this:



Step 2 - Convert the image to stereo

Upload your image to this very simple converter provided by google https://storage.googleapis.com/cardboard-camera-converter/index.html. It will automatically convert it to stereo.

Your image will now look like this, but don't worry, it will look OK once you embed it into your website:



Step 3- Upload the image to your website

Upload the image to your website or blog and take note of the path. If you don't know the path (for example, if you uploaded your image directly into a blog post), then you can right click on the image and select copy link address, the image path and name will be there.

Step 4 - Add the iframe to your HTML code

You can do this in 2 different ways, using the storage.googleapis or self hosting.

1. Using storage.googleapis.com

Add the following code to your HTML:

<iframe
          allowfullscreen=""
          frameborder="0" 
          height="300px"
          src="//storage.googleapis.com/vrview/2.0/index.html?image=//Path_To_Your_Image/Image_Name.jpg&is_stereo=true"
          width="100%">
</iframe>

It will work like this:
     

2. Self hosting on your own server:

Copy the project https://github.com/googlevr/vrview and your 360-degree images into your own server, and then reference it within the iframe.

<iframe
          allowfullscreen=""
          frameborder="0" 
          height="300px"
          src="//Your_Server.Domain/vrview/2.0/index.html?image=//Path_To_Your_Image/Image_Name.jpg&is_stereo=true"
          width="100%">
</iframe>

It will work the same way:




If you are interested in the details, I recommend you to check out the Google Codelab - Getting Started with VR View for HTML: https://codelabs.developers.google.com/codelabs/vr_view_101/index.html?index=..%2F..%2Findex#0


Comments

  1. Thanks for sharing this post. I'm very interested in this topic. onlineconvertfree.com With the variety of digital cameras out there, an increasing number of individuals are turning to pictures, whether or not it being an element time newbie or full time skilled, they're putting their imaginative and prescient out for others to see.

    ReplyDelete

Post a Comment

Popular posts from this blog

Adding Hotspots To 360-Degree Photos With Google VR View

This tutorial shows how to add 360-degree images with hotspots to a website using Google VR View. It also assumes you already have basic knowledge of JavaScript and HTML. Your 360-degree images will work like in this example. Look around and click on the circle hotspots to go to the next location.
Step 1 - Take the 360-photosYou can use a 360-degree camera or an app that allows you to take 360-degree photos with your smartphone. In this post I talk about how to do this with the Cardboard Camera from Google:
https://vrfanatico.blogspot.com/2018/08/taking-360-degree-photos-with-sound.html.

Your image will look something like this:



Step 2 - Convert the image to stereoUpload your image to this converter provided by google https://storage.googleapis.com/cardboard-camera-converter/index.html. It will automatically convert it to stereo.

Your image will now look like this, but don't worry, it will look OK once you embed it into your website:



Step 3- Upload the image to your websiteUpload the …

VR Worlds' Scavengers Odyssey Gave Me Motion Sickness

Recently I had my first encounter with motion sickness while playing VR Worlds' Scavengers Odyssey, a game included with the PlayStation VR. Believe me, it was not nice.
Everything started at the second level of the game, where you are in outer space jumping from one asteroid to the other and walking (some times vertically) while shooting aliens. Suddenly, I started having the feeling of being very tired and a bit uncomfortable, but I thought I could stop after getting to the next level instead of stopping right away, that was a mistake.
A few minutes later after reaching level 3, I turned off the PlayStation, something wasn’t right. I was sweating a lot and I was starting to get an upset stomach. Being my first experience with VR motion sickness, I wasn’t sure about what I had. My first thought was that this was caused by something I ate. I had food poisoning in the past and it felt just like that. I went to the bathroom and sat down, I wasn’t sure if I was going to throw up or …