Icon Cordova / ionic VR plugin

Photo 360 Video 360 Player with Cardboard

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:

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

Preview fullscreen mode

Cardboard mode

Preview 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);

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);

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:

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