Barcode Scanner Prefab is used to scan the 1D Barcodes via web cams and mobile cams.
Supported codes are Code 39, Code 93, Code 128, Codabar, Interleaved 2 of 5, EAN-8, EAN-13, UPC-A, UPC-E, Industrial 2 of 5.
It uses the third party javascript library called Dynamsoft to scan the barcode. This Dynamsoft library is a paid one. Because of its Accuracy and Performance.And also it supports 2D barcodes and QR-codes.
Pre-requisites
1. It needs atleast 720p cam to recognize a barcode properly in low light.
2. You need to buy a license key for Barcode Scanner from Dynamsoft Website.
3. You have to know ,what kind of barcode format needs to supported by your application.
Implementation
1.Create a project as prefab in wavemaker.
2.Add a Dynamsoft javascript lib by uploading a javascript lib(dbr-6.5.1.min.js once you register, you will get) and adding a script in index.html
3.Go to config prefab and add in-bound and out-bound values for getting input and output.
4.Add a configuration in script page on onready() for barcode format.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
var scanner; //enumeratedCode for each formats const formatid = { code_39: 1, code_128: 2, code_93: 4, codabar: 8, itf: 16, ean_13: 32, ean_8: 64, industrial_25: 512, upc_a: 128, upc_e: 256, }; //getting input from checkboxset var formats = String(Prefab.barcodeformat); var formatt = formats.split(","); //adding enum value for support barcode format for (var i = 0; i < formatt.length; i++) { if (formatt[i] === "All") { id = 1023; break; } id += formatid[formatt[i]]; } |
5.Drag and drop a button and give name as scan and add a onclick events as javascript to configure the dynamsoft service.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
//License key for Dynamsoft Lib BarcodeReader.licenseKey = Prefab.licensekey; Prefab.Widgets.button1.show = false; Prefab.Widgets.button2.show = true; Prefab.Widgets.container1.show = true; var bid = Number(id); scanner = new BarcodeReader.Scanner({ //Config for Scanner videoSettings: { video: { width: 1280, height: 720, facingMode: "environment" } }, htmlElement: document.body, runtimeSettings: { mMaxBarcodesCount: 2, mDeblurLevel: 9, mBarcodeFormatIds: bid, mMaxAlgorithmThreadCount: 4, mAntiDamageLevel: 9, mScaleDownThreshold: 1300, mTextFilterMode: 1, mBarcodeInvertMode: 1, mTimeout: 3000, mRegionPredetectionMode: 0, mTextureDetectionSensitivity: 5, mGrayEqualizationSensitivity: 0, mExpectedBarcodesCount: 0, mEnableFillBinaryVacancy: 1, mBinarizationBlockSize: 0, }, //interval time for each scan in millisecond intervalTime: 50, //each frame event onFrameRead: results => { }, // event after code detection onNewCodeRead: (txt, result) => { { Prefab.barcodedata = txt; Prefab.Widgets.container1.show = false; scanner.close(); Prefab.Widgets.button1.show = true; Prefab.Widgets.button2.show = false; } } }); scanner.open().catch(ex => { console.log(ex); alert(ex.message || ex); scanner.close(); }); |
6.Drag and drop an another button to stop the dynamsoft service and give show property as disable.
In onclick event give as javascript.
In onclick event give as javascript.
|
1 2 3 4 |
Prefab.Widgets.container1.show = false; Prefab.Widgets.button1.show = true; Prefab.Widgets.button2.show = false; scanner.close(); |
7.Deploy the created prefab.
Usage
1. Drag and Drop the barcode scanner prefab.
2. Insert the license key that you bought from Dynamsoft website in the license key textbox on property tab.
3. Check the barcode format checkboxes to makesure the application support only checked barcode formats.
4.Bind the value of any text supported widget with out-bound value(barcodedata) of barcode reader prefab to get the barcode data.
Deployment
1. After Deploying, click the scan button to open the live stream and start the service to scan barcode.
2. You can able to select cameras if more than one camera is present by selecting the first dropdown under livestream. It will displays list of cameras that are available.
3. You can able to select camera resolution if available. if not it will choose the default one.
The Stop button will stop the livestream and end the service.
4. After placing the barcode infront of camera it will scan and decode the code then return the code to binded widget.