The library has peerDependencies from Angular 16:

"peerDependencies": {
    "@angular/common": "^16.0.0",
    "@angular/core": "^16.0.0"
},

which makes it impossible to use this library with Angular 16.
Is it possible to upgrade to Angular 17?

Thanks!

Hi, I have some quetion about this library:

1. I see that in the output there is a "quality" attribute. Is it intended to manage false positive? What is the value range? Is an higher value better?

2. I'm trying to save resources (CPU, RAM) using a low frame rate, but it doesn't seem to work. If i set the framerate to 1fps, the library continue scanning with an high frequency ( I can see it according to numbers of bips and outputted code)

  public config: ScannerQRCodeConfig = {
    constraints: {
      video: {
        width: window.innerWidth,
      },
      audio: false
    },
    fps: 1

    decode: 'utf-8', // Codifica del codice rilevato. Opzioni possibili = { 'utf-8' , 'iso-8859-15' , 'windows-1252', 'macintosh' }
  };

3. What are the differences between stopping or pausing the camera?

4. Is there a way to understand if we are on mobile or desktop, so we can show the toarch icon only on mobile?

Thank you very much in advice for your support and for your great job

Hi, thanks for providing this code. I've used it for a QR-Code scanner with vs. 1.0.17 without any problems. Now I tried out the current version 1.2.6 and had the following issue when trying to start the scanner in my chrome-Browser:
platform-browser.mjs:564 GET http://<ip,port>/assets/wasm/index.js net::ERR_ABORTED 404 (Not Found)
Refused to execute script from 'http://<ip,port>/assets/wasm/index.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
core.mjs:7739 ERROR Error: Uncaught (in promise): ReferenceError: zbarWasm is not defined
ReferenceError: zbarWasm is not defined

Any idea how to solve this problem?
Thanks in advance for your response!

Does this plugin work in navigator?

I have a weird situation. I'm using the example and selecting two types of cameras to recognize an EAN13 Barcode: my MacBook FaceTime built-in camera and my iPhone 12 with the Elgato Camera Hub.

When I try to scan with the MacBook webcam, I don't get any response. However, if I use the Elgato Camera Hub, it only recognizes the barcode if my iPhone camera is in horizontal mode.

Do I need to add any additional configurations for the camera? Thanks in advance.

im using the latest version of the package with angular 16

My angular CLI version is 15 and I copied the same code from your example but it is not working on mobile.

I use isBeep = false but there is still sound. How to turn off the sound?
angular version 16.2.4

How can I change for video square not 16:9?

Hello,
I work with Angular v17. In MacOs Chrome+Safari everything is fine. In iOs Safari there is an error message "TypeError: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia')". Do I have to go back to Angular 16+?

Hello,

I would like to change the selection color of the green polygon, how can I change its scss?

thanks

Hi,

Basically I want to scan only one QR Code and close the dialog window. When I scanned the QR Code its scans multiple times, may be 7-10 times.

I just want to scan one time every time dialog window opens. Can u help me?

Thanks in advance.

I am on angular version 14..2.12

On local environment it is working as aspected.
But on production mode it is throwing below error when we starting to reading barcode.

Error: Uncaught (in promise): RuntimeError: Aborted(both async and sync fetching of the wasm failed). Build with -sASSERTIONS for more info.

Hi the qr scanner is really wonderful and its working great. But I have one small issue in Samsung galaxy tab s8. For this device it doesn't open the back camera as default. It shows two front camera I attached the screenshot for your reference can you pls try to resolve this issue asap. Once again thankyou for your help.

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?

Hi, could someone provide me information about changing the components with CSS ? I use 1.5.8 version of the app in angular. I've implemented it but I couldn't change anything. Thank you for your time and effort.

I am using the library in angular 16.1.0 but when developing locally there is no problem with the permissions to use the camera, the problem is when it is deployed and it needs to access the device's camera and it does not request permissions, it stays in black screen and send this error.

escaner.component.html:40 ERROR TypeError: Cannot read properties of undefined (reading 'getUserMedia')
at NgxScannerQrcodeComponent.safariWebRTC (ngx-scanner-qrcode.mjs:980:32)
at NgxScannerQrcodeComponent.start (ngx-scanner-qrcode.mjs:707:18)
at EscanerComponent.handle (escaner.component.ts:68:17)
at EscanerComponent_Template_button_click_26_listener (escaner.component.html:40:140)
at executeListenerWithErrorHandling (core.mjs:15786:16)
at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:15819:22)
at HTMLButtonElement. (platform-browser.mjs:665:17)
at _ZoneDelegate.invokeTask (zone.js:402:31)
at core.mjs:25998:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:25998:36)

On Android in Chrome there are no errors, everything works correctly.

On iPhone SE 1st, iOS 15.8.1 in Chrome and Safari an error often occurs in a specific situation.

If I go from the news page to the about page and back several times, an error appears that I cannot debug. After it, GET requests stop working.

If you comment out GET requests, there is no error. If you remove ngx-scanner-crsode, then there is no error either.

Can you tell me where I should look to fix this?

My sample project with error: https://github.com/ordorub/ios
Screen video: https://mega.nz/file/zlsR1QDJ#9U14lv-ZTnlb52OR-6-lrgJxIfE-0klv9ImuXjrS7Jo

Is there any way to use the default back camera of any ios and android devices? The device index seems to vary for every mobile devices and also depends on how may back cameras are there.

I wanted to share a heads-up regarding a camera issue I encountered on localhost. It turns out the camera wasn't functioning as expected, possibly due to certain browsers hesitating to grant camera access on localhost without a valid SSL certificate.

For those who might encounter this

1. Run your Angular development server using

   ng serve --ssl true
   

2. Additionally, remember to include the --watch flag if needed.

Perhaps, it could be a helpful addition to the documentation as well.

@id1945, your thoughts on documenting this?

I have the below code to change the default camera but Back facing camera is not set as default by playDeviceFacingBack function

public enableScanner() { this.scannerEnabled = !this.scannerEnabled; if (this.scannerEnabled) { const playDeviceFacingBack = (devices: any[]) => { // front camera or back camera check here! console.log(devices); const device = devices.find((f) => /back|environment|rear/gi.test(f.label) ); // Default Back Facing Camera this.action.playDevice(device ? device.deviceId : devices[0].deviceId); }; this.action["start"](playDeviceFacingBack).subscribe( (r: any) => console.log('start', r), //alert ); this.action.start(); } else { this.action.stop(); } }

We want to use the ngx-scanner-qrcode.

Now we have the problem, that it does not work with small QR Codes (i.e. 3x3mm).

With normal or big QR Codes it works.

We think, the problems are that the auto focus/zoom does not work.

How we can activate auto focus/zoom and a higher resolution?

Thanks very much.

Hi

We wanted to use this library for scanning QR codes. We use version 1.4.1 because our application is written in Angular 13.

With "normal" QR codes it works fine.

But with very small QR codes it does not work.

How can we fix this? Is there any possibility to use a higher resolution oder something like that?

Thanks very much.

I tried it on the web and it worked perfectly, but I encountered a problem when implementing it on Ionic Angular. It seems like the camera is stuck and doesn't want to read QR codes or barcodes. Can you help me?

Hello! How are you!
I'm having trouble trying to scan using my smartphone camera.

When opening the demo, I noticed the same problem.

Is it possible to enable camera permission on smartphones?

Thank you very much for making the library available

I use your library to activate video scanning from a device and it's active until it scans the QR code, and it works great, thanks!

But...

I require scanning of inverted QR codes (white code on black background), and I've been trying all kinds of hacks to get it to work, but apparently it only registers black code on white background.

I have been trying to invert the input video, but to no avail.

It does not matter whats defined for [isBeep]. There is always a beep while scanning.

I tried true, false and undefined, but always the same.

This is related to #15 . Works on mobile, but on laptop it never prompts for camera permission.

If you follow the example given, nothing happens after pressing the "Start" button, no errors get printed on the console, so it just looked like nothing was happening...

Here's an "easy fix", get the camera permissions manually, this will activate your webcam, so I just immediately stop the stream.

Once I get the permission, and I go click on "Start", it works.

export class QrScanViewComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    navigator.mediaDevices.getUserMedia({video: true, audio: false})
      .then(stream => {
        stream.getTracks().forEach(track => track.stop());
      })
      .catch(err => {
        console.error('Error on get user media:', err);
      });
  }

}

Or you could just start the scanner immediately after you successfully got the permissions:

export class QrScanViewComponent implements OnInit, AfterViewInit {

  @ViewChild(NgxScannerQrcodeComponent) scanner!: NgxScannerQrcodeComponent;

  constructor() { }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    navigator.mediaDevices.getUserMedia({video: true, audio: false})
      .then(stream => {
        // Since we're starting the scanner, we might not need to stop the streams... dunno "\o/"
        // stream.getTracks().forEach(track => track.stop());
        this.scanner.start();
      })
      .catch(err => {
        console.error('Error on get user media:', err);
      });
  }

}

If we start the scanner immediately though, I'm not quite sure we'll need to stop the streams before we start again, commenting out that line seems to work fine (and faster, as it doesn't need to stop/start again), just not sure if there's any issues doing that. From my quick test so far, it works ok. Stopping the scanner also stops the camera.

npm WARN Conflicting peer dependency: @angular/[email protected]
npm WARN node_modules/@angular/common
npm WARN peer @angular/common@"^16.0.0 || 17.0.0 || 18.0.0" from [email protected]
npm WARN node_modules/ngx-scanner-qrcode
npm WARN ngx-scanner-qrcode@"^1.6.8" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: @angular/[email protected]
npm WARN node_modules/@angular/core
npm WARN @angular/core@"17.0.6" from the root project
npm WARN 24 more (@angular/animations, @angular/cdk, @angular/common, ...)