Skip to content

Config input break the scanner events #60

Open
@etsraphael

Description

@etsraphael

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions