ca-milin15
commented
2 years ago Im trying to develop a simple zxing scanner,but im getting "this.scanner.camerasFound is undefined" error (tested it on localhost and also in production environment),when tried the same code in stackblitz its working as expected. stackblitz:- https://stackblitz.com/edit/zxing-ngx-scanner-qrbar-bgtq77?file=app%2Fapp.component.ts(angular 7)
Any idea what could be the possible reason for this behaviour (its jus a simple code available online) following is code of ts file:
import { Component, VERSION, OnInit, ViewChild,ChangeDetectorRef, } from '@angular/core'; import { ZXingScannerComponent } from '@zxing/ngx-scanner'; import { Result } from '@zxing/library'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', }) export class AppComponent implements OnInit { ngVersion = VERSION.full; @ViewChild('scanner',{static:true}) scanner: ZXingScannerComponent; hasDevices: boolean; hasPermission: boolean; qrResultString: string; qrResult: Result; availableDevices: MediaDeviceInfo[]; currentDevice: MediaDeviceInfo; constructor(private ChangeDetectorRef:ChangeDetectorRef){} ngOnInit(): void { this.scanner.camerasFound.subscribe((devices: MediaDeviceInfo[]) => { this.hasDevices = true; this.availableDevices = devices; }); this.scanner.camerasNotFound.subscribe(() => this.hasDevices = false); this.scanner.scanComplete.subscribe((result: Result) => this.qrResult = result); this.scanner.permissionResponse.subscribe((perm: boolean) => this.hasPermission = perm); this.ChangeDetectorRef.detectChanges(); } displayCameras(cameras: MediaDeviceInfo[]) { console.debug('Devices: ', cameras); this.availableDevices = cameras; } handleQrCodeResult(resultString: string) { console.debug('Result: ', resultString); this.qrResultString = resultString; } onDeviceSelectChange(selectedValue: string) { console.debug('Selection changed: ', selectedValue); // this.currentDevice = this.scanner.getDeviceById(selectedValue); this. currentDevice = this.availableDevices.find(x => x.deviceId === selectedValue); } stateToEmoji(state: boolean): string { const states = { // not checked undefined: '❔', // failed to check null: '⭕', // success true: '✔', // can't touch that false: '❌' }; return states['' + state]; } }Following is my package.json:
{ "name": "audit-portal-ui", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@agm/core": "^3.0.0-beta.0", "@angular/animations": "^8.2.14", "@angular/cdk": "~8.2.3", "@angular/common": "~8.2.12", "@angular/compiler": "~8.2.12", "@angular/core": "~8.2.12", "@angular/flex-layout": "^12.0.0-beta.34", "@angular/forms": "~8.2.12", "@angular/material": "^8.2.3", "@angular/platform-browser": "~8.2.12", "@angular/platform-browser-dynamic": "~8.2.12", "@angular/router": "~8.2.12", "@fortawesome/angular-fontawesome": "^0.8.2", "@fortawesome/fontawesome-svg-core": "^1.2.34", "@jsonforms/angular": "^2.5.2", "@jsonforms/angular-material": "^2.5.2", "@jsonforms/core": "^2.5.2", "@ng-bootstrap/ng-bootstrap": "4.0.1", "@ng-plus/signature-pad": "^1.0.7", "@ngx-formly/bootstrap": "^5.10.22", "@ngx-formly/core": "^5.0.0", "@ngx-formly/material": "^5.0.0", "@ngx-formly/schematics": "^5.10.22", "@swimlane/ngx-datatable": "^19.0.0", "@types/googlemaps": "^3.43.3", "@zxing/library": "^0.18.6", "@zxing/ngx-scanner": "^3.2.0", "ag-grid-angular": "^25.3.0", "ag-grid-community": "^25.3.0", "angular2-signaturepad": "^3.0.4", "bootstrap": "4.4.1", "chart.js": "^2.9.4", "hammerjs": "^2.0.8", "html2canvas": "^1.3.2", "jquery": "^3.6.0", "jspdf": "^2.3.1", "moment": "2.24.0", "ng2-charts": "^2.4.2", "ngx-bootstrap": "5.2.0", "ngx-pagination": "^5.0.0", "ngx-toastr": "10.1.0", "ngx-webcam": "^0.3.2", "rxjs": "~6.4.0", "rxjs-compat": "^6.6.3", "tslib": "^1.10.0", "underscore": "^1.13.1", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "~0.803.15", "@angular/cli": "~8.3.15", "@angular/compiler-cli": "~8.2.12", "@angular/language-service": "~8.2.12", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "@types/node": "^8.9.5", "@types/underscore": "^1.11.0", "codelyzer": "^5.0.0", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.5.3" } }
Hi men. Any solution?
Im trying to develop a simple zxing scanner,but im getting "this.scanner.camerasFound is undefined" error (tested it on localhost and also in production environment),when tried the same code in stackblitz its working as expected. stackblitz:- https://stackblitz.com/edit/zxing-ngx-scanner-qrbar-bgtq77?file=app%2Fapp.component.ts(angular 7)
Any idea what could be the possible reason for this behaviour (its jus a simple code available online) following is code of ts file:
Following is my package.json: