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.
72 lines • 8.92 kB
JavaScript
import { Component, ViewChild, Output, Input, EventEmitter } from '@angular/core';
import { Html5Qrcode } from "html5-qrcode";
import * as i0 from "@angular/core";
export 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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWh0bWw1LXFyY29kZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL25neC1odG1sNS1xcmNvZGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCxTQUFTLEVBS1QsU0FBUyxFQUNULE1BQU0sRUFDTixLQUFLLEVBQ0wsWUFBWSxFQUNiLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxjQUFjLENBQUM7O0FBV3pDLE1BQU0sT0FBTyx1QkFBdUI7SUFFYixNQUFNLENBQXlCO0lBQ3BELFdBQVcsQ0FBZTtJQUMxQixRQUFRLEdBQVcsRUFBRSxDQUFDO0lBRWIsY0FBYyxHQUFZLEtBQUssQ0FBQztJQUNoQyxNQUFNLEdBQWdDLEVBQUMsR0FBRyxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUUsRUFBQyxLQUFLLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUMsRUFBQyxDQUFDO0lBQ2pGLFdBQVcsR0FBeUIsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQUMvRCxhQUFhLEdBQW9DLElBQUksWUFBWSxFQUFxQixDQUFDO0lBRWpHO0lBQ0EsQ0FBQztJQUVELFFBQVE7SUFDUixDQUFDO0lBRUQsZUFBZTtRQUViLDRDQUE0QztRQUM1QyxXQUFXLENBQUMsVUFBVSxFQUFFLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxFQUFFO1lBQ3RDLElBQUksT0FBTyxJQUFJLE9BQU8sQ0FBQyxNQUFNLEVBQUU7Z0JBQzdCLGlDQUFpQztnQkFDakMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO2dCQUNwRSxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7YUFDeEI7UUFDSCxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEVBQUU7WUFDYixPQUFPLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ25CLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELHFCQUFxQixDQUFDLFdBQWdCLEVBQUUsYUFBZ0M7UUFDdEUsb0JBQW9CO1FBQ3BCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ25DLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQ3pDLENBQUM7SUFFRCxtQkFBbUIsQ0FBQyxZQUFpQjtJQUVyQyxDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxXQUFXLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxhQUFhLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFFbkUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQ3BCLEVBQUMsUUFBUSxFQUFFLEVBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUMsRUFBQyxFQUNsQyxJQUFJLENBQUMsTUFBTSxFQUNYLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQ3JDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7YUFDbkMsS0FBSyxDQUFDLENBQUMsR0FBRyxFQUFFLEVBQUU7WUFDYiwyQkFBMkI7WUFDM0IsT0FBTyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUNuQixDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxJQUFJLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRTtZQUN0QywrQkFBK0I7UUFDakMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsR0FBRyxFQUFFLEVBQUU7WUFDZiwwQkFBMEI7UUFDNUIsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO3dHQTdEVSx1QkFBdUI7NEZBQXZCLHVCQUF1QiwrUkFMeEI7O0dBRVQ7OzRGQUdVLHVCQUF1QjtrQkFQbkMsU0FBUzsrQkFDRSxjQUFjLFlBQ2Q7O0dBRVQ7MEVBS29CLE1BQU07c0JBQTFCLFNBQVM7dUJBQUMsUUFBUTtnQkFJVixjQUFjO3NCQUF0QixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDSSxXQUFXO3NCQUFwQixNQUFNO2dCQUNHLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBSZW5kZXJlcjIsXG4gIFZpZXdDaGlsZCxcbiAgT3V0cHV0LFxuICBJbnB1dCxcbiAgRXZlbnRFbWl0dGVyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtIdG1sNVFyY29kZX0gZnJvbSBcImh0bWw1LXFyY29kZVwiO1xuaW1wb3J0IHtIdG1sNVFyY29kZUNhbWVyYVNjYW5Db25maWd9IGZyb20gXCJodG1sNS1xcmNvZGUvZXNtL2h0bWw1LXFyY29kZVwiO1xuaW1wb3J0IHtIdG1sNVFyY29kZVJlc3VsdH0gZnJvbSBcImh0bWw1LXFyY29kZS9lc20vY29yZVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdodG1sNS1xcmNvZGUnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgI3JlYWRlciBpZD1cInJlYWRlclwiIHdpZHRoPVwiNjAwcHhcIj48L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXVxufSlcbmV4cG9ydCBjbGFzcyBOZ3hIdG1sNVFyY29kZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcblxuICBAVmlld0NoaWxkKCdyZWFkZXInKSByZWFkZXI6IEVsZW1lbnRSZWYgfCB1bmRlZmluZWQ7XG4gIGh0bWw1UXJDb2RlITogSHRtbDVRcmNvZGU7XG4gIGNhbWVyYUlkOiBzdHJpbmcgPSAnJztcblxuICBASW5wdXQoKSB1c2VGcm9udENhbWVyYTogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBjb25maWc6IEh0bWw1UXJjb2RlQ2FtZXJhU2NhbkNvbmZpZyA9IHtmcHM6IDEwLCBxcmJveDoge3dpZHRoOiAyNTAsIGhlaWdodDogMjUwfX07XG4gIEBPdXRwdXQoKSBkZWNvZGVkVGV4dDogRXZlbnRFbWl0dGVyPHN0cmluZz4gPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcbiAgQE91dHB1dCgpIGRlY29kZWRSZXN1bHQ6IEV2ZW50RW1pdHRlcjxIdG1sNVFyY29kZVJlc3VsdD4gPSBuZXcgRXZlbnRFbWl0dGVyPEh0bWw1UXJjb2RlUmVzdWx0PigpO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG5cbiAgICAvLyBUaGlzIG1ldGhvZCB3aWxsIHRyaWdnZXIgdXNlciBwZXJtaXNzaW9uc1xuICAgIEh0bWw1UXJjb2RlLmdldENhbWVyYXMoKS50aGVuKGRldmljZXMgPT4ge1xuICAgICAgaWYgKGRldmljZXMgJiYgZGV2aWNlcy5sZW5ndGgpIHtcbiAgICAgICAgLy8gLi4gdXNlIHRoaXMgdG8gc3RhcnQgc2Nhbm5pbmcuXG4gICAgICAgIHRoaXMuY2FtZXJhSWQgPSB0aGlzLnVzZUZyb250Q2FtZXJhID8gZGV2aWNlc1sxXS5pZCA6IGRldmljZXNbMF0uaWQ7XG4gICAgICAgIHRoaXMuc3RhcnRIdG1sUXJDb2RlKCk7XG4gICAgICB9XG4gICAgfSkuY2F0Y2goZXJyID0+IHtcbiAgICAgIGNvbnNvbGUubG9nKGVycik7XG4gICAgfSk7XG4gIH1cblxuICBxckNvZGVTdWNjZXNzQ2FsbGJhY2soZGVjb2RlZFRleHQ6IGFueSwgZGVjb2RlZFJlc3VsdDogSHRtbDVRcmNvZGVSZXN1bHQpIHtcbiAgICAvKiBoYW5kbGUgc3VjY2VzcyAqL1xuICAgIHRoaXMuZGVjb2RlZFRleHQuZW1pdChkZWNvZGVkVGV4dCk7XG4gICAgdGhpcy5kZWNvZGVkUmVzdWx0LmVtaXQoZGVjb2RlZFJlc3VsdCk7XG4gIH1cblxuICBxckNvZGVFcnJvckNhbGxiYWNrKGVycm9yTWVzc2FnZTogYW55KSB7XG5cbiAgfVxuXG4gIHN0YXJ0SHRtbFFyQ29kZSgpIHtcbiAgICB0aGlzLmh0bWw1UXJDb2RlID0gbmV3IEh0bWw1UXJjb2RlKHRoaXMucmVhZGVyPy5uYXRpdmVFbGVtZW50Py5pZCk7XG5cbiAgICB0aGlzLmh0bWw1UXJDb2RlLnN0YXJ0KFxuICAgICAge2RldmljZUlkOiB7ZXhhY3Q6IHRoaXMuY2FtZXJhSWR9fSxcbiAgICAgIHRoaXMuY29uZmlnLFxuICAgICAgdGhpcy5xckNvZGVTdWNjZXNzQ2FsbGJhY2suYmluZCh0aGlzKSxcbiAgICAgIHRoaXMucXJDb2RlRXJyb3JDYWxsYmFjay5iaW5kKHRoaXMpKVxuICAgICAgLmNhdGNoKChlcnIpID0+IHtcbiAgICAgICAgLy8gU3RhcnQgZmFpbGVkLCBoYW5kbGUgaXQuXG4gICAgICAgIGNvbnNvbGUubG9nKGVycik7XG4gICAgICB9KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuaHRtbDVRckNvZGUuc3RvcCgpLnRoZW4oKGlnbm9yZSkgPT4ge1xuICAgICAgLy8gUVIgQ29kZSBzY2FubmluZyBpcyBzdG9wcGVkLlxuICAgIH0pLmNhdGNoKChlcnIpID0+IHtcbiAgICAgIC8vIFN0b3AgZmFpbGVkLCBoYW5kbGUgaXQuXG4gICAgfSk7XG4gIH1cblxufVxuIl19