[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.

I’m curious as to how the preview window works. Is there a minimum size for the preview element. If so, what is it? I’m attempting scale it down into a thumbnail size and its seems to cut off the majority of the live image and it seems to have trouble recognizing the barcode (or I can’t properly aim without the full preview).

Thanks

Hello @talkingoldfish

I’m having a problem with the scanner reading all sorts of data other than the actual barcode. Most of the time I will have to scan two or three times to capture the actual barcode content and not some other text on the page. Is there a way to make it read ONLY barcode data and ignore everything else?

Thanks,
George

Turning off the ‘locate in image’ helped cut down detection of erroneous barcodes tremendously for me. This requires that you place the barcode center of frame, which is a more familiar UX anyways. If you can specify a barcode type rather than ‘auto’, it will further increase reliability.

There appears to be something broken with my video preview. It is fixed height & width at 1280x720 rather than scaling with the page element. When the element is drawn under that dimension, it is cropped.

Running this javascript workaround solved it for me:

bcElem = document.getElementById('barcode'); //set id of barcode reader element
vidElem = bcElem.querySelector('video');
vidElem.height = bcElem.offsetHeight;
vidElem.width = bcElem.offsetWidth;

Hello @talkingoldfish
for my platform I would like use your plugin, but the demopage don’t works. :frowning:
I would be really happy, if we could solute that and I can test ist, bevor I install it.

Best :slight_smile:

hi there. I wasnt able to follow your instructions sorry - the scanner works in that it is detecting things, but how to take the ‘Barcode Context’ or wherever the result is and store that in a text field or other attribute is beyond me sorry. So far I cant find any reference to ‘Barcode context’. Any suggestions to push me in the right direction would be appreciated.

Hi,

Do you have any clue or Run Javascript formula to input in the page load to remember or not asking every time the camera loading ?
I dont want, once i accept the camera in the page , to accept everytime to allow camera working for better convinience …
Thanks by advance