Getting started with VR - from film to web in 100 easy steps!

This entry is the basis for a talk that we gave at the April 21, 2017, Eastern Panhandle Web Tech Meetup. In it, we break down our process for capturing, preparing, editing and publishing video to the web.

Our goal was to capture and publish VR video that could be viewed on both mobile and desktop and be viewed in any browser.

Why VR Video?

VR video creates an immersive experience where the user has some sense of control over what their attention is given to. This typically was the role of the filmmaker and editor but with VR, the user controls the perspective. We feel like this is great for the following types of content:

  • Classroom or training environments
  • Tours of businesses or museums
  • Concerts / Live Events
  • Makes a great format for “extra” content. For example, the Discovery VR app has VR content that is not aired but can be found only in the app.

This all sounds great but, short of creating a dedicated app (ie. Discovery VR) you would typically publish to YouTube, or Vimeo (which recently launched the ability to upload VR).

YouTube is great for quickly publishing your VR to the web, and YouTube VR videos can be embedded but, they can still only be played on supported browsers - Chrome and Firefox. Additionally, you have all of the cruft that goes along with an embedded YouTube video experience (watch next, ads, etc).

Ideally, we wanted to create a VR experience within the context of our own website. That’s where Google VR View comes in to play.

Before we get started with publishing to the web, lets talk about how we process our VR footage, because, yes there’s a specific process for this which is not exactly typical for most video projects.

The steps used below are specific to the Ricoh Theta S camera. This is the only camera that we’ve worked with and the workflow for another camera may be completely different. As they say, your mileage may vary. Note - I outlined this workflow on my personal blog in this entry, “Working with Ricoh Theta S VR Footage.”

Getting the files off the camera

Using the Theta S mobile app, you can save your VR files (which are MP4 files) directly to your device (iPhone or iPad) and then import them using the Photos app. I prefer to connect the Ricoh camera to my Mac and import them using the Image Capture app. This seems like a more straightforward process to me. The camera doesn’t mount on the desktop when plugged into the Mac, like a GoPro or other camera would, so we need to use the Image Capture app where the camera will show up in your list of devices. Once it shows up, you can then import the files to the location of your choice.

If you try to use the imported files as-is they will show up as two spherical images side by side.

Screen capture of spherical images

Not what we want. So begins the process of converting - processing - and injecting our files to make them usable.

Before importing into our video editor, we need to convert the files. We can do this using the Ricoh Theta app. There are a number of apps available on the download page, including a live streaming app and the mobile apps. We will be using the “Basic App.” I was somewhat surprised to find that the Basic App was an Adobe AIR application. I’m not sure why that surprised me. I guess it’s because I hadn’t seen an Adobe AIR app in a while. So, if you don’t have Adobe AIR installed, you will be prompted to download and install that before proceeding.

Top and Bottom Orientation Correction?

In addition to converting the files to a format that can be edited in Premiere, the app also corrects top and bottom orientation in your VR files. Whether you are working with VR files in Premiere or simply uploading to YouTube, you will want to correct the orientation. As I worked through how to prepare files for Premiere, I went through a process of trial and error and was surprised to see that the orientation was incorrect when I uploaded my first VR file to YouTube. Initially, I thought it was a problem with the camera. Then I realized that this needed to be corrected using the Ricoh software.

As a side note, if you are uploading directly to YouTube, Ricoh provides instructions for an upload to YouTube workflow.

Conversion Process

The conversion process is pretty straightforward. Open the Theta App and drop the files that you want to convert on to the main window. You will then be able to select the location to save the converted file, provide a new name and enable top / bottom correction. Depending on the size of the files to be converted, the process can take a while. We processed 60 minutes of video files in ~30 minutes, so about 30 seconds per minute of footage to be converted.

For comparison, I have uploaded a raw file from the Ricoh camera and a converted file to YouTube.

Raw File from Ricoh Theta S

File converted with Ricoh App

As you can see, the file converted with the Ricoh App is the only one that displays properly.

Importing into Premiere (Finally)

Once the file is converted, you are ready to import it into Premiere and start editing. Editing a VR clip in Premiere is basically the same as with a non-VR video clip. To make previewing your VR content more natural, you will want to enable VR Video display in either the Program or Source monitor. This allows you to pan around your VR the way you would when viewing the video on YouTube. You can read more about this in the Working with immersive VR video article on the Adobe Help site.

Exporting from Premiere

Once you have finished editing your video in Premiere, the export process is largely unchanged. If you scroll through the settings, you will notice that there is a VR checkbox which should be ticked. Adobe also recommends that you select “Stretch to Fill” in the Source Scaling option.

Regardless of the Format and Preset you select, be certain to change the Source Scaling option in the Export Settings dialog box to Stretch To Fill. If you don’t change this option, you are likely to introduce either letterbox or pillars to the exported video, which breaks the seam of the sphere and distorts it. - Working with immersive VR video

As you can see in the video below, I didn’t use the “Stretch to Fill” option and there is a hole (black area) in the video if you pan down as if looking at the floor..

Once you change those settings, export the file.

Injecting Meta Data

Now that we have the exported file from Premiere, we have one final step which requires another app, this one called Spatial Media Metadata Injector which adds metadata to the file allowing YouTube to recognize it as a spherical file.

Again, this app is very straightforward. Simply open the app, select the file, tick the “My video is spherical (360)” checkbox and hit “Inject metadata.” Once the app finishes, you are now ready to upload the video to YouTube. Once the video has been uploaded to YouTube you can use your web browser (currently Chrome and Firefox are compatible with YouTube VR videos), phone (YouTube app) or a VR Viewer like Google Cardboard to explore the VR video.

Publishing to the web using VR view

Now that we have a finished VR video, we want to add it to our website. This is where we will use Google’s VR View. In a nutshell, VR View creates an easy way for us to publish our video without relying on YouTube embeds.

From the VR View documentation: “VR view allows you to embed 360 degree VR media into websites on desktop and mobile, and native apps on Android and iOS. This technology is designed to enable developers of traditional apps to enhance the apps 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 a vacation or for a home builder to take prospective buyers on a virtual walkthrough before the home is built.”

“VR view also addresses a common developer concern: the limited availability of VR hardware among the general public. Although VR view supports true stereoscopic VR playback through compatibility with Google Cardboard, it defaults to a simple “magic window” mode that works on everything from desktop browsers to mobile apps without any special hardware.”

The Googel VR View documentation provides everything you need to start adding VR to your website. The code consists of a bit of javascript, a div for the video embed, another for the controls, a CSS file for styling the player embed and finally the VR View javascript file.

We’ll start with the VR View javascript. You can copy and paste this, as is. The only thing you will need to edit is the name of the video file, line 11 below. Additionally, you can edit the width and height properties - lines 9 and 10.

Google recommends that your video files be hosted locally. I haven’t tried to use something like AWS to host these files, which typically can be large (as most video files are), instead opting for hosting them directly on the server for ease of implementation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<script>
var vrView;
var playButton;
var muteButton;
 
function onLoad() {
  // Load VR View.
  vrView = new VRView.Player('#vrview', {
    width: '100%',
    height: 480,
    video: 'vr-video.mp4',
    is_stereo: false,
    //is_debug: true,
    //default_heading: 90,
    //is_yaw_only: true,
    //is_vr_off: true,
  });
  vrView.on('ready', onVRViewReady);
 
  playButton = document.querySelector('#toggleplay');
  muteButton = document.querySelector('#togglemute');
 
  playButton.addEventListener('click', onTogglePlay);
  muteButton.addEventListener('click', onToggleMute);
}
 
function onVRViewReady() {
  console.log('vrView.isPaused', vrView.isPaused);
  // Set the initial state of the buttons.
  if (vrView.isPaused) {
    playButton.classList.add('paused');
  } else {
    playButton.classList.remove('paused');
  }
}
 
function onTogglePlay() {
  if (vrView.isPaused) {
    vrView.play();
    playButton.classList.remove('paused');
  } else {
    vrView.pause();
    playButton.classList.add('paused');
  }
}
 
function onToggleMute() {
  var isMuted = muteButton.classList.contains('muted');
  if (isMuted) {
    vrView.setVolume(1);
  } else {
    vrView.setVolume(0);
  }
  muteButton.classList.toggle('muted');
}
 
window.addEventListener('load', onLoad);
</script>

Here we have the div for the placeholder where you want the iframe that will contain the video.

1
2
3
4
5
<div id="vrview"></div>
<div id="controls">
<div id="toggleplay" class="paused"></div>
<div id="togglemute"></div>
</div>

Finally, the Google-provided VR View script for using the VR View class. I placed this immediately before the closing BODY tag.

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

This is the CSS Styling for the iframe and controls. The VR will work without it but you will not be able to pause the video.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
p.caption {
  font-size: 0.7rem;
  margin-bottom: 0;
  margin-top: 0; }
 
iframe {
  display: block;
  border: none;
  margin: 10px auto;
  margin-bottom: 0;
  padding: 0;
  border: 0; }
 
#controls {
  overflow: hidden;
  background: #eee;
  margin: 0 auto; }
 
#controls > * {
  margin: 8px;
  cursor: pointer;
  opacity: 0.5; }
 
#controls > *:hover {
  opacity: 1; }
 
#toggleplay {
  float: left;
  background: url("/images/ui-vr/ic_pause_black_24dp.svg");
  width: 24px;
  height: 24px; }
 
#toggleplay.paused {
  background: url("/images/ui-vr/ic_play_arrow_black_24dp.svg"); }
 
#togglemute {
  float: right;
  background: url("/images/ui-vr/ic_volume_up_black_24dp.svg");
  width: 24px;
  height: 24px; }
 
#togglemute.muted {
  background: url("/images/ui-vr/ic_volume_off_black_24dp.svg"); }
 
/* MOBILE */
@media screen and (max-width: 700px) {
  iframe {
    width: 100%;
    height: 240px; } }
 
/* DESKTOP */
@media screen and (min-width: 700px) {
  iframe {
    height: 400px;
    width: 700px; }
  h1, h2, p {
    width: 700px;
    margin: 1rem auto; }
  #controls {
    width: 700px; } }

You can see all of this in action in the VR View Sample that I created.

Web Compatibility

  • Modern versions of Chrome and Opera on Windows, macOS, Linux, Android, and iOS.
  • Modern versions of Safari on macOS and iOS.
  • Modern versions of Firefox on Windows, macOS, and Linux.
  • Modern versions of IE 11 and Edge on Windows.

Native Compatibility

  • iOS 8 and higher.
  • Android 4.4 (Kit Kat) and higher.

Comparing Apples to Apples

The best way to see the advantages of using VR View as opposed to YouTube is to directly compare the two. Below we have embedded the same video using YouTube and the VR View method. You will notice the following:

  • If you are viewing the entry on Safari, the YouTube version will not display as a VR video but as a stretched video without the ability to pan around the video.
  • The VR View version will play as a VR video in Safari.
  • You will also notice that the VR View version is set to autoplay.

Resources / Further Reading

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins