ngx-zxing-multicode
A 1D and 2D barcode scanner using HTML5 video element, built using the ZXing library. This module is really usable since it solves some commen problems with @zxing/ngx-scanner
- see Features.
🏁 Usage
Run
npm i -s ngx-zxing-multicode
to install this package. Then include the module in your project's main module, e.g. the AppModule
:
@NgModule({
...
imports: [
...
NgxZxingMulticodeModule
],
...
})
export class AppModule { }
and use it in any place:
<ngx-zxing-multicode></ngx-zxing-multicode>
API
<ngx-zxing-multicode
[detectInterval]="100"
[persistence]="20"
[hideDeviceSelector]="true"
[previewFitMode]="fill
(detect)="myFunc($event)"
(error)="myFunc($event)"
(notFound)="myFunc()"
></ngx-zxing-multicode>
-
detectInterval
- interval in ms to run the recognition -
persistence
- the time during which the same barcode is not emitted multiple times, calculated:detectInterval * persistence
-
hideDeviceSelector
- if the device selection dropdown is shown or not (always the first device is started) -
previewFitMode
- by defaultcover
, determines how the video fits the element. See https://developer.mozilla.org/de/docs/Web/CSS/object-fit -
detect
- called when a barcode is found withScanResult
as payload -
error
- called if any error occurred withNgxZxingMulticodeError
-
notFound
- called on every interval cycle if no barcode is found
Event objects details:
export interface ScanResult {
type: string; // Type of the barcode found
code: string; // Barcode payload
raw: ZXing.Result; // Original object
}
export enum NgxZxingMulticodeErrno {
E_MEDIA_ACCESS = 1,
E_NO_DEVICES = 2,
E_NO_SUPPORT = 3,
E_LIST_DEVICES = 4,
E_SCAN = 5
}
export interface NgxZxingMulticodeError {
code: NgxZxingMulticodeErrno;
error?: Error; // Original error
}
Features
This module has been written quickly since @zxing/ngx-scanner
is really nice but has some serious limitations when used in a real-world scenario:
-
✅ Proper resource deallocation: when the component is removed (e.g. trough*ngIf
) it properly stops all camera access and recognition and releases the resources -
✅ Scans for 1D & 2D barcodes: this module scans for different barcodes and returns the type of barcode found and the contents of the barcode in exchange -
✅ Multiple camera support: if there are multiple cameras available a dropdown is shown which lets the user select the camera to use -
✅ No console output: the different libraries spill out a lot ofconsole.{log|error}
output which is a no-go for a production app. This library uses thedebug
module for logging which is turned of and can be turned on
TODOs
The are a lot of extensions which could be applied to this module, namely:
-
➡ Save the selected camera inlocalStorage
for next use -
➡ Test on different devices like iPad, iPhone, Android devices etc.