Calling Pdf417 phonegap/cordova plugin in Ionic

Question

I'm having trouble successfully calling the Pdf417 phonegap/cordova plugin scan function in demo mode within an Ionic application. I'm testing the plugin with Ionic View on iOS.

Here is a linked Github repository containing a simplified version of the application with just one state and controller.

Unfortunately I'm completely confused as to why this is not working when I test it. I get an error saying 'cordova is not defined' in the browser, which I would expect because cordova plugins should 404 in browser, but it's not working in Ionic View either.

I've installed the plugin successfully with 'cordova plugin add (location of pdf417 git repo') prior to attempting to make this work.

Any help would be greatly appreciated. I don't have much experience so I may be on the wrong track in general, and sorry in advance if I am. Any guidance would at all would be helpful. If I'm unclear with anything I'll gladly elaborate. I'm sure I may have missed some needed information.

Here is my app.js from the application:

angular.module('app', ['ionic'])
/**
* RUN
*/

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

  });
})

/**
* CONTROLLERS
*/
//Workflow Controller
.controller('workflowCtrl', ['$scope', '$ionicPlatform', '$ionicPopup',
function($scope, $ionicPlatform, $ionicPopup) {
  $ionicPlatform.ready(function() {
    //***PDF417 SCANNER***
    function hex2a(hex) {
        var str = '';
        for (var i = 0; i < hex.length; i += 2) {
            str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
        }
        return str;
    }
    var types = ["PDF417", "QR Code"];
    var options = {
        beep : true,  // Beep on
        noDialog : true,
        uncertain : false, //Recommended
        quietZone : false, //Recommended
        highRes : false, //Recommended
        inverseScanning: false,
        frontFace : false
    };
    var licenseiOs = null;
    var licenseAndroid = null;
    $scope.barcodeResult;
    $scope.fields;
    $scope.scan = function() {
      $ionicPopup.alert({
        title:'Scan Button Clicks',
      });
      console.log('Scan Button Clicks');
      cordova.plugins.pdf417Scanner.scan(
        // Register the callback handler
        function callback(scanningResult) {
          // handle cancelled scanning
          if (scanningResult.cancelled == true) {
            console.log('Scanner cancelled');
            $scope.warnings = "Cancelled";
            return;
          }
          // Obtain list of recognizer results
          var resultList = scanningResult.resultList;
          // Iterate through all results
          for (var i = 0; i < resultList.length; i++) {
            // Get individual resilt
            var recognizerResult = resultList[i];
            if (recognizerResult.resultType == "Barcode result") {
              // handle Barcode scanning result
              if (typeof(recognizerResult.raw) != "undefined" && recognizerResult.raw != null) {
                var raw = hex2a(recognizerResult.raw);
              }
              $scope.barcodeResult = {
                "Data": recognizerResult.data,
                "Raw": raw,
                "Type": recognizerResult.type
              };
            } else if (recognizerResult.resultType == "USDL result") {
              // handle USDL parsing result
              var fields = recognizerResult.fields;
              $scope.fields = {
                /** Personal information */
                "USDL version": fields[kPPAamvaVersionNumber],
                "Family name": fields[kPPCustomerFamilyName],
                "First name": fields[kPPCustomerFirstName],
                "Date of birth": fields[kPPDateOfBirth],
                "Sex": fields[kPPSex],
                "Eye color": fields[kPPEyeColor],
                "Height": fields[kPPHeight],
                "Street": fields[kPPAddressStreet],
                "City": fields[kPPAddressCity],
                "Jurisdiction": fields[kPPAddressJurisdictionCode],
                "Postal code": fields[kPPAddressPostalCode],
                /** License information */
                "Issue date": fields[kPPDocumentIssueDate],
                "Expiration date": fields[kPPDocumentExpirationDate],
                "Issuer ID": fields[kPPIssuerIdentificationNumber],
                "Jurisdiction version": fields[kPPJurisdictionVersionNumber],
                "Vehicle class": fields[kPPJurisdictionVehicleClass],
                "Restrictions": fields[kPPJurisdictionRestrictionCodes],
                "Endorsments": fields[kPPJurisdictionEndorsementCodes],
                "Customer ID": fields[kPPCustomerIdNumber]
              };
            }
          }
        },
        // Register the error callback
        function errorHandler(err) {
          console.log("error: " + err);
          $scope.warnings = err;
        },
        types, options, licenseiOs, licenseAndroid
      );
    };
    //***END PDF417 SCANNER***
  });
}])

/**
* ROUTING
*/
.config(function($ionicConfigProvider, $stateProvider, $urlRouterProvider)
{

  $ionicConfigProvider.tabs.position('bottom');
  $ionicConfigProvider.tabs.style('striped');
  $ionicConfigProvider.navBar.alignTitle('center');

  $urlRouterProvider.otherwise('/tab/workflow');

  $stateProvider
  // setup an abstract state for the tabs directive
    .state('tab', {
      url: '/tab',
      abstract: true,
      templateUrl: 'partials/tab.html'
    })
  // Each tab has its own nav history stack:
    .state('tab.workflow', {
      url: '/workflow',
      views: {
        'tab-workflow': {
          templateUrl: 'partials/tab-workflow.html',
          controller: 'workflowCtrl'
        }
      }
    })
});

Also, here is my system log when I click on the button to start up pdf417 with 'ionic emulate ios' to run the simulator.

THREAD WARNING: [‘Pdf416Scanner’] took ’12.760742’ ms.
Plugin should use a background thread.

UPDATE: This error is expected as the peripheral is not available in the emulator, although I still have no function in when testing in ionic view (currently with iOS).

Answer 1

The answer to you your problem is very simple: Ionic View only supports a limited number of plugins (at the moment) and your is not in the list.

It started off supporting even less but more have been added.

Here is a relevant link: http://docs.ionic.io/v1.0/docs/view-usage

I would suggest deploying to a device via USB.