Using ezAR with Ionic Framework

One of the most popular UI toolkits for creating professional grade hybrid-mobile user interfaces is the Ionic Framework (Ionic). Ionic Framework is free, open-source and well supported by the Ionic team and user community.  In this article I walk through an example project I created using the ezAR videoOverlay and snapshot plugins in an Ionic Framework app. If you want to jump straight to the code see the link at the end of this article.

The project is named ezAR-Ionic and is based on the Ionic blank framework.  If you are new to Ionic or Angular I recommend you check out the tutorials on the Ionic site as I will cover the basic modifications to enable the ezAR videoOverlay's CameraView to be visible within an Ionic app. 

Step-1: Create Ionic project based on blank template

From commandline:

> ionic start ezar-ionic blank

This will create the directory ezar-ionic populated with a simple single page Ionic app.

Step-2: Add the ezAR VideoOverlay plugin which provides the CameraView

Change directory to ezar-ionic then from commandline:

> ionic plugin add pathToEzAR/plugins/com.ezartech.ezar.videoOverlay

Step-3: Initialize and start the videoOverlay CameraView when the Ionic platform is ready

//app.js
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && 
       window.cordova.plugins && 
       window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default 
      //(remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. 
      //It stops the viewport
      // from snapping when text inputs are focused. 
      //Ionic handles this internally for a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

    //add ezar block snippet below
    if (window.ezar) {
      ezar.initializeVideoOverlay(
        function() {
          ezar.getBackCamera().start();
        },
              function(err) {
                  alert('unable to init ezar: ' + err);
              });      
    }
  });
})

Step-4: Modify CSS to enable ezAR videoOverlay CameraView to be visible

By setting the HTML body and the ion-pane elements with a transparent background the ezAR CameraView will be visible below the Cordova WebView component.

/*style.css*/
    body {
        background-color: transparent;
    }

   .pane {
      background-color: transparent;
   }

You can add additional transparency to ionic elements such as headers and footers. See the link to code at bottom of this article which includes a semi-transparent header and footer.

Step-5: Add a platform to the project and build it

From commandline add the platforms you plan to support. Then build the binary app for each platform.

> ionic platform add android
> ionic platform add ios
> ionic build

Step-6: Install and evaluate the effect

Note: ezAR plugins will not perform correctly on virtual devices that lack true camera sensors.

To install your app use your favorite mobile app deployment method. For example I use GapDebug (free) for simple drag-drop app installation and debugging.

Code

The code to my starter ionic project is available here on github. The screenshot above is from the ezar-ionic sample project that also includes the ezAR snapshot.