4 Replies Latest reply on Apr 4, 2016 2:58 PM by hsoehalim

    Newbie need help with barcode scanner plugins

    hsoehalim Level 1

      Hi There,

       

      I'm new to Phonegap and I'm trying to figure out how to use a barcode scanner plugins. I'm using phonegap ver6.0.1 and https://build.phonegap.com to build my app.

      I've tried GitHub - phonegap/phonegap-plugin-barcodescanner: cross-platform BarcodeScanner for Cordova / PhoneGap and I ran into a problem with:

       

      "cordova.plugins.barcodeScanner" being undefined.

       

      Any pointers?

       

      Thanks,

      Harry

        • 1. Re: Newbie need help with barcode scanner plugins
          kerrishotts Adobe Community Professional

          Did you add the plugin to your config.xml file? If not, please do so (PhoneGap Build Documentation). If you did, please share your config.xml file so we can take a look.

           

          Also make sure to wait for the "deviceready" event before attempting to use any plugin. Sharing some of your code where you use the plugin might also help us help you.

          • 2. Re: Newbie need help with barcode scanner plugins
            hsoehalim Level 1

            Hi Kerri,

             

            Here's my config.xml:

            <widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.phonegap.helloworld" version="1.0.0">

              <name>barcode-scanner</name>

              <description>Hello World sample application that responds to the deviceready event.</description>

              <author href="http://phonegap.com" email="support@phonegap.com">PhoneGap Team</author>

              <content src="index.html"/>

              <preference name="permissions" value="none"/>

              <preference name="orientation" value="default"/>

              <preference name="target-device" value="universal"/>

              <preference name="fullscreen" value="true"/>

              <preference name="webviewbounce" value="true"/>

              <preference name="prerendered-icon" value="true"/>

              <preference name="stay-in-webview" value="false"/>

              <preference name="ios-statusbarstyle" value="black-opaque"/>

              <preference name="detect-data-types" value="true"/>

              <preference name="exit-on-suspend" value="false"/>

              <preference name="show-splash-screen-spinner" value="true"/>

              <preference name="auto-hide-splash-screen" value="true"/>

              <preference name="disable-cursor" value="false"/>

              <preference name="android-minSdkVersion" value="14"/>

              <preference name="android-installLocation" value="auto"/>

              <gap:plugin name="org.apache.cordova.battery-status"/>

              <gap:plugin name="org.apache.cordova.camera"/>

              <gap:plugin name="org.apache.cordova.media-capture"/>

              <gap:plugin name="org.apache.cordova.console"/>

              <gap:plugin name="org.apache.cordova.contacts"/>

              <gap:plugin name="org.apache.cordova.device"/>

              <gap:plugin name="org.apache.cordova.device-motion"/>

              <gap:plugin name="org.apache.cordova.device-orientation"/>

              <gap:plugin name="org.apache.cordova.dialogs"/>

              <gap:plugin name="org.apache.cordova.file"/>

              <gap:plugin name="org.apache.cordova.file-transfer"/>

              <gap:plugin name="org.apache.cordova.geolocation"/>

              <gap:plugin name="org.apache.cordova.globalization"/>

              <gap:plugin name="org.apache.cordova.inappbrowser"/>

              <gap:plugin name="org.apache.cordova.media"/>

              <gap:plugin name="org.apache.cordova.network-information"/>

              <gap:plugin name="org.apache.cordova.splashscreen"/>

              <gap:plugin name="org.apache.cordova.vibration"/>

              <icon src="icon.png"/>

              <icon src="www/res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:qualifier="ldpi"/>

              <icon src="www/res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:qualifier="mdpi"/>

              <icon src="www/res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:qualifier="hdpi"/>

              <icon src="www/res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi"/>

              <icon src="www/res/icon/blackberry/icon-80.png" gap:platform="blackberry"/>

              <icon src="www/res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/>

              <icon src="www/res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57"/>

              <icon src="www/res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72"/>

              <icon src="www/res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114"/>

              <icon src="www/res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144"/>

              <icon src="www/res/icon/webos/icon-64.png" gap:platform="webos"/>

              <icon src="www/res/icon/windows-phone/icon-48.png" gap:platform="winphone"/>

              <icon src="www/res/icon/windows-phone/icon-173-tile.png" gap:platform="winphone" gap:role="background"/>

              <gap:splash src="www/res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:qualifier="port-ldpi"/>

              <gap:splash src="www/res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:qualifier="port-mdpi"/>

              <gap:splash src="www/res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:qualifier="port-hdpi"/>

              <gap:splash src="www/res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:qualifier="port-xhdpi"/>

              <gap:splash src="www/res/screen/blackberry/screen-225.png" gap:platform="blackberry"/>

              <gap:splash src="www/res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480"/>

              <gap:splash src="www/res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960"/>

              <gap:splash src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios" width="640" height="1136"/>

              <gap:splash src="www/res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024"/>

              <gap:splash src="www/res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768"/>

              <gap:splash src="www/res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone"/>

              <access origin="*"/>

              <plugin name="cordova-plugin-whitelist" version="1"/>

              <plugin name="com.phonegap.plugins.barcodescanner" spec="2.2.0" source="pgb" />

              <allow-intent href="http://*/*"/>

              <allow-intent href="https://*/*"/>

              <allow-intent href="tel:*"/>

              <allow-intent href="sms:*"/>

              <allow-intent href="mailto:*"/>

              <allow-intent href="geo:*"/>

              <platform name="android">

                <allow-intent href="market:*"/>

              </platform>

              <platform name="ios">

                <allow-intent href="itms:*"/>

                <allow-intent href="itms-apps:*"/>

              </platform>

            </widget>


            and this is what i have in my index.js:

             

            var app = {

                initialize : function () {

                    this.bindEvents ();

                },

             

                bindEvents : function () {

                    document.addEventListener ('deviceready', this.onDeviceReady, false);

                },

             

                onDeviceReady : function () {

                    app.receivedEvent ('deviceready');

                },

             

                receivedEvent : function (id) {

                    var parentElement = document.getElementById (id);

                    var listeningElement = parentElement.querySelector ('.listening');

                    var receivedElement = parentElement.querySelector ('.received');

             

                    listeningElement.setAttribute ('style', 'display:none;');

                    receivedElement.setAttribute ('style', 'display:block;');

             

                    try {

                        var scanner = document.getElementById ('foo');

                        scanner.setAttribute ('href', 'javascript:app.scan();');

             

                    } catch (err) {

                        console.log ('ERROR: ' + err.message);

                    }

                    console.log ('Received Event: ' + id);

                },

             

                scan : function () {

                    try {

                        console.log ('im here ...');

                        console.log (cordova.plugins.barcodeScanner);

                    } catch (err) {

                        console.log ('ERROR: ' + err.message);

                    }

                }

            };


            • 3. Re: Newbie need help with barcode scanner plugins
              kerrishotts Adobe Community Professional

              I see that you're using some old-style plugin tags and sourcing from PGB. I suggest you update, otherwise you're going to get outdated code. For example, the current version of the Barcode Scanner in question is 4.1.0(phonegap-plugin-barcodescanner), but you're installing 2.2.0. Now, perhaps there's a reason you're installing such an old version, but if you can, I'd suggest installing the newest version.

               

              Your plugin tags should look more like this:

               

                <plugin name="cordova-plugin-camera" spec="desired-version" />
                ...
                <plugin name="cordova-plugin-whitelist" spec="1.2.1" />
                <plugin name="phonegap-plugin-barcode-scanner" spec="4.1.0" />
              

               

              See if that makes a difference. (You can be explicit about NPM sourcing -- just use source="npm", but it will occur by default if left off.)

              • 4. Re: Newbie need help with barcode scanner plugins
                hsoehalim Level 1

                Thanks Kerri!

                 

                I was following the setup instruction given here: Get Started

                I think whomever maintain that site needs to update their desktop app (v0.2.3) to use the newer style tags for the default config.xml file.

                 

                I've tried with using <plugin name="phonegap-plugin-barcode-scanner" spec="4.1.0" /> and getting this error message:

                 

                "plugman install --platform ios --project /project --plugin phonegap-plugin-barcode-scanner@4.1.0": Fetching plugin "phonegap-plugin-barcode-scanner@4.1.0" via npm

                Failed to fetch plugin phonegap-plugin-barcode-scanner@4.1.0 via registry.

                Probably this is either a connection problem, or plugin spec is incorrect.

                Check your connection and plugin name/version/URL.

                Error: Registry returned 404 for GET on https://registry.npmjs.org/phonegap-plugin-barcode-scanner

                 

                This however seems to work for me: <plugin name="com.phonegap.plugins.barcodescanner" spec="4.1.0" />

                Also I read somewhere, you can use the PhoneGap app (mobile app) to test barcode scanner. I was able to see it working once I build it using https://build.phonegap.com.

                 

                Cheers,

                Harry