Cordova / ionic VR plugin

Photo 360 Video 360 Player with Cardboard

• Created: 14/08/2017
• By: TangoDev
• Version: 1.2
• Email: support@tangodev.it

What's this plugin for?

The goal of this plugin is to provide an easy way to play 360 videos and 360 photos in a Cordova based app, with native performances. The main features of the plugin are:

• Supports Fullscreen mode and Cardboard mode for both videos and photos.
• Supports playing both local files and remote resources (online).
• Supports mono or stereo format for both photos and videos.
• Supports Android 4.4 or greater and iOS 8.0 or greater.
• Currently supports only smartphones, not tablets.
• Based on Google VR view native library.

Quick start

To use this plugin in your Cordova app just install it in the usual way (see the Requirements and Installation steps for further info):

cordova plugin add PATH_TO_PLUGIN/cordova-plugin-vr-view

Once that the plugin is installed you can use all the methods listed in the API section. For example to play a remote 360 video just add:

window.VrView.playVideo("https://d2v9y0dukr6mq2.cloudfront.net/video/preview/GTYSdDW/360-video-of-beach-and-pier_H5e_Jtfa__WM.mp4");

To show a remote 360 photo:

window.VrView.showPhoto("https://storage.googleapis.com/vrview/examples/coral.jpg", "TYPE_STEREO_OVER_UNDER");

Preview

Fullscreen mode

Cardboard mode

Requirements

This plugin requires Cordova version 6.5.0 or greater.

iOS platform

To correctly install and run this plugin for iOS platform you need to install Cocoapods (https://cocoapods.org) on your Mac. To install Cocoapods you have to run the command:

$ sudo gem install cocoapods

Refer to the Cocoapods site for the complete installation instruction. After the plugin installation to run the iOS Xcode project you need to open the .xcworkspace instead of the .xcodeproj in your platform/ios folder.

Finally, before installing the plugin from your project root run:

npm install xml2js

Installation

To install the plugin just run the usual command:

ionic plugin add PATH_TO_PLUGIN/cordova-plugin-vr-view

or

ionic cordova plugin add PATH_TO_PLUGIN/cordova-plugin-vr-view

or

cordova plugin add PATH_TO_PLUGIN/cordova-plugin-vr-view

If during the installation process you get a conflict error, remove the plugin from the project and re-run the instruction above adding "--force" flag:

cordova plugin remove cordova-plugin-vr-view
cordova plugin add PATH_TO_PLUGIN/cordova-plugin-vr-view --force

API

Play Video

window.VrView.playVideo(videoUrl, inputType, inputFormat);

InputType values:

"TYPE_MONO" (default)
"TYPE_STEREO_OVER_UNDER"

InputFormat values:

"FORMAT_DEFAULT" (default)
"FORMAT_HLS"
"FORMAT_DASH"

Examples

window.VrView.playVideo("https://d2v9y0dukr6mq2.cloudfront.net/video/preview/GTYSdDW/360-video-of-beach-and-pier_H5e_Jtfa__WM.mp4", "TYPE_MONO", "FORMAT_DEFAULT");

window.VrView.playVideo("https://d2v9y0dukr6mq2.cloudfront.net/video/preview/GTYSdDW/360-video-of-beach-and-pier_H5e_Jtfa__WM.mp4");

Play Video From App Folder

window.VrView.playVideoFromAppFolder(videoPath, inputType, inputFormat);

• VideoPath parameter must be relative to the www folder of your app.
• InputType and InputFormat parameters are in the same format as in the playVideo method.

Examples

window.VrView.playVideoFromAppFolder("media/videos/sample_360_video.mp4");

Show Photo

window.VrView.showPhoto(photoUrl, inputType);

InputType values:

"TYPE_MONO" (default)
"TYPE_STEREO_OVER_UNDER"

Examples

window.VrView.showPhoto("https://storage.googleapis.com/vrview/examples/coral.jpg", "TYPE_STEREO_OVER_UNDER");

window.VrView.showPhoto("https://storage.googleapis.com/vrview/examples/coral.jpg");

Show Photo From App Folder

window.VrView.showPhotoFromAppFolder(photoPath, inputType);

• PhotoPath parameter must be relative to the www folder of your app.
• InputType parameter is in the same format as in the showPhoto method.

Examples

 window.VrView.showPhotoFromAppFolder("media/photos/sample_360_photo.jpg");

Is Device Supported

 window.VrView.isDeviceSupported(callback);

The callback function will receive as a parameter:

• 1 if the device is supported
• 0 if the device is not supported

The method will return 0 only if it's running on Android version < 4.4 (KITKAT)

Examples

window.VrView.isDeviceSupported(function(isSupported) {
    if(isSupported == 1) {
        // VrView is supported
    }
});

TypeScript support

If you are using TypeScript, to avoid compilation errors just replace:

window.VrView

with

window['VrView']

Supported platforms

• Android 4.4 or greater
• iOS 8.0 or greater