Displaying 360-Degree Photos & Videos on Websites using Google VR View

resources
Published on January 8, 2019

360-degree photos and videos look great. They are being embedded in web pages at quite a fast rate, and really give an enhanced user experience.

Many phones and cameras can take a 360-degree picture and video. Even if you don't have such a camera you can create a 360-degree media using mobile apps like Google Cardboard Camera.

As of now, browsers cannot display a 360-degree media. However they can be embedded in web pages using Google VR Javascript SDK. The process is very straightforward, and is described in this tutorial.

Demo

Click here to see the demo

Download sample codes for the demo

Please note that you must run the files from a server. You will also need to enable CORS for the 360-degree picture. See below to know more.

Setting up the Web Page

This is a 2-step process. The first step is to include the vrview.min.js file in the HTML.

<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>

The second step is to define a container element, a div, that would hold the contents when loaded.

<div id="vr-image"></div>

When the Javascript SDK is initialized, the container, will be replaced by an <iframe> element.

Using the Google VR Javascript API

The VR view is created by initializing a new VRView.Player object and passing the container element as the first argument. The second argument is an object of configuration parameters.

The required configuration parameters are as follows :

  • video: URL of the 360° video file.
  • image: URL of the 360° image file. Either an image or a video URL must be provided.
  • width: Width of the iframe.
  • height: Height of the iframe.

There are some more parameters, you can get more information from here.

After the page is loaded, the constructor is initialized :

window.addEventListener('load' initVRView);

function initVRView() {
	var vrView = new VRView.Player("#vr-image", {
		image: "url/of/360/image",
		width: '100%',
		height: '100%',
	});
}

Setting width and height as 100% will take up the full width and height of container element as defined in its CSS.

Enabling CORS for 360-Degree Media

Since the Javascript is being included from Google's servers, the 360-degree picture or video must have CORS enabled (setting the Access-Control-Allow-Origin HTTP header).

You can add the CORS header from an htacess file.

(A solution to the CORS issue is to download the Javascript SDK and host in your own server. But currently there are some issues being faced. This article will be updated once the issue is resolved)

More Information

Apart from just embedding a 360 picture or video in a web page, you can make it more interactive by using other included Javascript APIs like :

  1. Registering events on the VRView — like knowing when VR View is clicked, or when fullscreen mode is activated
  2. Playing and pausing 360-degree videos
  3. Loading new content dynamically
  4. Creating hotspots (regions on the 360-degree media where user can interact)

See the the official documentation of Google VR View to know more.

In this Tutorial