ngx-html5-qrcode
Version:
This is the angular adaptation of the "**[HTML5 QRCode](https://github.com/mebjas/html5-qrcode)**". For the documentation please have a look at https://github.com/mebjas/html5-qrcode.
106 lines (100 loc) • 4.59 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewChild, Input, Output, NgModule } from '@angular/core';
import { Html5Qrcode } from 'html5-qrcode';
class NgxHtml5QrcodeComponent {
constructor() {
this.cameraId = '';
this.useFrontCamera = false;
this.config = { fps: 10, qrbox: { width: 250, height: 250 } };
this.decodedText = new EventEmitter();
this.decodedResult = new EventEmitter();
}
ngOnInit() {
}
ngAfterViewInit() {
// This method will trigger user permissions
Html5Qrcode.getCameras().then(devices => {
if (devices && devices.length) {
// .. use this to start scanning.
this.cameraId = this.useFrontCamera ? devices[1].id : devices[0].id;
this.startHtmlQrCode();
}
}).catch(err => {
console.log(err);
});
}
qrCodeSuccessCallback(decodedText, decodedResult) {
/* handle success */
this.decodedText.emit(decodedText);
this.decodedResult.emit(decodedResult);
}
qrCodeErrorCallback(errorMessage) {
/* handle success */
console.error(errorMessage);
}
startHtmlQrCode() {
this.html5QrCode = new Html5Qrcode(this.reader?.nativeElement?.id);
this.html5QrCode.start({ deviceId: { exact: this.cameraId } }, this.config, this.qrCodeSuccessCallback, this.qrCodeErrorCallback)
.catch((err) => {
// Start failed, handle it.
console.log(err);
});
}
ngOnDestroy() {
this.html5QrCode.stop().then((ignore) => {
// QR Code scanning is stopped.
}).catch((err) => {
// Stop failed, handle it.
});
}
}
NgxHtml5QrcodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxHtml5QrcodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxHtml5QrcodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: NgxHtml5QrcodeComponent, selector: "html5-qrcode", inputs: { useFrontCamera: "useFrontCamera", config: "config" }, outputs: { decodedText: "decodedText", decodedResult: "decodedResult" }, viewQueries: [{ propertyName: "reader", first: true, predicate: ["reader"], descendants: true }], ngImport: i0, template: `
<div #reader id="reader" width="600px"></div>
`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxHtml5QrcodeComponent, decorators: [{
type: Component,
args: [{
selector: 'html5-qrcode',
template: `
<div #reader id="reader" width="600px"></div>
`,
styles: []
}]
}], ctorParameters: function () { return []; }, propDecorators: { reader: [{
type: ViewChild,
args: ['reader']
}], useFrontCamera: [{
type: Input
}], config: [{
type: Input
}], decodedText: [{
type: Output
}], decodedResult: [{
type: Output
}] } });
class NgxHtml5QrcodeModule {
}
NgxHtml5QrcodeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxHtml5QrcodeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxHtml5QrcodeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxHtml5QrcodeModule, declarations: [NgxHtml5QrcodeComponent], exports: [NgxHtml5QrcodeComponent] });
NgxHtml5QrcodeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxHtml5QrcodeModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxHtml5QrcodeModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxHtml5QrcodeComponent
],
imports: [],
exports: [
NgxHtml5QrcodeComponent
]
}]
}] });
/*
* Public API Surface of ngx-html5-qrcode
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxHtml5QrcodeComponent, NgxHtml5QrcodeModule };
//# sourceMappingURL=ngx-html5-qrcode.mjs.map