Hello everyone,
I have a problem with my QR scanner and I can’t get any further.Basically everything works finde. But it crashes my browser, because it sometimes does not stop scanning after it has scanned something (see picture 1 + 2). So I want him to scan something and after he has found something he should stop and not look for more Qr-Code.
Pic 1:
![scans to often]()
Pic 2:
This is my code, hope you can help me:
.ts
ngAfterViewInit() {
this.videoElement = this.video.nativeElement;
this.canvasElement = this.canvas.nativeElement;
this.canvasContext = this.canvasElement.getContext('2d');
}
async startScan() {
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: 'environment'}
});
this.videoElement.srcObject = stream;
this.videoElement.setAttribute('playsinline', true);
this.videoElement.play();
this.loading = await this.loadingCtrl.create({});
await this.loading.present();
requestAnimationFrame(this.scan.bind(this));
this.ishidden = false;
}
async scan() {
if (this.videoElement.readyState === this.videoElement.HAVE_ENOUGH_DATA) {
if (this.loading) {
await this.loading.dismiss();
this.loading = null;
this.scanActive = true;
}
this.canvasElement.height = this.videoElement.videoHeight;
this.canvasElement.width = this.videoElement.videoWidth;
this.canvasContext.drawImage(
this.videoElement,
0,
0,
this.canvasElement.width,
this.canvasElement.height
);
const imageData = this.canvasContext.getImageData(
0,
0,
this.canvasElement.width,
this.canvasElement.height
);
const code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: 'dontInvert'
});
console.log('code: ', code);
if (code) {
this.scanActive = false;
this.scanResult = code.data;
this.showQrToast();
} else {
if (this.scanActive) {
requestAnimationFrame(this.scan.bind(this));
}
requestAnimationFrame(this.scan.bind(this));
}
} else {
requestAnimationFrame(this.scan.bind(this));
}
}
stopScan() {
this.scanActive = false;
}
my .html:
<video #video [hidden]="!scanActive" width="50%"></video>
<canvas #canvas hidden></canvas>
<ion-button expand="full" (click)="stopScan()" color="danger" *ngIf="scanActive" [hidden]="ishidden">
<ion-icon slot="start" name="close"></ion-icon>
Stop Scanner
</ion-button>
<ion-button expand="full" (click)="saveQR()" color="danger" [hidden]="ishidden">
<ion-icon slot="start" name="add-outline"></ion-icon>
Save QR-Code
</ion-button>
<ion-button expand="full" (click)="reset()" color="primary" [hidden]="ishidden">
<ion-icon slot="start" name="refresh-outline"></ion-icon>
Reset QR-Scanner
</ion-button>
<ion-card *ngIf="scanResult">
<ion-card-header>
<ion-card-title>QR Code</ion-card-title>
</ion-card-header>
<ion-card-content>
{{ scanResult }}
</ion-card-content>
</ion-card>
<ion-button (click)="startScan()" shape="round" color="primary" class="my-new-contact">
<ion-icon slot="start" name="add-outline"></ion-icon>
New Contact
</ion-button>
</ion-content>
4 posts - 2 participants
Read full topic
