CODEWITHSUNDEEP
angulartypescriptzxing-js
Haris Papadopoulos
Haris Papadopoulos

Reputation: 11

How do I get the camera view to work in ngx-scanner?

I'm making an app that makes use of a QR code scanner. I'm using the ngx-scanner component which is a ported version of Google's ZXing scanning library for Angular. The problem: Everytime I'm using the scanner component I get no errors but the camera view for the scanner won't load and I will just get the same screen I have as a background in my app.

Here's my HTML and my TS export class

<zxing-scanner [enable]="scannerEnabled" (scanSuccess)="onScanSuccess($event)"></zxing-scanner>
<h1><strong> {{ result }} </strong></h1>

export class QrScannerComponent implements OnInit {
  scannerEnabled = true;
  result: string

  constructor() {}

  ngOnInit(): void {}

  onScanSuccess(result: string) {
    this.result = result
  }
}

Upvotes: 1

Views: 5679

Answers (2)

Yo_Aaaaa
Yo_Aaaaa

Reputation: 1

I'm having this issue as well, looks like the only way I've been able to solve it is by choosing a device after the scanner has been initiated.

Upvotes: 0

KingDarBoja
KingDarBoja

Reputation: 1053

Just in case, have you tried to log the scan failure even from that component?

At the template, define the formats to read, in my case, I only want to read QR Codes or EAN as well.

<zxing-scanner
  #scanner
  [formats]="['QR_CODE', 'EAN_13']"
  (camerasFound)="cameraFound($event)"
  (camerasNotFound)="camerasNotFound($event)"
  (scanSuccess)="scanSuccessHandler($event)"
>
</zxing-scanner>

At the component:

  camerasNotFound(e: Event) {
    // Display an alert modal here
  }

  cameraFound(e: Event) {
    // Log to see if the camera was found
  }

  onScanSuccess(result: string) {
    console.log(result);
  }

Which version are you using by the way?

EDIT

:host zxing-scanner ::ng-deep video{
  height: 15rem;
  width: 100vw;
  object-fit: contain;
}

video {
  height: 15rem !important;
}

Upvotes: 0

Related Questions