• Home  / 
  • Unity3D
  •  /  Building an Interactive Mobile 360 Video Player for GearVR

Building an Interactive Mobile 360 Video Player for GearVR

 

Building an interactive 360 Video player for Mobile / GearVR

This post will run you through the basics of creating a 360 video player for the Oculus GearVR.  The same techniques will work for google cardboard, daydream, htc vive, and oculus rift with minor changes.  You’ll learn how to play a video, bring up a quick menu, and switch to another video.

Note on 3D 360

This post covers 360 video but not stereo 3D video.

If you’re looking to play 3D 360 Video check out this post: https://unity3d.college/2017/07/31/how-to-play-stereoscopic-3d-360-video-in-vr-with-unity3d/

Sphere Setup

Before we can play 360 video, we need an inverted sphere.

In a previous post, I showed how to use an inverted sphere mesh.

Today, I’ll show you how to create one in Unity using a single editor script – original source here

Create a new folder named “Editor”

Create a script named InvertedSphere.cs in the “Editor” folder.

Replace the script contents with this.

You may need to hit play before continuing just to force the editor to compile your new editor script

In a new scene, right click the Hierarchy and select “Create Other”->”Inverted Sphere

Set the size to 100.

Click “Create Inverted Sphere”

Select your “Inverted Sphere” in the Hierarchy

Add a “Video Player” component to the sphere.

Importing Videos

Create “Videos” folder.

Download some sample 360 videos that you enjoy from youtube or your favorite source.

Place them in the “Videos” folder.

Transcoding

Some videos will play fine on GearVR without transcoding them, but many won’t.  Luckily, transcoding is as easy as checking a box and waiting.

Select your videos.

In the inspector, check the “Transcode” box.

Click Apply

Wait (this took 15 minutes for me)

Video Selection Script

To manage our basic menu system, we’ll need two scripts.

Create a “Code” folder.

In the folder create these two scripts.

VideoSelection.cs

GazeInput.cs

Menu Setup

For this sample we’ll create a basic menu out of cubes.  Once it’s working, feel free to pretty them up however you like or replace the cubes with something that fits better to your style.

Create an empty gameobject in the Hierarhcy

Name it “Menu”.

Reset the transform so it’s in the center of your scene.

Right click on the “Menu” object and create a cube as a child.

Re-name your cube to be “Menu Item – yourvideoname” (example I used a bunny video so mine looks like this)

Adjust the transform values so that X & Z are 1.

Add the VideoSelection component to the new Menu Item

Drag your first video clip onto the Video Clip field of the component.

The second Menu Item

To create another menu item, duplicate the existing one (ctrl-d).

Re-name it

Change the X to -1

Swap out the video clip with a different one.

Camera Setup

The last thing we need to do is setup the camera.

Select the “Main Camera” object in your Hierarchy.

Reset the position.

Set the Position Y value to positive 1.

Add the GazeInput component to the “Main Camera”

 

Building to the phone

The project should be good and running now.  The final step is to put it onto a GearVR (or whatever platform you’re using).

If you already have an OSIG file, place that in the Plugins/Android/Assets folder of your project (create this folder structure if it doesn’t exist).

If you don’t know what I’m talking about, go here and follow the instructions (only takes a minute) – https://dashboard.oculus.com/tools/osig-generator/

With the OSIG in place we’re good to go.

Save the scene and open the Build dialog

Add the saved scene.

Click build and run with the phone plugged in and if all goes right, you’ll have your video player up and running.

**** IMPORTANT – Make sure your phone is plugged in via USB and UNLOCKED or the deployment will fail ****

Controls

The controls for this video player are very simple.

Tap the GearVR touchpad to bring up the 2 cubes.

Look at the cube you want to play from and tap again.  The video will start playing.

Just tap again to bring the menu (cubes) up again.

 

Conclusions & Extensions

This is not the prettiest video player, but should give you a good idea how to get started.  Once you get it working, the first thing I’d recommend doing is making the ‘menu’ a whole lot prettier, adding some text to show what the video names are, or some video preview on the items.

Overall though, the new video player functionality, along with the included Oculus SDK makes it really easy to get going with your own video player now.  I’m excited to see all the variations people build, and may end up building a more full featured one soon myself.

  • Pingback: Building an interactive 360 Video player for Mobile / GearVR - VRPOV()

  • Андрей

    Hi! Please can you help me?
    I in first time open Unity nad your tutorial
    https://unity3d.college/2017/05/15/building-an-interactive-mobile-360-video-player-gearvr/
    and i cant add VideoSelection component to the new Menu Item
    When y try drag&drop i see this
    https://scontent.fhen1-1.fna.fbcdn.net/v/t35.0-12/18519382_468149956867708_538603857_o.png?oh=fe04621961d8fc423e52fb0df7e8a775&oe=591EBC31

  • Pingback: 360 Video in Unity 5.6 - Unity3D.College()

  • Jesper Jensen

    Hi Jason,

    Thanks for a great post. I got a 360-video app up and running and I’m a Unity novice.

    One question: Most of the videos I wanted to upload already feature text. Placing the video in an inverted sphere thus creates an unfortunate problem – the texts are also inverted. Do you see any way to fix it?
    Disclaimer: I’m running the app as a Cardboard app atm. Don’t see how that should change anything though.

    Thanks again!

    • I don’t know of any clean solution other than just ripping the text out of the source video and popping up a text item ‘in-game’.

      Not sure how hard it is to remove text from a video, but I’d bet there’s some tool that does it out there.

    • JW

      I think the only option is to strip the text from the source video and maybe re-add it as a worldspace UI text object (ideally using textmeshpro).

      I’m not sure how you’d remove it from the source, but I’d guess there’s some tool out there that has the capabilities.

      • Jesper Jensen

        Thanks for the answer. I doubt it can be removed actually, it’s baked into the video file. But I can live with it.
        The audio problem is more distressing. Yes, I can play normal sounds in the built version.

        Just tried writing an audio selection script based of the video selection script, and using it in the same way (attaching it as a script to the cube) Did not work either.

        Code could easily be the problem though, I’m new to this:

        using UnityEngine;

        using UnityEngine.SceneManagement;

        using UnityEngine.Video;

        public class AudioSelection : MonoBehaviour

        {

        [SerializeField]

        private AudioClip audioClip;

        private AudioSource audioSource;

        private void Start()

        {

        audioSource = FindObjectOfType();

        }

        private void OnTriggerEnter(Collider collider)

        {

        StartClipIfNotAlreadyPlaying();

        }

        public void StartClipIfNotAlreadyPlaying()

        {

        if (audioSource.clip != audioClip)

        {

        audioSource.clip = audioClip;

        audioSource.Play();

        }

        }

        }

  • Jesper Jensen

    Oh and Jason, I have one more issue – the sound is not playing in the built app. Any thoughts on why?

    • JW

      Interesting. I’m not sure what the cause may be. Can you play normal sounds on the built version? If you just add a looping audio source to a scene, does that work?