Forum Academy Marketplace Showcase Pricing Features

[Free Plugin] Barcode Scanner

Hello fellow Bubblers, isn’t it a lovely day?!

Well, if the answer to that is a resounding NO then I have something that will certainly (possibly) brighten it (assuming your app actually needs a barcode scanner, otherwise you’re out of luck and I can’t help you, sorry) which is a Barcode Scanner plugin that scans barcodes. Clever.

Using this plugin you can scan barcodes using any camera on your device.

In order to use the plugin you just need to add the BarcodeScanner element on to the page wherever you want the video preview window for the scanner, then you can change the following options within the plugin editor:

  • Camera Type (Manual / Back / Front)
  • Manual Camera ID (see below)
  • Barcode Type (type of barcode to scan for, the ‘Auto’ option will detect the barcode type but may produce many false positives)
  • Scans per Second (max number of scans per second)
  • Locate in Image (whether to locate the barcode from an image / frame)
  • Patch Size (density of the search-grid proportional to size of scanned barcode)
  • Half Sample (operate on image scaled down)
  • Stop on Detection (stop on detection of first barcode)
  • Detection Beep (play a satisfactory “beep” sound on detection)
  • Show Result Boxes (show bounding boxes for found barcodes)
  • Detecting Box Colour (colour of boxes for barcode patterns that do not result in a code)
  • Detected Box Colour (colour of box for barcode pattern that does result in a code)
  • Detected Line Colour (colour of line drawn across centre of a barcode pattern that does result in a code)
  • Save Image to DB (whether to save the image frame used to decode the barcode to the db in jpg format)
  • Filename (filename to save into db)

Once the Barcode Scanner becomes active on the page it will enumerate a list of cameras on your device and this can be accessed via the ‘Cameras’ state. You can use the camera’s index (starting at 0) in this list to set it as a Manual Camera ID. Eg. Your cameras have been enumerated to the Cameras state as:

  • Front
  • Back
  • External

To start the Front camera you would set the Manual Camera ID to 0; the Back camera would be 1; and the External camera would be 2 (etc.). I have included an example of a way to select this within the demo app.

You can start / stop the scan easily in the workflow via an Element Action.

You can view a demo of this plugin in action @ https://barcode-scanner-plugin.bubbleapps.io

The plugin page can be viewed @ https://bubble.io/plugin/barcode-scanner-1597756110129x923822061821886500

Did I mention it was FREE, too? So why not give it a whirl and let me know what you think!

Stuart B

7 Likes

Hi there.
Good Job! but…
The QRcode worked well, but this Barcode didin’t.

Thanks .

Sorry about that, what happened when you tried to use it? Did you get any errors?

I use it on a live site to scan ISBN barcodes for books and it seems to work ok there. I haven’t had chance to test it with all different devices, but it does work ok on my laptop, my Samsung phone and my wife’s iPhone.

1 Like

in my case it didn’t identification the camera

Works well. Thank you !

Hello @talkingoldfish,

Your plugin is very impressive! Thank you so much for making it available freely to everybody.

Do you think you could add the capability to read and pull data from PDF 417?

Best regards,

Marcos

Hi @talkingoldfish,

I second the vote for PDF 417. I’d through in a case of beer or new aquarium pump for you. Maybe @marcos will match the offer?

Thank you,
G

Does your scanner work on a mobile device? I just get a triangle play button with a slash through it.

Anyone facing this error?
I am using Iphone 7

Hi @marcos and @gilles,

Apologies for the delay in replying!

I would love to add this feature, but unfortunately I cannot add this new barcode type to this plugin as it is out of scope for the underlying Javascript library, QuaggaJS.

As can be seen in this link it is a long-standing issue that does not look like it can be fixed easily using that library.

It does appear there are other JS libraries out there that implement PDF 417 recognition already, such as this one so it could be possible to create a new plugin for this, however that is not something I have on my to do list at the moment!

Stuart B

1 Like

Which version of iOS are you running on this iPhone? Has it ever scanned a barcode ok?

Hi,

Nice plugin, it worked for me couple of months, but now it is giving this error. Don’t know why…


Can you look into it please? Thanks!

I think I found the problem. I start the barcode at the same moment as the group where it is in becomes visible. I think the scanner must be on a visible group to not give that error.