Serious problems with Barcode Scanner

[Roger]

I’m using this code snippet from Monaca’s docs:

function scanBarcode() {
            window.plugins.barcodeScanner.scan( function(result) {
                    alert("We got a barcode\n" +
                              "Result: " + result.text + "\n" +
                              "Format: " + result.format + "\n" +
                              "Cancelled: " + result.cancelled);
                }, function(error) {
                    alert("Scanning failed: " + error);
                }
            );

        }

On iOS 9.3 it correctly accesses the camera, and the overlay is the usual in Cordova Barcode plugin, currently on 6.0.1. However the callbacks do not work, and on top of that the cancel button crashes Monaca App on iOS. I have tried with both the Cordova and the Monaca plugin activated separately in plugin settings, to no avail. Remotely and locally.

I’m pretty new to Cordova, but I’m already impressed with Onsen though and jumped right into Monaca for it. I would love to be able to fix this so I don’t have to revert to more basic setups using PhoneGap or bare Cordova, because I’m really enjoying the ecosystem so far and will consider getting a paid subscription if works out fine.

[munsterlander]

@Roger I have been using the plugin without issue. Here is the code that I run:

function scanBarcode(){
    cordova.plugins.barcodeScanner.scan(
      function (result) {
          document.getElementById('qrText').value = result.text;
/*          alert("We got a barcode\n" +
                "Result: " + result.text + "\n" +
                "Format: " + result.format + "\n" +
                "Cancelled: " + result.cancelled);*/
      }, 
      function (error) {
          alert("Scanning failed: " + error);
      }
   );
}

The thing that is different, that I see, is the call to the plugin. I use cordova and not window. I am using this plugin: https://github.com/phonegap/phonegap-plugin-barcodescanner

[Roger]

I’ve tried that to as per the official github doc for the plugin. But it doesn’t seem to work.

On the desktop it does repeatedly say that the cordova object i not defined, so I’m guessing it’s maybe an error on my side while configuring. Cordova CLI gives no apparent error, except it complains about the cordova-ios and cordova-android versions.

 Using this version of Cordova with older version of cordova-android is being deprecated. Consider upgrading to cordova-android@5.0.0 or newer.
 Using this version of Cordova with older version of cordova-ios is being deprecated. Consider upgrading to cordova-ios@4.0.0 or newer.
Error: The provided path "/XXX/XXX/XXX/XXX/app/platforms/ios" is not a Cordova iOS project.

I created this app using monaca CLI, so I guess it’s including older cordova versions or something. However, adroid sdk and xcode are fresh downloads, so that shouldn’t be the issue here.

[munsterlander]

@Roger It won’t work on the desktop because the plugins can only run in the mobile OS where cordova is working. Also, the Monaca Debugger won’t load additional plugins, so Monaca has an option for a custom debugger which loads the additional plugins. Try building your app with that and see if that solves it, which it should, unless there has been an iOS update that is crashing the plugin.

https://docs.monaca.io/en/manual/debugger/installation/debugger_ios/#custom-debugger-ios

[Roger]

Thanks @munsterlander, but that won’t work for me. These are my first steps with Cordova and I like the simplicity the debuggers give me in terms of real time refresh and so on. So building the app every step of the way simply won’t do it. For now, at least.

Actually I’ve got it working just by recreating the project with Cordova CLI, loading Onsen manually (I’m also not versed in node and npm as much either tbh) and firing it up on PhoneGap. And it worked, just like that! Something in Monaca must be different than Cordova that I’m obviously not aware of.

–

Ok, now my setup is fine, both iOS and Android are styling beautifully. But now I would love to integrate Vue into the equation. I’ve threaded a lot this summer with v2, so for this little app I’m building it would be a great asset, and I know it would combine brilliantly for future works. I could go with React, but I’m really loving where Vue is going this new version and I’d love to see it managing Onsen’s components.

Now I’ve seen there’s already a module that connects both, but then again all docs are refering to Monaca. And I don’t really know how much of that can or should be applied to a vanilla Cordova setup without messing with the app’s libraries and filesystem.

I’ve put the Vue app into the onDeviceReady event and it fires up, but it can’t seem to agree with Onsen’s DOM. Do you know of any documentation more Cordova based that could get the job done? I don’t mind getting my hands dirty, but Monaca is sadly not going to work for me right now.

Edit: Thanks a lot for your time, by the way. I really appreciate what you do for the newbs like me.

[munsterlander]

@Roger The custom debugger is a one time deal. It just includes the plugins you need so you can then debug.

Edit: Onsen is just a UI framework and the documentation will work for whatever setup you are looking for.

Monaca is a backend process for app development. It makes using Cordova super simple. I do highly recommend them both and they are both independent of each other.

Edit 2: One more thing, I really can’t recommend the total package enough. Also, thanks for the compliment!

[Roger]

@munsterlander And I really enjoyed the Monaca debug app, it’s really useful compared to Phonegap’s. But it didn’t seem to work with that plugin (well, it kind of did, but not really after all).

Where should I be declaring the Vue app for it to work with Onsen? Maybe Onsen hasn’t completely initialised yet, and that’s what is messing with Vue.

I can’t make much sense from this anyway:
https://onsen.io/blog/preview-vue-support-onsen-ui/

[munsterlander]

@Roger Two things:

1. Debugger first, because if I can get you to use it, I swear you will love it. All you need to do is build the custom debugger after you have your plugins added to your project. Then you build it. It behaves the exact same as the debugger you have used except now it has those plugins. You only need to do it once (unless you add new plugins) and you get the live sync, refresh, and inspector that makes Monaca awesome!

2. Vue.JS integration is very much in its infant stage. I know some of the Onsen developers really liked it (in fact, they turned me onto it and it is now one of my favs and I hate frameworks! :bowtie: ) I would highly recommend to not build a production project (at this time - @Fran-Diox, @argelius if the definitions will remain the same, I will remove this statement.) using the Vue integrations of Onsen. They are still developing it and I would believe that things will change down the road. Having said that, I have used Vue.JS quite successfully without the Onsen integration - just using it like Vue.JS documentation states.

One final note and I do like to reiterate for folks, I am in no way connected / employed / paid by Asial (parent company of Monaca and Onsen), but when you use Monaca with Onsen, you can create amazing apps with minimal headache. For Onsen, it is in its near final stage for release. This sometimes causes complications for development, but having personally met the team behind all of these products, I can 100% say they are working day and night to make this the best product ever. This platform will dethrone Ionic. I said it first! :open_mouth:

[Roger]

@munsterlander

So you only need to build once? Ok, now that’s a game-changer. It didn’t make much sense any other way, but used to just throw the folder into Cordova or PhoneGap it seemed a bit cumbersome, tbh. But I can deal with building once and coding later.

As for Vue… Yeah, you’re probably right. I’m too excited, but Vue 2 is on RC, and I want to make it work with Onsen2 Beta… Who am I kidding, I am a daydreamer. And a newbie, who barely knows what he’s doing. I’ll probably stick with React for a while until the dust settles.

Thanks for the insights, much appreciated!

FWIW they should employ you for tier 1 support. Just saying… :wink:

[munsterlander]

@Roger Thanks for the kind words. I would say that if you don’t mind recoding some things and tinkering / debugging, then move forward with the integration so we can help identify bugs that they can fix. At this time, I would not rely on it for a production release app.

[Roger]

@munsterlander
So… on a fresh app I got the BarcodeScanner plugin working on iOS 9 and Android 4.4. The app is working and we’re ready for testing! Monaca has been a breeze, once I got the gist of it.

But, sadly, Android 6 is nagging about permissions for the camera as I fire the scanner.

I have run through the usual suspects:

• https://github.com/phonegap/phonegap-plugin-barcodescanner/issues/139
  Here they suggested forcing SDK22 in AndroidManifest (which I did), however, since Monaca doesn’t use that anymore this hasn’t helped. Tweaking config.xml using <config-file> crashed the debugger. Maybe there was something wrong, but whatever.
• I’ve tried https://github.com/dpa99c/cordova-diagnostic-plugin#requestcameraauthorization, but that did nothing as it didn’t even load. Note that I uploaded and built it using Monaca’s cloud, to have the plugin enabled and included. However the debugger warns that it’s not. Weird. At this point, local build fails, too.

I’m not really sure about what I’m doing wrong nor what I should be doing. We’re using the free plan for now, mind you.

p-schuler created this issue in phonegap/phonegap-plugin-barcodescanner

closed Problem with Android 6.0.1 #139