Skip to content

Latest commit

 

History

History
133 lines (91 loc) · 6.92 KB

android-360-video.md

File metadata and controls

133 lines (91 loc) · 6.92 KB
Raw

360 Video Playback on Android devices

It is possible to integrate HISPlayer SDK with 360 videos on mobile devices.

Please, download the sample here -> HISPlayer Android 360 Sample (no need to download it if you have received it in the email).

In the case of using Meta Quest or Oculus devices, please go to the following link:

Import HISPlayer 360 Sample

Importing the package is the same as importing other normal packages in Unity. Select the downloaded package and import it.

  • Assets > Import Package > Custom Package > HISPlayer_Android_360_Sample.unitypackage

  • Complete the configuration for Android -> Configure Unity for Android

  • Open the scene Assets/HISPlayerSample/Scenes/HISPlayer360Sample.unity

image

  • Import TextMesh Pro Essential

  • Input the license key through the Inspector Window. StreamController game object -> HISPlayerSample component -> License Key

  • Open File > Build Settings > Add Open Scenes

image

  • Build and Run

To check how to set up the SDK and API usage, please refer to Assets/HISPlayerSample/Scripts/HISPlayerSample.cs and StreamController GameObject in the Editor.

Sample Explanation

The UI components in the sample scene are fully modifiable. The sample is intended to show a comprehensive scene using the HISPlayer SDK to help demonstrate features such as play, pause, seek, etc.

image

How to Render a 360 Video

There are different ways to render a 360 video with Unity, this sample uses the Skybox material.

  • Set the Main Camera Clear Flag field to Skybox.

image

  • Use a Render Texture attach to a Unity Material with the shader Skybox/Panoramic. You can check the following :

    • Assets/HISPlayerSample/Resources/HISPlayer_360_Material.mat
    • Assets/HISPlayerSample/Resources/HISPlayer_360_RenderTexture.renderTexture

image image

  • Open Window > Rendering > Lighting > Environment and attach the Material to the Skybox Material in the Lighting configuration.

image

  • Select Render Mode > Render Texture and attach the previous Render Texture to the StreamController Render Texture field

image

  • Call the FlipTextureVertically API before SetUpPlayer or AddStream functions. Check the Awake function in Assets/HISPlayerSample/Scripts/HISPlayerSample.cs.

image

How to use the Android Gyroscope

The Gyroscope is a typical Android sensor used for different cases. We're using the gyroscope to control the camera movement of the demo. If you are using Oculus devices, this step can be skip, since Oculus controls the camera movement using the headset.

To check how to use the Gyroscope, please refer to Assets/HISPlayerSample/Scripts/GyroscopeController.cs and Main Camera GameObject in the Editor.

HISPlayer 360 Shader for Linear Color Space

If you are using HISPlayer SDK version 3.4.0 and above, you will find HISPlayer360Shader.shader in Packages/com.hisplayer.hisplayersdk/HISPlayer/Scripts/Shaders/.

image

The HISPlayer360Sample uses the default Unity Skybox/Panoramic shader, as explained in the How to Render a 360 Video.

If you use Linear Color Space in the Unity Project Settings > Player Settings > Other Settings > Rendering > Color Space, please change the default shader to HISPlayer360Shader which will improve the video rendering quality by following these steps :

  • Open Assets/HISPlayer360Sample/Resources/RenderTextures/Materials/HISPlayer_360_Material.mat

  • In the Inspector window, change Shader to HISPlayer360Shader

image

  • Make sure you have the following setting of the material:

image

Vertically Inverted Video Issue

If you face an issue where the video is vertically inverted or rendered upside down, please follow 1 of these 2 approaches:

  • Approach 1 (Recommended): Use HISPlayer360Shader.shader and attach it to the material as explained in the previous section. Make sure that the Flip Vertically option is enabled.

image

  • Approach 2: Set FlipTextureVertically of the StreamProperties to true before calling SetUpPlayer() in your project script. This API will flip the texture vertically. This API will work only for Android devices, it will not have effect in the Unity editor. For example: 
    // Flip texture vertically to render the texture correctly for Skybox material.
multiStreamProperties[0].FlipTextureVertically = true;
SetUpPlayer();

Please don't mix both approaches, otherwise the video will be veritcally inverted.