In this codelab, we will walk you through the various ways of displaying video in Daydream. You will also create a simple UI that will allow you to control the playing video.

What you'll learn

Tell us a little about yourself

How will you use this codelab?

Only read through it Read it and complete the exercises

How would you rate your experience with building Unity applications?

Never tried Novice Intermediate Proficient

How would you rate your experience with Google Daydream?

Never tried Novice Intermediate Proficient

How would you rate your experience writing code?

Never tried Novice Intermediate Proficient

Hardware you'll need

Software you'll need

Enable Android USB Debugging

In order to run samples, you'll need to enable debugging over USB on your device. To do so:

  1. Go to Settings
  2. Go to About phone (usually at the bottom)
  3. Tap Build number (usually at the bottom) seven times. You should see a toast saying you are now a developer.
  4. Return to the previous screen to find Developer options at the bottom.
  5. From the Developer options menu, find USB debugging and turn it on.
  6. When you connect your phone to your development platform, you will need to authenticate debugging from the phone. Allowing this will enable your machine to control your device.

Download The Google VR SDK for Unity

You will need this SDK to enable Daydream development in Unity. To do so, download it as a .unitypackage to your computer.

Download the latest SDK release here

Starter Project

We've also provided a .unitypackage to help you check your work along the way. You can download it from GitHub.

Get the project

You can either download the starter project to your computer...

Download Project .unitypackage

...or clone the GitHub repository from the command line.

git clone https://github.com/googlecodelabs/daydream-video-ui.git

To get started, we'll need to create a new project from scratch. Go ahead a launch Unity.

  1. After unity boots up, you will be greeted with a welcome dialog. Click the New button at the top to setup a new project.
  2. Set the Project name to "daydream-video-ui"
  3. You can set the Location to whatever you prefer.

If this is your first time using Unity, or you are still a beginner, let's walk through some important parts of Unity.

Using the Default Layout

First off let's use the default layout for the editor. At the top right of the editor, you will see several drop downs. Click the Layout dropdown and select Default. This will arrange the editor windows for you.

Unity's Windows

In Unity, there's several windows you should be aware of. Feel free to explore the provided links, but don't worry if it feels like a lot, we'll walk you through some of the first time steps.

Building for Android

First thing we need to do is configure Unity to build the project for Android

  1. Click on File -> Build Settings
  2. Change the target platform by selecting Android under the Platform menu.
  3. Click on Switch Platform.
  4. If everything was setup correctly, it will look like this (note the Unity symbol to the right of Android).

Configuring the Player

  1. Click on Player Settings... at the bottom of the Build Settings window. It will update the Inspector window in the right panel with the PlayerSettings.
  2. In the Inspector window, expand the Other Settings.

  1. Check the box for Virtual Reality Supported.
  2. Click on the + button and select Daydream SDK.
  3. Set the Package Name attribute to "com.example.daydream.video.ui"
  4. Finally set the Minimum API Level to 24 or greater.

Importing the Google VR SDK

If you haven't done so already, grab the the latest version of the Google VR SDK for unity. The latest .unitypackage is available to download from GitHub here.

  1. Open the .unitypackage from Windows Explorer or MacOS Finder.
  2. Unity will extract the package and prepare it's files for import. You'll get a confirmation dialog first that list all the files. Click Import to proceed.

  1. After the import operation, you will now see a GoogleVR option appear in the system Menu.

Importing the GVRVideoPlayer package

Within the Google VR SDK, there will be another .unitypackage used just for video.

  1. In the Project window, type "GVRVideoPlayer" in the search bar.
  2. Double click the .unitypackage file to start the import process.

  1. You'll again see a list of files, Click Import to proceed.

Importing the Codelab Project

Now we'll repeat the process for the provided Codelab project. Importing this project into Unity will set up the editor with the proper setting and include some assets we'll use later on in the Codelab. If you haven't done so already, grab the .unitypackage from GitHub here.

  1. Open the .unitypackage from Windows Explorer or MacOS Finder.
  2. Click Import to proceed.

Open the starter scene

  1. Now that we've imported all the assets, we'll setup our main scene. In the Project Window, select the Scene folder
  2. Double click the Starter scene to open it. You can use the zoom slider at the bottom right to switch between icons and a list view of the assets in the folder.

  1. In the Hierarchy window, you should just have the Main Scene with an Environment Object and a Main Camera.

The scene provided places the player on an icy island. The Game view should look like this, which will be the perspective of the player when it is run on the headset.

The Arm Model

When using Daydream, it's best to set up an arm model to mimic where the user's hand is. An arm model is a mathematical model for approximating the location of the user's hand in virtual space. The Daydream controller only has rotational values, but we can use that in combination with the headset's information to create an accurate estimate of where the user's hand is.

Working with Prefabs

In Unity, a Prefab is a form of a template. You can create prefabs and then re-use them multiple times in a scene without having to create them over and over again. Through the course of this Codelab, we will provide some prefabs already made for you to use, and walk through the construction of one later on.

Using the SDK Prefabs

In order to do this, there are some foundational prefabs that are needed in order to set up a Daydream Arm Model.

You can read more about the Daydream controller and the provided prefabs here and here. We'll add them to the scene now.

Adding the Prefabs to the Scene

  1. In the Project window, type "t:prefab GVR" in the search bar, which will find all prefabs with the phrase "GVR".
  2. If you see a lot of blue cubes and can't see the names, use the zoom slider to make them larger, or shrink them down to a list.
  3. Select the four prefabs we are using.

  1. Drag and drop them on the Hierarchy window. Don't worry about order, it is not important in this context. In the end your hierarchy will look something like this.

Setup the Player

When creating Daydream applications, you'll want to have a Player GameObject in every scene. The Player will consist of the two elements that the user will use to interact with the scene: the camera and the controller. The camera will be used to position the viewpoint of the headset, ie- the root/head. The controller will be a hierarchy that represents the user's arm in the scene.

  1. From the Menu, Choose GameObject -> Create Empty. You will see a new GameObject in the Hierarchy window.

  1. In the Inspector window, rename the object "Player".
  2. Set Position to (0, 1, 0)

  1. In the Hierarchy window, find the Main Camera GameObject
  2. Make the Main Camera GameObject a child of the Player GameObject by dragging onto the Player GameObject. The Player GameObject will be highlighted when it is properly dragged.

  1. In the Hierarchy window, select the Main Camera GameObject

  1. In the Inspector window, set Position to (0, 0, 0)
  2. Set Clipping Planes/Near to 0.01

  1. We also want to make the GvrControllerPointer GameObject a child of player. Drag it onto player as well.

  1. Set it's Position to (0, 0, 0)

Your hierarchy will look like this when you are done:

Now we are ready to build and run our first Daydream APK!

Building

  1. Connect your phone to your computer via USB.
  2. From the menu, select File > Build Settings. In the Build Settings window, click On the Build and Run button at the bottom right.
  3. In the file selection dialog, specify your desired location for the resulting APK file. Unity will build, install, and run the apk on your device.

Running

If you have not yet put your phone in your headset, do so now. Ensure the USB cable stays connected, and that the volume/power buttons are on the top. If you just see a black screen, double check to make sure the device is on!

Controllers

Controllers are a required component of Daydream apps, so if your device does not have a controller paired to it, you will see something like this:

Every Daydream View comes with a remote included. If you don't have access to a Daydream view, you can emulate the remote using the Controller Emulator APK.

Initial Orientation

If everything is going smoothly, you should see a landscape with a controller floating in front of you. Follow the instructions and you should then see your application.

If you don't see anything try pressing and holding the home button at the bottom of the controller. It will recenter your view based on your current orientation. You can hold the home button at anytime to recenter.

Check your Work

After you have calibrated your controller, you will see the Daydream controller being held in your hand.

Open the main scene

If you have ran into any issues, don't fret! We've supplied another scene for this point in the codelab. Even if everything is running smoothly, it's good to use at this point as we've organized the scene a little more.

  1. Now that we've imported all the assets, we'll setup our main scene. In the Project Window, select the Scene folder
  2. Double click the Main scene to open it. You can use the zoom slider at the bottom right to switch between icons and a list view of the assets in the folder.

  1. In the Hierarchy window, your hierarchy should look like this:

First up we'll add a flat video screen object and configure video playback.

Creating the Screen GameObject

First we'll create the geometry for a video screen.

  1. From the Menu, Choose GameObject -> 3D Object -> Quad. There will now be a new Quad GameObject in the Hierarchy window.

  1. In the Inspector window, rename the object "Flat Screen"
  2. Set Position to (0, 5, 12)
  3. Set Scale to (16, 9, 1)

Assigning the Video Material

Next we are going to assign a material to the screen. This is what will be shown while the video is loading.

  1. Under the Mesh Renderer component, set Materials/Element 0 to VideoMono. We are going to assign this field using the Object Picker. To open it, click the small circle next to the field.

  1. You will now see the Object Picker. Similar to the Add Component menu, you can find the object you are looking for by typing it in. Ensure you are in the Assets tab.
  2. Type "Video" to find our material. Hit enter or click it to select it.

  1. Note the updated value of the field.

Adding the GvrVideoPlayerTexture Component

Now that we have a screen object and a loading material, we can add the component that handles the loading/playing of the video, GvrVideoPlayerTexture.

  1. At the bottom of the Inspector window, click the Add Component button
  2. Type in "GvrVideoPlayerTexture" and hit enter or click it to add it

Adding the Auto Play Video Component

Finally, we want to autoplay the video when the application starts.

  1. At the bottom of the Inspector window, click the Add Component button
  2. Type in "Auto Play Video" and hit enter or click it to add it

At this point we have a flat screen ready for playback. All we have to do is setup the video. We'll go through the different types of playback that is offered now.

Now that we have our scene setup, we will start playing some videos. First up are streaming Dash videos. We're going to setup the GvrVideoPlayerTexture component to auto play a dash video over the internet. Generally, GvrVideoPlayerTexture will handle playing most video types, it's just a matter of configuration.

  1. In the Hierarchy window, select the Flat Screen GameObject.

  1. Set Video Type to Dash
  2. Set Video URL to https://storage.googleapis.com/wvmedia/clear/h264/tears/tears_hd.mpd
  3. Set Video Content ID to https://storage.googleapis.com/wvmedia/clear/h264/tears/tears_hd.mpd

Now build and run the application. You should see the streaming video playing automatically on the screen.

If your video is a large one and causes your APK size to be larger than 100MB, you'll need to use Expansion Files to package it. Thankfully, Unity does a lot of the work for us! To work around this limit, the larger video resources can be stored in another file, called an .OBB file. We'll now setup playback for this type of set up.

  1. In the Project window, select the Assets/StreamingAssets folder
  2. Note the file Assets/StreamingAssets/vid_bigbuckbunny.mp4. Unity treats this any directory called StreamingAssets differently when it packages the application.

Set up the player

  1. In the Hierarchy window, select the Flat Screen GameObject.

  1. In the Inspector window, under the GvrVideoPlayerTexture component, set Video Type to Other
  2. Set Video URL to "jar:file://${Application.dataPath}!/assets/vid_bigbuckbunny.mp4" Note that at runtime the ${Application.dataPath} will be replaced with the actual value of Application.dataPath. This video is a stereo 3D video, so we'll need to change the Flag Screen's rendering material from VideoMono to VideoStereo too.
  3. Clear Video Content ID.

Updating Publishing Settings

Finally, we must update how Unity packages the application.

First thing we need to do is configure Unity to build the project for Android

  1. Click on File -> Build Settings
  2. Click on Player Settings...

  1. In the Inspector window, expand the Publishing Settings menu at the bottom
  2. Open the player settings and in the "Publishing Settings" Section, check the "Split Application Binary" checkbox. This will create the OBB file when the application is built.

Now build and run the application. When deploying the application locally using Build & Run, the obb file is copied to the correct location automatically. More information about how Unity handles .obb files via the Play Store is available here. You should see the local video playing automatically on the screen.

Sometimes you may need to always have a smaller video present, perhaps for loading screens or logo displays. If you stay under the Play store limit, you can store them in a different location and circumvent the need for OBB files altogether.

Setup the Player

  1. In the Hierarchy window, select the Flat Screen GameObject.

  1. In the Inspector window, under the GvrVideoPlayerTexture component, ensure Video Type is Other
  2. Set Video URL to "asset:///raw/vid_bigbuckbunny.mp4"
  3. Ensure Video Content ID is clear

Move the source video

Now that the component is set up, we need to move the source video to it's new location so it will be accessibly via the "asset:///" path. The easiest location to place mp4 files for playback is in Assets/Plugins/Android/assets. All content in this folder is accessible via the AssetManager in the Android SDK.

  1. In the Project window, right click the Assets/ folder -> Create -> Folder, name the folder "Plugins"
  2. In the Project window, right click the Assets/Plugins/ folder -> Create -> Folder, name the folder "Android"
  3. In the Project window, right click the Assets/Plugins/Android folder -> Create -> Folder.
  4. Name the folder "assets"

  1. Add another folder in the newly created one. Right click the Assets/Plugins/Android/assets folder -> Create -> Folder.
  2. Name the folder "raw"

  1. Now we will move the video. Select the Assets/StreamingAssets folder
  2. Begin to drag the vid_bigbuckbunny asset.
  3. Drop the asset in the Assets/Plugins/Android/assets/raw folder

Now build and run the application. It will seem like it is the exact same video, but how it is treated behind the scenes is completely different!

Now we will illustrates how to playback 360° stereoscopic video. This is done by creating a separate camera for each eye and then using the per-eye video rendering from the video SDK.

Creating the 360 Screen

  1. From the Menu, Choose GameObject -> 3D Object -> Sphere. There will now be a new Sphere GameObject in the Hierarchy window.

  1. In the Inspector window, rename the object "360 Screen"
  2. Set Scale to (12, 12, 12)

  1. In the Mesh Renderer component, set Materials/Element 0 to VideoStereoInside using the Object picker like you did before for the flat screen.

Adding the GvrVideoPlayerTexture Component

Once again, we will add a GvrVideoPlayerTexture component.

  1. At the bottom of the Inspector window, click the Add Component button
  2. Type in "GvrVideoPlayerTexture" and hit enter or click it to add it

  1. Set Video Type to Dash
  2. Set Video URL to https://storage.googleapis.com/daydream-deveng.appspot.com/japan360/dash/japan_day06_eagle2_shot0005-2880px_40000kbps.mpd
  3. Ensure Video Content ID is clear

Adding the Auto Play Video Component

And again, we want to add the autoplay component.

  1. At the bottom of the Inspector window, click the Add Component button
  2. Type in "Auto Play Video" and hit enter or click it to add it

Hiding the other objects

Since it's a 360° video, we want to hide the flat screen and the environment so they don't get in the way of viewing the sphere.

  1. In the Hierarchy window, select the Flat Screen GameObject.

  1. In the Inspector window, disable the Flat Screen GameObject by ensuring the checkbox by it's name is cleared.

  1. Repeat the steps and hide the Environment Object. In the end your Hierarchy should look like this (note the grayed out font for Environment and Flat Screen)

Now build and run the application. You will see a 360° video playing now!

Now we'll add a simple control to play and pause the 360° video. First up when need to add the Unity objects for the UI.

Adding the Canvas

  1. From the Menu, Choose GameObject -> UI -> Canvas. There will now be a new Canvas GameObject in the Hierarchy window. Canvas is the top level class that any UI in Unity is needed.

  1. In the Inspector window, rename the GameObject "Main Menu"
  2. Under the Canvas component, change Render Mode to World Space.
  3. Under the Rect Transform, Set (Pos X, Pos Y, Pos Z) to (0, 0.5, 5)
  4. Set (Width, Height) to (200, 75)
  5. Set Scale to (0.01, 0.01, 1)

Adding a Layout

Next we'll add a layout, which will automatically position the children of the UI. We'll add buttons later, and this component will arrange them when they are added.

  1. At the bottom of the Inspector window, click the Add Component button
  2. Type in "Horizontal Layout Group" and hit enter or click it to add it

  1. Under the new added component, set Spacing to 15
  2. Set Child Alignment to "Middle Center"

Setting up the Raycaster

We need to remove the default mouse based raycaster from the component and add the Daydream based one, so the UI will respond to the controller events.

  1. Remove the Graphics Raycaster component by clicking the Gear Icon -> Remove Component.

  1. At the bottom of the Inspector window, click the Add Component button
  2. Type in "GVRPointerGraphicRaycaster" and hit enter or click it to add it

Creating a Play Button

Now that we have a canvas, we need to add some buttons to it.

  1. In the Hierarchy window, add a child button object by right clicking on the GameObject Main Menu -> UI -> Button. There will now be a new Button GameObject added as a child to Main Menu.

  1. In the Inspector window, rename the object "Play Button"
  2. Set (Width, Height) to (50, 50)

Replace Label with an Image

  1. We're going to replace the text with an image. In the Hierarchy window, remove the text by right clicking on the GameObject Main Menu/Play Button/Text -> Delete
  2. Add a child RawImage object by right clicking on the GameObject Main Menu/Play Button -> UI -> Raw Image. There will now be a new RawImage GameObject added as a child to Main Menu/Play Button.

  1. In the Inspector window, under the Rect Transform, set (Width, Height) to (50, 50)
  2. Under the Raw Image component, set Material to play using the Object picker.

Creating a Pause Button

We'll now make a second button, but we'll do so by duplicating the play button and changing the image.

  1. In the Hierarchy window, right click and choose Main Menu/Play Button -> Duplicate. There will now be a new Play Button (1) GameObject added as a child to Main Menu.

  1. In the Inspector window, rename the object "Pause Button"

  1. In the Hierarchy window, select the Main Menu/Pause Button/RawImage

  1. In the Inspector window, under the Raw Image component, set Material to pause using the Object picker.

Creating the Main Menu Script

Creating our scripts

Next we need to make some scripts which will allow us to create custom components that will change the behavior of our objects. We'll flesh out the code in these scripts later on.

  1. In the Project window, right click the Assets folder -> Create -> Folder.
  2. Name the folder "Scripts"

  1. Right click again on the Scripts folder -> Create -> C# Script
  2. Name the script "MainMenu"

  1. In the Inspector window, verify your script was created

Attaching the Script to the Main Menu

  1. In the Hierarchy window, select the Main Menu GameObject

  1. At the bottom of the Inspector window, click the Add Component button
  2. Type in "MainMenu" and hit enter or click it to add it

  1. In the MainMenu component, double click the Script field to open up the scripting editor.

Now that you are in the coding editor, you will see an initial class template like so. Next let's flesh out the code!

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class MainMenu : MonoBehaviour {

// Use this for initialization
void Start () {

}

// Update is called once per frame
void Update () {

  }
}

Fleshing out the Script

  1. First thing we need in our script is a reference to our video and our buttons so we can control them from within the component.
public GvrVideoPlayerTexture video;

public GameObject playButton;
public GameObject pauseButton;
  1. Add two handlers for when the buttons are clicked, OnPlayClicked and OnPauseClicked. These methods will enable/disable buttons and play/pause the video.
public void OnPlayClicked() {
  playButton.SetActive(false);
  pauseButton.SetActive(true);
  video.Play();
}

public void OnPauseClicked() {
  playButton.SetActive(true);
  pauseButton.SetActive(false);
  video.Pause();
}

Hooking up the Buttons to Main Menu

Back in Unity, we'll need to setup the component we just scripted.

  1. In the Hierarchy window, select the Main Menu/Play Button GameObject

  1. In Inspector window, we'll add a listener by clicking on the plus button under the On Click () event.
  2. This will add a listener to the event. Next we need to assign the callback object by clicking on the small circle and to open the Object Picker.

  1. This time we are picking an object from the Scene, so ensure the Scene tab is selected.
  2. Type "Main Menu" to find our object in the scene. Hit enter or click it to select it.

  1. Note the updated field in the Inspector window. Add the callback by clicking No Function -> MainMenu -> OnPlayClicked (). In the end your component should look like this.

  1. Repeat these steps to connect the Main Menu/Pause Button to the MainMenu's OnPauseClicked () method.

Setting the Main Menu References

  1. In the Hierarchy window, select the Main Menu GameObject

  1. In Inspector window, under the Main Menu component, set the Video field to 360 Screen using the Object Picker.
  2. Similarly, set the Play Button field to Main Menu/Play Button using the Object Picker. Make sure you use the Scene tab when searching.
  3. Set the Pause Button field to Main Menu/Pause Button using the Object Picker.

Disable the Play Button

Finally, since the video will autoplay when the application starts, we can disable the Play Button

  1. In the Hierarchy window, select the Main Menu/Play Button GameObject.

  1. In the Inspector window, disable the Play Button GameObject by ensuring the checkbox by it's name is cleared.

  1. Note that when the Play Button is disabled, the position of the Pause button changes. This is because of the Horizontal Layout component we added to the Main Menu earlier.

Now build and run the application. Now you will see a button hovering around the 360° video which will pause and play the video accordingly.

You did it! You've finished the codelab and successfully display various types of videos and added a simple UI controller.

Beyond

If you are looking for some more interesting things to do try:

Additionally, if you want to explore the Daydream platform further, check out our documentation here.

Tell us how it went!

Were you able to complete the codelab?

Yes! Yes, with some issues. Nope!

What did you think about the amount of code?

Just Right Too Little Too Much

What did you think about the amount of Unity setup?

Just Right Too Little Too Much

Overall, are you glad you did this codelab?

Yes! No...