Google is taking long strides forward in enabling virtual reality (VR) for the widest audience possible, and the latest effort includes enabling developers of non-VR apps to be able to include VR and 360-degree content. VRFocus maps out the information needed to embed VR view to ensure a speedy and simple process as outline by Google.
Why Embed VR View, and How?
VR view is a way to take VR or 360 experiences and embedding them in a way that those without VR can use and see, such as using a phone to tilt and see different angles, or clicking and dragging while using a computer so compensate for the head-mounted display (HMD).
The process to get this capability is relatively straight forward as long as there is the right support, specifications, media to capture and host, and correct embedding procedure. For Google’s own example of this, check out the image below.
Which Platforms Are Supported?
All modern versions of Chrome, Safari, Firefox, and Internet Explorer 11 support and are compatible across iOS, Windows, Android, OSX, and Linux, respective to what the operating systems can handle themselves. For mobile devices, there is a need for iOS 8 and higher, or alternatively Android 4.4, Kit Kat, and higher.
What Are the Image and Video Specs?
Mono and Stereo 360 images and videos are supported, which both need to be stored in equirectangular-panoramic (equirect-pano) – a common format where multiple imaged stitched and mapped out in a panoramic view, and is widely supported.
For images: it is recommended that they are saved at jpeg files, but can also be stored as png or gif. Mono images should be at a 2:1 aspect ratio, and stereo at a 1:1.
Tip: dimensions should be either 2048 or 4096. So for example, mono is 4096 x 2048, and stereo is 4096 x 4096.
For video: it is recommended that they are saved as MP4, and encoded with h264 to ensure HD format. Mono and stereo should follow the same rules as image with aspect ratio, and it is recommended that for optimal compatibility mono should be 1920×1080 and stereo 2048×2048.
Tip: Most video editing programs should have the option for h264 when exporting the video.
Capturing and Hosting Media
VR view is user-friendly for developers, and is therefore intentionally independent as to let users choose what suits their needs, depending on if they want real world capture or CG capture, and what type of hosting they prefer.
Real World Capture: VR view can use images taken by any camera that supports equirect-pano. Google has suggested two solutions for users wanting to get started quickly and without hassle, which are the Cardboard Camera App, and Ricoh Theta.
CG Capture: this can be more tricky than real world capture, and so there are a range of different popular programs and solutions listed by Google: 360 Panorama Capture for Unity, Unreal, Domemaster3D for Maya, Renderman, and Rendering Omnidirectional Stereo Content.
In terms of hosting, Google recognises that most developers would most likely choose to host their VR view media on a web server through HTTP/HTTPS, for both Web and Native (mobile devices), and so if a URL can be provided, VR view can adapt. For native users, you can also use media packed with your app, which is ideal if you want to make sure users can access the media without internet connection.
VR View For the Web
Here comes the real technical section of the guide, but it is also the most important.
To embed a photosphere (what you created above) on your website you need to include an iframe that links to the VR view source and specifies which image or video to show.
Here is an example given by Google that was featured at the beginning of the guide:
<iframe width=”100%” height=”300px” allowfullscreen frameborder=”0″ src=”//storage.googleapis.com/vrview/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&is_stereo=true”></iframe>
If there are a few points that you are not familiar with, here are some pointers for terms:
width=”100%” = full-width frame
height=”300px” = set height of frame
allowfullscreen = possibility to go into fullscreen mode
frameborder=”0″ = no border around the frame
Tip: images and videos accessed this way must be available via cross-origin resource sharing (CORS), allowing specific data or media to be shared across many domains.
For CGI parameters determine what is presented and how it is displayed. Here are the main points to pay attention to when controlling these parameters:
image or video = {String} URL of image or video to load. (required)
is_stereo = {Boolean} true if content is in stacked stereo format. (optional, default false)
preview = {String} URL of still preview to load first. (optional, default none)
start_yaw = {Number} Initial yaw of viewer, in degrees. (optional, default 0)
is_yaw_only = {Boolean} true if motion is restricted to yaw only. (optional, default false)
Tip: Self-hosting is recommended to avoid several known issues: 360 videos not working on iOS due to forcing full screen playback of videos in browser; 360 images and videos on iOS Safari having incorrect orientation on different servers; images that are not power-of-two and square not displayed correctly in Chrome and Safari iOS 8.
With these steps you will have successfully embedded your own VR view image or video for web.
