html5-qrcode-angular
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.
102 lines (96 loc) • 4.29 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 {
reader;
html5QrCode;
cameraId = '';
useFrontCamera = false;
config = { fps: 10, qrbox: { width: 250, height: 250 } };
decodedText = new EventEmitter();
decodedResult = new EventEmitter();
constructor() {
}
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) {
}
startHtmlQrCode() {
this.html5QrCode = new Html5Qrcode(this.reader?.nativeElement?.id);
this.html5QrCode.start({ deviceId: { exact: this.cameraId } }, this.config, this.qrCodeSuccessCallback.bind(this), this.qrCodeErrorCallback.bind(this))
.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.
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxHtml5QrcodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: NgxHtml5QrcodeComponent, decorators: [{
type: Component,
args: [{ selector: 'html5-qrcode', template: `
<div #reader id="reader" width="600px"></div>
` }]
}], ctorParameters: function () { return []; }, propDecorators: { reader: [{
type: ViewChild,
args: ['reader']
}], useFrontCamera: [{
type: Input
}], config: [{
type: Input
}], decodedText: [{
type: Output
}], decodedResult: [{
type: Output
}] } });
class NgxHtml5QrcodeModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxHtml5QrcodeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NgxHtml5QrcodeModule, declarations: [NgxHtml5QrcodeComponent], exports: [NgxHtml5QrcodeComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxHtml5QrcodeModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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=html5-qrcode-angular.mjs.map