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.
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.
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!
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).
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?
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.
I would be really happy, if we could solute that and I can test ist, bevor I install it.
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.
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