Barcode scanner

[basvdijk]

Plugin Request

Name: barcode-scanner
Package: @capacitor-community/barcode-scanner

Platform(s)

Android, iOS (web would also be great, but not needed at first)

Existing Solutions

• https://github.com/phonegap/phonegap-plugin-barcodescanner (last commit more than a year ago)
• https://www.npmjs.com/package/@johnbraum/capacitor-qrscanner
• https://github.com/DutchConcepts/capacitor-barcode-scanner by @tafelnl

Description

Features which would be great (not in particular order):

• Scanning barcodes of products. Most of the time these are EAN13, EAN8 or UPC codes. QR-codes would be great, but can also added later.
• Custom mask overlay e.g. rectangle mask for horizontal barcodes, square for QR
• Toggle button for turning torch on/off
• Red line helping with barcode alignment
• Beep when barcode is scanned
• Configuration
  • specify single barcode scan or continuous scanning
  • torch on/off by default
  • help text for user e.g. 'scan the product'
  • mask image to use
  • scan sound on/off i.e. beep when barcode is scanned

This plugins allows a variety of solutions think of:

• An app which shows information about a product
• An app which shows price comparison
• An app which scans barcode on tickets for events
• An app which scans barcodes to connect on event
• An app which scans barcodes to get more info in a museum

The milestones of development I could think about are:

• scans barcodes and returns its value, during scanning a message should be displayed like: 'scan the product'
• scans barcodes including QR codes
• allows user to have more control e.g. turn flashlight on/off while scanning
• allows user to provide a barcode scanner overlay mask image / customize look and feel of scanner

Things that could be useful for implementation

iOS

• internal iOS Scanner (supports all types of barcodes)
  • http://www.davidgyoungtech.com/2018/01/24/native-bar-code-scanning-in-ios
  • supported barcodes

Android

• zxing BarcodeScannerView

Mockup

[alexcroox]

Duplication of #6 but provides more detail so I'd vote in favour of keeping this over the bot created #6.

I'm currently using phonegap-plugin-barcodescanner, and a real limitation for me currently is that you have to re-open the scanner manually after each scan, and it's hard to automate reliably. It would be nice to have the ability to keep the scanner open and provide feedback as a code is successfully read (maybe a bar showing the last read data with the ability to discard). That way I can just produce an array of scanned barcodes very quickly instead of having the startup cost of re-initialising the camera every time.

[imhoffd]

@alexcroox I'll close the other proposal in favor of this one.

I know there's a QR scanner plugin for Capacitor, but I haven't personally used it: https://www.npmjs.com/package/@johnbraum/capacitor-qrscanner

@johnbraum Would you care to weigh in on barcode support in your plugin?

[ghost]

@dwieeb Sure I could do that. I was already planning that. Also an option to show a button to toggle the flashlight.

I was thinking about an option object you can pass and set all barcode types & hide/show Flashlight button.

For iOS I use the internal iOS Scanner (supports all types of barcodes) and for Android I am using the zxing BarcodeScannerView, also supports all types of barcodes.

[basvdijk]

@johnbraum Sounds great! The thing I had with the existing barcode scanner for Cordova was that for example the lightbulb icon looked a bit outdated. Further the GUI was fine with with red scan line and the helping text for the users.

[basvdijk]

@johnbraum I've added a feature overview, made a summary of the things mentioned in issue #6 and added a mockup

[imhoffd]

@johnbraum I used your plugin on this barcode and it didn't seem to come back with a response for iOS. On Android, it worked great. QR codes also worked great on both platforms.

Would you be willing to move your plugin to this Capacitor Community org on Github? You can learn more here.

[tafelnl]

@dwieeb

I have made a (qr) barcode scanner plugin for Capacitor: https://github.com/DutchConcepts/capacitor-barcode-scanner

It is heavily influenced by https://github.com/bitpay/cordova-plugin-qrscanner with the following differences:

• more modern
• refactored, simplified code
• specifically made for Capacitor
• better maintained (bitpay completely abandoned their plugin)

Because of the fact that I do not have infinite time on my hands, support for switching cameras and toggling flashlights is lacking. But I am sure that me or someone else will implement this sometime soon. Therefore, I think, for most people https://github.com/DutchConcepts/capacitor-barcode-scanner will be the better choice of the two. And if Capacitor decides to make it a community plugin, this will be a no-brainer.

[basvdijk]

@tafelnl great! I've added your plugin to the "existing solutions" of my initial post.

[ashevchenko0309]

@tafelnl Real thanks for your solution!
I'm real noob in Java for android, and don't understand all of things about this, but, can you help me integrate Zbar instead of Zxing? I'm tried integrate zbar.wasm https://github.com/samsam2310/zbar.wasm into to my project and it works, but not on all devices, and I saw that zbar, decode barcodes and qr faster than zxing. If you help me, I'll appreciate it! A lot of thanks for any information!

[tafelnl]

@ashevchenko0309

I do not quite understand what you are trying to do? Are you trying to replace ZXing in Java for Android with ZBar? I do not recommend to do so, because ZBar is very old and not maintained any more.

If you are trying to make a web implementation with WebAssembly, I am sorry, I can not help you with that, as I do not have any experience with that.

[ashevchenko0309]

@tafelnl Thank for reply! Ok, thanks for recommendations. Do you plan add scan area to your plugin?

[tafelnl]

@ashevchenko0309 You will have to add your own scan area design with HTML/CSS. I have added an example to the repo here: https://github.com/DutchConcepts/capacitor-barcode-scanner/tree/main/examples/scan-area-layout

[capc0]

I know this is the capacitor community project, but I was wondering if it is possible to use e.g. @tafelnl plugin also in cordova based projects? Since all cordova qr scanner projects seem to be abonded, I am looking for a maintained solution.

[tafelnl]

@capc0

I am not aware of a plugin that transforms Capacitor plugins to Cordova plugins.
The other way around however, is supported by Capacitor.
I do not know how big your project is / projects are, but it might pay off to migrate your apps to use Capacitor instead. You can find more about using Cordova plugins in Capacitor here: https://capacitorjs.com/docs/cordova/using-cordova-plugins
Here a list of supported plugins: https://ionicframework.com/docs/native
And a list of incompatible plugins (mostly because there is a better alternative): https://capacitorjs.com/docs/cordova/known-incompatible-plugins

[therjtkumar]

much needed solution for capacitor... all other options are now not maintained or abandoned by developers... Hope ionic team will do something for this.

[therjtkumar]

@dwieeb Sure I could do that. I was already planning that. Also an option to show a button to toggle the flashlight.

I was thinking about an option object you can pass and set all barcode types & hide/show Flashlight button.

For iOS I use the internal iOS Scanner (supports all types of barcodes) and for Android I am using the zxing BarcodeScannerView, also supports all types of barcodes.

Hope this is in your queue.

[tafelnl]

@oke007 check out my plugin at https://github.com/DutchConcepts/capacitor-barcode-scanner

It supports a lot of types of barcodes. Flashlight support will probably be implemented soon too.

[imhoffd]

@tafelnl Are you on the Capacitor contributor slack?

[tafelnl]

@dwieeb Yes, I am. You can find me by username tafel

[cmartinezone]

@oke007 check out my plugin at https://github.com/DutchConcepts/capacitor-barcode-scanner

It supports a lot of types of barcodes. Flashlight support will probably be implemented soon too.

I am using your plugin and it works amazing, looking forward to the flashlight support.

[tellybrown]

I think it would make sense to add the generator side this as well. I have been using https://github.com/Cordobo/angularx-qrcode but is lacking angular 11 support. Not sure if there are barcode generators.

[tafelnl]

@tellybrown There are several good QR generator libraries for JavaScript as well:

• https://github.com/davidshimjs/qrcodejs
• https://github.com/soldair/node-qrcode
• https://github.com/kciter/qart.js
• https://github.com/kazuhikoarase/qrcode-generator
• https://github.com/SumiMakito/Awesome-qr.js
• https://github.com/fengyuanchen/vue-qrcode (for Vue.js only)
• https://github.com/kozakdenys/qr-code-styling (not very popular, but has some nice styling options)

[florianmonfort]

Hi all,

Just to let you all know for QR Code Scanner specifically (no plans for Bar code scanning yet) we will have a new repository available and we are working on it here:

https://github.com/diningcity-group/capacitor-qr-scanner

It's only the beginning and there is only iOS code for now, but we plan on adding Android very soon and we plan on maintaining it long term. Will update this post when it's more ready for production use.

[mesqueeb]

@tafelnl I've used your barcode scanner for the past 3 months with great success.
Are you ever planning on hosting it as official @capacitor-community/barcode-scanner as opposed to @dutchconcepts/capacitor-barcode-scanner ?

[tafelnl]

@mesqueeb Good to hear! It is already in the community github account. With the next release I will also publish it in the community npm account. ETA 22nd of February!

[SalahAdDin]

Hi all,

Just to let you all know for QR Code Scanner specifically (no plans for Bar code scanning yet) we will have a new repository available and we are working on it here:

https://github.com/diningcity-group/capacitor-qr-scanner

It's only the beginning and there is only iOS code for now, but we plan on adding Android very soon and we plan on maintaining it long term. Will update this post when it's more ready for production use.

Can you provide a video demo?

[florianmonfort]

Hi all,
Just to let you all know for QR Code Scanner specifically (no plans for Bar code scanning yet) we will have a new repository available and we are working on it here:
https://github.com/diningcity-group/capacitor-qr-scanner
It's only the beginning and there is only iOS code for now, but we plan on adding Android very soon and we plan on maintaining it long term. Will update this post when it's more ready for production use.

Can you provide a video demo?

It would look slightly different for now on iOS and Android since the code base is slightly different for both platforms, but over time we plan on merging/unifying the two of them. Best way I think for now is for you to just demo it in your project and launch it on each device and see it for yourself!

[tafelnl]

Just published https://github.com/capacitor-community/barcode-scanner to community npm: https://www.npmjs.com/package/@capacitor-community/barcode-scanner

So I guess this issue can be closed :)

[basvdijk]

@tafelnl great! Would it be an idea if I copy my start post to this new repo? Otherwise the description of possible features etc. in the description will be lost in this issue.

[SebastiaanKloos]

@tafelnl the only issue we currently have, is the lack of Capacitor 3 support. Is this something you are going to implement in the near feature?

[tafelnl]

Yes, Capacitor 3 support will probably land before it hits a stable release!

[basvdijk]

@tafelnl I saw torch on/off is on the todo, is there an estimate when this will be implemented?

[tripodsgames]

@tafelnl I saw torch on/off is on the todo, is there an estimate when this will be implemented?

I implemented torch support on my fork(Android only).

Usage:
BarcodeScanner.enableTorch();
BarcodeScanner.disableTorch();

https://github.com/LzpTec/barcode-scanner

[SalahAdDin]

@tafelnl I saw torch on/off is on the todo, is there an estimate when this will be implemented?

I implemented torch support on my fork(Android only).

Usage:
BarcodeScanner.enableTorch();
BarcodeScanner.disableTorch();

https://github.com/LzpTec/barcode-scanner

why not make a pull request?

[riderx]

@tafelnl I added your plugin to awesome-capacitor if that is useful please take time to star the repo :)

[jcesarmobile]

closing as https://github.com/capacitor-community/barcode-scanner exists now