Open
Description
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:
- Comment out the
constraints
block in thescannerConfig
. - Scan a QR code.
- 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
Labels
No labels