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",
{
    inputType: "TYPE_STEREO_OVER_UNDER"
});

Please note that the plugin doesn't work in the browser, you have to run your app on a real device.

Sample app

We created a sample app to help you getting started using the plugin. You can find the source code on GitHub.

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

options is an array that can contains the following keys:

inputType
inputFormat
startDisplayMode

inputType values:

"TYPE_MONO" (default)
"TYPE_STEREO_OVER_UNDER"

inputFormat values:

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

startDisplayMode values:

"DISPLAY_MODE_FULLSCREEN" (default)
"DISPLAY_MODE_VR"

Examples

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

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

Play Video From App Folder

window.VrView.playVideoFromAppFolder(videoPath, options);

Examples

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

Show Photo

window.VrView.showPhoto(photoUrl, options);

options is an array that can contains the following keys:

inputType
startDisplayMode

inputType values:

"TYPE_MONO" (default)
"TYPE_STEREO_OVER_UNDER"

startDisplayMode values:

"DISPLAY_MODE_FULLSCREEN" (default)
"DISPLAY_MODE_VR"

Examples

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

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

Show Photo From App Folder

window.VrView.showPhotoFromAppFolder(photoPath, options);

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:

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

Migrating from plugin version 1

Migrating your existing code from version 1 to version 2 is very easy. Here's some examples:

Plugin version 1:

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

Plugin version 2:

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

Plugin version 1:

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

Plugin version 2:

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

You can find the documentation for plugin version 1 here.

Leave a review!

If you enjoy using this plugin please leave a review on the store and don't forget to follow us.