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.
76 lines • 9.29 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 {
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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWh0bWw1LXFyY29kZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtaHRtbDUtcXJjb2RlL3NyYy9saWIvbmd4LWh0bWw1LXFyY29kZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLFNBQVMsRUFLVCxTQUFTLEVBQ1QsTUFBTSxFQUNOLEtBQUssRUFDTCxZQUFZLEVBQ2IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLGNBQWMsQ0FBQzs7QUFXekMsTUFBTSxPQUFPLHVCQUF1QjtJQVdsQztRQVBBLGFBQVEsR0FBVyxFQUFFLENBQUM7UUFFYixtQkFBYyxHQUFZLEtBQUssQ0FBQztRQUNoQyxXQUFNLEdBQWdDLEVBQUMsR0FBRyxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUUsRUFBQyxLQUFLLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUMsRUFBQyxDQUFDO1FBQ2pGLGdCQUFXLEdBQXlCLElBQUksWUFBWSxFQUFVLENBQUM7UUFDL0Qsa0JBQWEsR0FBb0MsSUFBSSxZQUFZLEVBQXFCLENBQUM7SUFHakcsQ0FBQztJQUVELFFBQVE7SUFDUixDQUFDO0lBRUQsZUFBZTtRQUViLDRDQUE0QztRQUM1QyxXQUFXLENBQUMsVUFBVSxFQUFFLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxFQUFFO1lBQ3RDLElBQUksT0FBTyxJQUFJLE9BQU8sQ0FBQyxNQUFNLEVBQUU7Z0JBQzdCLGlDQUFpQztnQkFDakMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO2dCQUNwRSxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7YUFDeEI7UUFDSCxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEVBQUU7WUFDYixPQUFPLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ25CLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELHFCQUFxQixDQUFDLFdBQWdCLEVBQUUsYUFBZ0M7UUFDdEUsb0JBQW9CO1FBQ3BCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ25DLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQ3pDLENBQUM7SUFFRCxtQkFBbUIsQ0FBQyxZQUFpQjtRQUNuQyxvQkFBb0I7UUFDcEIsT0FBTyxDQUFDLEtBQUssQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUM5QixDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxXQUFXLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxhQUFhLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFFbkUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQ3BCLEVBQUMsUUFBUSxFQUFFLEVBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUMsRUFBQyxFQUNsQyxJQUFJLENBQUMsTUFBTSxFQUNYLElBQUksQ0FBQyxxQkFBcUIsRUFDMUIsSUFBSSxDQUFDLG1CQUFtQixDQUFDO2FBQ3hCLEtBQUssQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFO1lBQ2IsMkJBQTJCO1lBQzNCLE9BQU8sQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDbkIsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUU7WUFDdEMsK0JBQStCO1FBQ2pDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFO1lBQ2YsMEJBQTBCO1FBQzVCLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs7b0hBOURVLHVCQUF1Qjt3R0FBdkIsdUJBQXVCLCtSQUx4Qjs7R0FFVDsyRkFHVSx1QkFBdUI7a0JBUG5DLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGNBQWM7b0JBQ3hCLFFBQVEsRUFBRTs7R0FFVDtvQkFDRCxNQUFNLEVBQUUsRUFBRTtpQkFDWDswRUFHc0IsTUFBTTtzQkFBMUIsU0FBUzt1QkFBQyxRQUFRO2dCQUlWLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNJLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0csYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEFmdGVyVmlld0luaXQsXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIFJlbmRlcmVyMixcbiAgVmlld0NoaWxkLFxuICBPdXRwdXQsXG4gIElucHV0LFxuICBFdmVudEVtaXR0ZXJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0h0bWw1UXJjb2RlfSBmcm9tIFwiaHRtbDUtcXJjb2RlXCI7XG5pbXBvcnQge0h0bWw1UXJjb2RlQ2FtZXJhU2NhbkNvbmZpZ30gZnJvbSBcImh0bWw1LXFyY29kZS9lc20vaHRtbDUtcXJjb2RlXCI7XG5pbXBvcnQge0h0bWw1UXJjb2RlUmVzdWx0fSBmcm9tIFwiaHRtbDUtcXJjb2RlL2VzbS9jb3JlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2h0bWw1LXFyY29kZScsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiAjcmVhZGVyIGlkPVwicmVhZGVyXCIgd2lkdGg9XCI2MDBweFwiPjwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtdXG59KVxuZXhwb3J0IGNsYXNzIE5neEh0bWw1UXJjb2RlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xuXG4gIEBWaWV3Q2hpbGQoJ3JlYWRlcicpIHJlYWRlcjogRWxlbWVudFJlZiB8IHVuZGVmaW5lZDtcbiAgaHRtbDVRckNvZGUhOiBIdG1sNVFyY29kZTtcbiAgY2FtZXJhSWQ6IHN0cmluZyA9ICcnO1xuXG4gIEBJbnB1dCgpIHVzZUZyb250Q2FtZXJhOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGNvbmZpZzogSHRtbDVRcmNvZGVDYW1lcmFTY2FuQ29uZmlnID0ge2ZwczogMTAsIHFyYm94OiB7d2lkdGg6IDI1MCwgaGVpZ2h0OiAyNTB9fTtcbiAgQE91dHB1dCgpIGRlY29kZWRUZXh0OiBFdmVudEVtaXR0ZXI8c3RyaW5nPiA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuICBAT3V0cHV0KCkgZGVjb2RlZFJlc3VsdDogRXZlbnRFbWl0dGVyPEh0bWw1UXJjb2RlUmVzdWx0PiA9IG5ldyBFdmVudEVtaXR0ZXI8SHRtbDVRcmNvZGVSZXN1bHQ+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcblxuICAgIC8vIFRoaXMgbWV0aG9kIHdpbGwgdHJpZ2dlciB1c2VyIHBlcm1pc3Npb25zXG4gICAgSHRtbDVRcmNvZGUuZ2V0Q2FtZXJhcygpLnRoZW4oZGV2aWNlcyA9PiB7XG4gICAgICBpZiAoZGV2aWNlcyAmJiBkZXZpY2VzLmxlbmd0aCkge1xuICAgICAgICAvLyAuLiB1c2UgdGhpcyB0byBzdGFydCBzY2FubmluZy5cbiAgICAgICAgdGhpcy5jYW1lcmFJZCA9IHRoaXMudXNlRnJvbnRDYW1lcmEgPyBkZXZpY2VzWzFdLmlkIDogZGV2aWNlc1swXS5pZDtcbiAgICAgICAgdGhpcy5zdGFydEh0bWxRckNvZGUoKTtcbiAgICAgIH1cbiAgICB9KS5jYXRjaChlcnIgPT4ge1xuICAgICAgY29uc29sZS5sb2coZXJyKTtcbiAgICB9KTtcbiAgfVxuXG4gIHFyQ29kZVN1Y2Nlc3NDYWxsYmFjayhkZWNvZGVkVGV4dDogYW55LCBkZWNvZGVkUmVzdWx0OiBIdG1sNVFyY29kZVJlc3VsdCkge1xuICAgIC8qIGhhbmRsZSBzdWNjZXNzICovXG4gICAgdGhpcy5kZWNvZGVkVGV4dC5lbWl0KGRlY29kZWRUZXh0KTtcbiAgICB0aGlzLmRlY29kZWRSZXN1bHQuZW1pdChkZWNvZGVkUmVzdWx0KTtcbiAgfVxuXG4gIHFyQ29kZUVycm9yQ2FsbGJhY2soZXJyb3JNZXNzYWdlOiBhbnkpIHtcbiAgICAvKiBoYW5kbGUgc3VjY2VzcyAqL1xuICAgIGNvbnNvbGUuZXJyb3IoZXJyb3JNZXNzYWdlKTtcbiAgfVxuXG4gIHN0YXJ0SHRtbFFyQ29kZSgpIHtcbiAgICB0aGlzLmh0bWw1UXJDb2RlID0gbmV3IEh0bWw1UXJjb2RlKHRoaXMucmVhZGVyPy5uYXRpdmVFbGVtZW50Py5pZCk7XG5cbiAgICB0aGlzLmh0bWw1UXJDb2RlLnN0YXJ0KFxuICAgICAge2RldmljZUlkOiB7ZXhhY3Q6IHRoaXMuY2FtZXJhSWR9fSxcbiAgICAgIHRoaXMuY29uZmlnLFxuICAgICAgdGhpcy5xckNvZGVTdWNjZXNzQ2FsbGJhY2ssXG4gICAgICB0aGlzLnFyQ29kZUVycm9yQ2FsbGJhY2spXG4gICAgICAuY2F0Y2goKGVycikgPT4ge1xuICAgICAgICAvLyBTdGFydCBmYWlsZWQsIGhhbmRsZSBpdC5cbiAgICAgICAgY29uc29sZS5sb2coZXJyKTtcbiAgICAgIH0pO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5odG1sNVFyQ29kZS5zdG9wKCkudGhlbigoaWdub3JlKSA9PiB7XG4gICAgICAvLyBRUiBDb2RlIHNjYW5uaW5nIGlzIHN0b3BwZWQuXG4gICAgfSkuY2F0Y2goKGVycikgPT4ge1xuICAgICAgLy8gU3RvcCBmYWlsZWQsIGhhbmRsZSBpdC5cbiAgICB9KTtcbiAgfVxuXG59XG4iXX0=