Using 360 Video in your Patches Project

Here is a tutorial for adding 360 Video to your Patches project.

We have tested this template using Safari on an iPad Pro running iOS 11 Beta. Note: iOS 10 and older are not supported.

You can also test your project on Google Chrome, Safari and Firefox on Mac OS X and Google Chrome on Windows.

Over the course of this tutorial, we will cover the following 360 video gear:

• Ricoh Theta SC
• Samsung Gear 360
• Giroptic iO

Ricoh Theta SC

We will start off by using a video recorded using the RICOH Theta SC 360 camera.

Let's make sure the video is ready to be put into Patches. You have imported the 360 video file to your Mac or PC.

When playing the video on your computer, does it currently look like this? If it does not, move forwards in the tutorial to The conversion process. If, however, you are seeing two orbs, well, you're in luck, because we are going to fix that right now.

In order to prepare the video, you will have to load it into the RICOH THETA app and save it as an equirectangular video. The app makes it fairly simple.

When you launch the app, it will prompt you to Drag and drop the spherical image.

Disobey these instructions and drag in a video instead.

You're good to go! Just click on Start, wait for the conversion to finish and close the app. Now you have a equirectangular video and skip to The Conversion Process.

Samsung Gear 360

After importing the actual file from your camera to your computer, install the free Gear 360 app from Samsung (Windows, Mac OS X)

• Click on the 360 player on the left.
• Open up the Preferences of the app.

You will now see the location of where the stitched videos will be saved to. Change it to the folder you wish them to be saved to by clicking on Browse.

• Exit Preferences.
• Click on the + on the top of the window and select the file you wish to stich and process.

After you wait a while, your video will be stitched and processed.

You are now ready to begin The Conversion Process.

Giroptic iO

Since Giroptic iO can be directly connected to your mobile device, the stitching is done within the Giroptic iO app on your mobile device. Therefore all you need to do is transfer this video file to your computer by any means necessary, and begin The Conversion Process.

The Conversion Process

When uploading 360 video to Patches, we recommend using the popular .M4V format. In order to do that, you can install the free app Handbrake. After installation, follow these instructions:

• Launch Handbrake and click on Open Source.
• A file dialog opens. Select your equirectangular video and click on Open.
  
• You can now click on the Toggle Presets icon on the top right corner to show the ready-made presets available in Handbrake.
  
• After the Toggle Presets has been opened, pick the Apple 1080p30 Surround which is behind the Devices dropdown list.
  
• Now click Start.
• Wait for the process to finish.

Still with us? Your file is now ready to be added to the Patches 360 Video loader template.

Loading the 360 Video into Patches.

Now for the finishing touches of this project.

• Open a browser window and bring up http://patches.vizor.io/examples/360-video/edit.

• Press Tab to switch to the Program mode in Patches.

• Remember to log in! Otherwise you will not be able to upload files.
  

• Click on Source in the 360 Video object.

• Click on the Upload tab in the File Browser.
  

• Click on Browse and select your file.
  

• Click on Open.

• Begin the uploading process by clicking on Upload. After the successfully finishes, you are transported back to the Browser -tab of the File Browser. Your 360 video file will be automatically selected.

• Click on Select to exit the File Browser and insert the video to the 360 Video Player -object.

Voilà! Your 360 video is now playing and the possible audio in the recording will also play. The video will play till the end and then loop.

We have added some controllers to control the video and the audio with. If the video should be flipped vertically or horizontally, click on the On/Off buttons. If you wish to silence the audio, click on the Audio On/Off button.

If you find that the video is tilted or otherwise requires more than simply horizontal/vertical flipping, fret not! We'll work on that too.

I made a perfect video but it's all diagonal and weird, I don't like my life. Help!

• Exit the Program mode and switch to the Build mode by pressing Tab again.
• Now press V to enter the VR Camera viewmode. (Alternatively, click on this icon on the bottom row)

• While on this mode, click on the 360 video.

• The appearance of the Move tool signals that you have successfully selected the 360 video.
• Click on the Inspector on the top bar.

Start modifying the Rotation parameters until you are happy with where the camera is pointing and what the video looks like.

Are we good? Good. You are now ready to press Publish.

Press Publish and tell all your friends!

Thank you for using Patches.

If you're especially proud of your 360 video, join us on the Vizor public Slack channel at https://vizorvr.herokuapp.com. You could also post it on Twitter and mention @VizorPatches.