This codelab will teach you how to embed 360 degree VR media into websites using VR View. This technology is designed for developers of traditional apps to enhance them with immersive content. For example, VR view makes it easy for a travel app to provide viewers with an underwater scuba diving tour as they plan vacation or for a home builder to take prospective buyers on virtual walkthrough before the home is built.

VR View is available not only on web pages, but also for Android and iOS. There is a companion codelab to this one which introduces VR view in Android.

What you'll learn

What you'll need

During the codelab we'll download code from Github:

Tell us a little about you

How will you use use this tutorial?

Read it through only Read it and complete the exercises

How would you rate your experience with building Web applications?

Never tried Novice Intermediate Proficient

How would you rate your experience with Google Cardboard VR?

Never tried Novice Intermediate Proficient

How would you rate your experience with VR image and video capture?

Never tried Novice Intermediate Proficient

For this codelab, we'll start with a web page about Google I/O 2016. We'll replace some of the included images with VR View elements that will give the 360 degree view, and an immersive experience via Cardboard.

Get the sample project

For this codelab, we've made a web page as a starting point. During this codelab, we'll walk through how easy it is to add VR View.

Download sample code package

...or clone the GitHub repository from the command line.

$ git clone https://github.com/googlecodelabs/vr_view_101

First, let's take a look at a web page about I/O. This is included in the sample code. website/ directory. You'll need to run a web server to see the page in action. For the codelab, we'll use a Chrome based web server. To start the web server,

  1. Click on the "Apps" bookmark in the bookmark bar
  2. Find "Web Server"in the list and click it.
  3. Click "Choose Folder" and select the vr_view_101/website directory.
  4. Make sure the web server is started.
  5. Enable "Accessible accessible on local network" so we can see this site on a phone.
  6. Click on the link to the "Web Server URL(s)" to see the site. It should show a directory listing of the files, click on index.html

As you can see, we've removed the material design and other styles that make web sites great so we can focus on adding VR view functionality - which we'll do next!

Typically, you'll capture images and video and host it on the web. For trying out VR view and initial testing you can use the URL to the public viewer. However, since there are some situations where this will not work as well as you want, we suggest hosting the VR view code on your own site. All the details on getting the code and why you'd want to host it yourself can be reviewed here: https://developers.google.com/cardboard/vrview#self_hosting.

Now, let's clone the vrview project into ours. From a command prompt, change directories to vr_view_101/website, and clone the vrview project:

$ git clone https://github.com/google/vrview

Your directory should now look like this:

Now we have all the code we need, let's get an image.

While the web page is nice, let's enrich the experience by adding a 360 degree view of I/O. Grab the phone and start the Cardboard Camera app. This app will take a pretty good panoramic picture with a stereoscopic effect.

Click on the camera button and follow the prompts to take a picture. It will take a few seconds to process the image and save it.

Copy the image to the computer

Once it is saved, we'll copy it from the phone to the computer. The easiest way to do this is reconnect your phone to the computer as a media device. Then copy the Cardboard Camera image which is found in DCIM/CardboardCamera. It will have a name something like IMG_20160512_105228.vr.jpg.

Supported image and video formats

Whew! Now we have our image, but unfortunately it is not quite in the format we need. VR View has specific image configuration requirements:

Format the image

Whew! Now we have our image, but unfortunately it is not quite in the format we need.

If we look at the properties of our image (using Finder/Get Info) it is 10515x1765. To change it, we'll use a converter page to reformat it.

Open https://storage.googleapis.com/cardboard-camera-converter/index.html

Select the image copied or drop it on the page. Then download the converted image and copy it to website/images and name it converted.jpg.

Edit the HTML

Now that we have a panoramic image, let's add to our webpage.

  1. Start your favorite HTML editor and then open the VrView codelab as an existing project.
  2. Double click on website/index.html to open it for editing.
  3. Find the codelab image and replace the img tag with the following iframe.
<iframe
   frameborder="0"
   width="100%"
   scrolling="no"
   allowfullscreen    
   src="vrview/index.html?image=/images/converted.jpg&is_stereo=true">
</iframe>

Save the file and try it out!

Reload the webpage.

VR view is a panoramic view so you can click on the view and drag the image around to see all around the in the image.

Alright! We just added this panoramic view to our web page! Let's take a closer look at what we pasted:

An Iframe element. This defines a space on the web page for the VR view code to be loaded and render the image. Inserting the image using an Iframe causes the least interference and complexity with your existing web page. There are several attributes of the Iframe:

Control Parameters

If you noticed, in the src attribute, there is a question mark after index.html. This means this page accepts query parameters which control what is displayed:

Now is a good time to experiment with some of these and see how they affect the VR view experience. Next step, Let's try some video!

Capturing panoramic and stereo video is more than we can do on our simple Android phone. For this example, we'll model an encyclopedia page about gorillas. We'll replace a normal image with a panoramic video.

Adding video uses the same approach, just use the video parameter instead of the image parameter.

Open the file website/gorillas.html.

Find the div element where the id equals "photo".

Replace that entire div element with the iframe:

<iframe
  frameborder="0"
  width="100%"
  scrolling="no"
  allowfullscreen
  src="vrview/index.html?video=/vrview/examples/video/congo_2048.mp4&is_stereo=true">
</iframe>

Save the file and reload the page in the browser to see the updated page.

Now that we have updated the website to use VR view, we can enjoy a more rich experience in the web browser. But wait, there's more! Since we used stereo images and video, we can have a really immersive view when using Cardboard!

  1. Open the website on your computer in the browser on the phone.
  2. Pick one of the VR view and tap the cardboard logo at the bottom.
  3. Slide the phone into Cardboard and look around at the picture you took!

Now, click on the link to the gorilla page, and view the video in Cardboard using the same approach!

Now that you've finished the code lab, there are a few more things you can do before you are ready to publish your awesome game. This section will describe what is left and point you to some resources where you can continue learning.