Intermec Scanner to Read 20 Digit Barcodes
- What'south new in
version two.10.ten - Using the library
- Integrating code scanner using
Html5QrcodeScanner- Install the library
- Install using npm
- Load latest library from unpkg or other CDNs
- Add placeholder HTML element
- Initialize in javascript
- Demo
- Notes:
- Install the library
-
Html5Qrcodeinterface - All supported formats
- Future plans
- How to contribute
- Related articles
The trivial QR code scanning library I take been maintaining since 2015 has been getting more attention recently. And with ability came responsibilities, bugs, and characteristic requests. Some of the key features requested past developers were more than reliable scanning and the power to scan different types of bar codes. With version 2.0.0 onwards developers can scan unlike types of 1D codes (bar codes) and second codes (similar QR codes or AZTEC).
This article lists out everything new in version 2.x.x. I'll also list out the new APIs and capabilities that developers can use to integrate a more powerful code scanning capability to their web pages or apps.
Here'due south the library I am taking about: mebjas/html5-qrcode, checkout demo at qrcode.minhazav.dev
Star Fork Consequence Discuss
What'due south new in version ii.ten.ten
Latest: 
- Ability to scan unlike kinds of 1D codes and 2D codes.
- See all supported formats hither.
- Scanned format blazon and the name returned in the success callback.
- More than reliable code scanning, fixing problems similar issue#134, issue#63, issue#140.
- Both (ane) & (2) were achieved by migrating the decoding library from
Lazarsoft's libraryto Zxing-js.
- Both (ane) & (2) were achieved by migrating the decoding library from
- [Minor] Library now reports more than granular errors to reduce debugging fourth dimension for developers.
- For instance, if the library is used in
HTTPurl, the exact event will be reported.
- For instance, if the library is used in
Lawmaking health fixes
-
Unabridged code migrated to Typescript for scalable & less mistake-prone development.
-
Several code wellness bug stock-still based on Codacy report and at present we have course A on Codacy -
, tracking outcome for this refactor
Check out changelog since Version 2.0.0 for more clarity.
Using the library
The library exposes two chief classes:
-
Html5QrcodeScanner- Use this to fix upwardly end to end scanner with UI, built on top ofHtml5Qrcode.- Takes care of building full user interface
- Supports scanning using a web-cam or camera on the device with real-time camera feeds.
- Back up scanning local images on the device.
-
Html5Qrcode- lower-level library, exposes APIs to build your lawmaking scanner.
Integrating code scanner using Html5QrcodeScanner
Follow the steps below to integrate QR lawmaking or barcode scanning capabilities into your web application:
Install the library
You could install the library using npm or load it straight using some CDNS similar unpkg
Install using npm
npm install --save-dev html5-qrcode Load latest library from unpkg or other CDNs
<!-- include the library --> <script src= "https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js" ></script> Add placeholder HTML element
Add a placeholder HTML element to your web page. The scanning UI would be rendered in this chemical element. Give information technology appropriate stylings similar width or peak.
<div id= "qr-reader" mode= "width: 600px" ></div> Initialize in javascript
Now yous can set up up the scanner with these 4 lines of code.
function onScanSuccess ( decodedText , decodedResult ) { console . log ( `Lawmaking scanned = ${ decodedText } ` , decodedResult ); } var html5QrcodeScanner = new Html5QrcodeScanner ( " qr-reader " , { fps : x , qrbox : 250 }); html5QrcodeScanner . render ( onScanSuccess ); Demo
Notes:
- You can customize the scanner past passing a different config object - read more.
- The success callback has the following interface (/src/cadre.ts)
/** Format of detected code. */ interface QrcodeResultFormat { format : Html5QrcodeSupportedFormats ; formatName : string ; } /** Detailed scan result. */ interface QrcodeResult { text : string ; format : QrcodeResultFormat , } /** QrCode issue object. */ interface Html5QrcodeResult { decodedText : string ; result : QrcodeResult ; } type QrcodeSuccessCallback = ( decodedText : string , outcome : Html5QrcodeResult ) => void ; Html5Qrcode interface
If you lot want to build your user interface, you can make utilize of the public APIs exposed by Html5Qrcode grade:
class Html5Qrcode { constructor ( elementId : string , config : Html5QrcodeFullConfig ) {} /** Start scanning. */ start ( cameraIdOrConfig : Html5QrcodeIdentifier , configuration : Html5QrcodeCameraScanConfig | undefined , qrCodeSuccessCallback : QrcodeSuccessCallback | undefined , qrCodeErrorCallback : QrcodeErrorCallback | undefined , ): Hope < cypher > {} /** End scanning. */ stop (): Promise < void > {} /** Clear the rendered surface. */ articulate (): void {} /** Scan a file. */ scanFile ( imageFile : File , showImage ?: boolean ): Promise < string > {} /** Returns list of cameras in the device, invokes permission request. */ static getCameras (): Promise < Array < CameraDevice >> {} } All supported formats
These are the unlike code formats now supported by the library, with examples:
| Code | Example |
|---|---|
| QR Code |  |
| AZTEC |  |
| CODE_39 |  |
| CODE_93 |  |
| CODE_128 |  |
| MAXICODE |  |
| ITF |  |
| EAN_13 |  |
| EAN_8 |  |
| PDF_417 |  |
| RSS_14 |  |
| RSS_EXPANDED |  |
| UPC_A |  |
| UPC_E |  |
| DATA_MATRIX |  |
Hereafter plans
- Major UI overhaul - consequence#207
- Remembering last used camera - issue#85, word#213
- Support setting default facing mode in
Html5QrcodeScanner- issue#65 - Fix virtually of open issues at - mebjas/html5-qrcode/bug
How to contribute
If you are excited or interested y'all can contribute to this project by:
- If you discover compatibility bug with a certain browser, create an issue here.
- Raising issues for bugs faced, at Github issue page for the project. Feel free to add some related interesting discussions which could be taken upward as piece of work-detail.
- Sending a Pull Request for bugs fixed by y'all.
- Rating the project with stars and shares.
Related articles
- Demo: HTML5 QR Code scanner
- HTML5 QR Code scanning with javascript - launched v1.0.1
- Support for scanning the local file and using default camera added (v1.0.5)
yarbroughancon1962.blogspot.com
Source: https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/
Postar um comentário for "Intermec Scanner to Read 20 Digit Barcodes"