id1945/ngx-scanner-qrcode

Config input break the scanner events

Opened this issue · 2 comments

I'm using the following template to display the QR code scanner:

<ngx-scanner-qrcode [config]="scannerConfig" #action="scanner"></ngx-scanner-qrcode>

TypeScript Configuration:

The scanner configuration is set up as follows, but the scanner does not trigger the event when the constraints are commented out:

scannerConfig: ScannerQRCodeConfig = {
  // TODO: This has to be uncommented to keep the scanner working
  // constraints: {
  //   video: {
  //     width: {
  //       ideal: 100
  //     },
  //     height: {
  //       ideal: 100
  //     }
  //   }
  // }
};

Event Subscription:

Here's how I'm subscribing to the scanner events:

ngOnInit(): void {
  navigator.mediaDevices
    ?.getUserMedia({ video: true, audio: false })
    .then((stream: MediaStream) => {
      this.scanner.start();

      this.scanner?.event.subscribe((result: ScannerQRCodeResult[]) => {
        // TODO: Redirect to the page with the scanned QR code
        console.log('Scanned QR code:', result);
        this.scanner?.stop();
      })

    })
    .catch((err) => {
      console.error('Error on get user media:', err);
    });
}

Expected Behavior:

The scanner should trigger the event and log the scanned QR code, regardless of whether the video constraints are specified in the configuration.

Actual Behavior:

The event does not trigger unless the video constraints in the configuration are uncommented.

Steps to Reproduce:

  1. Comment out the constraints block in the scannerConfig.
  2. Scan a QR code.
  3. Observe that no events are triggered.

Additional Information:

  • It seems like the scanner configuration requires explicit video constraints to function. However, I need flexibility in handling different devices and conditions where predefined constraints might not be ideal.

Potential Solutions or Suggestions:

  • Is there a way to set default constraints that are more adaptive to different devices?
  • Could this issue be related to browser permissions or media device compatibility?

Hey :)

I'm not reproducing your problem right now. No matter if the config is empty or not, I manage to log in the subscribe..
Can you provide more information about your project conf ?

Thanks @Nathanael-Rayapin for your quick response. After a couple of tests, I found out that the QR code is working. But no matter what, once the constraints are added it's not possible anymore to scan a bar code.

I will leave this topic open to the owner of this repository because it should be noticed somewhere or upgraded. But for me it's fixed, because I only need a QR code.

Thanks again, really appreciated