QR-Scanner - Stop unlimited scans

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:

Pic 2:

unlimetedScans1220×160 11 KB

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>

1 post - 1 participant

Read full topic