ngx-custom-qr-scanner

A reusable Angular QR scanner library.

Installation

npm install ngx-custom-qr-scanner

Setup

1. Import the Component

Import NgxCustomQrScannerComponent in your standalone component or module.

import { Component } from '@angular/core';
import { NgxCustomQrScannerComponent } from 'ngx-custom-qr-scanner';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxCustomQrScannerComponent],
  template: '<ngx-custom-qr-scanner (qrdata)="onQrData($event)"></ngx-custom-qr-scanner>'
})
export class AppComponent {
  onQrData(data: any) {
    console.log('QR Code:', data);
  }
}

2. Troubleshooting

Black Screen / Camera Not Working

If you see a black screen instead of the camera feed:

1. Permissions: Ensure you have granted camera permissions to the browser.
2. HTTPS: The camera API only works on Secure Contexts (HTTPS) or localhost. If you are deploying to a non-secure HTTP server, the camera will not work.
3. Device Support: Ensure the device has a camera. The scanner defaults to environment (back) camera.