TypeScript icon, indicating that this package has built-in type declarations

0.3.7 • Public • Published

NPM version Downloads Dependency Status Build Status Codacy Badge

Deprecated! Please install @zxing/ngx-scanner instead!


Angular QR-Code scanner component.

Features & Hints

  • Supports continuous scanning.
  • There is a delay of 1500ms after each successful scan, before a new QR-Code can be detected.
  • Supports iOS 11 (only in Safari via HTTPS).
  • Nice devs behind it. 🤓



To install this package, run:

yarn add @zxing/ngx-scanner@latest

Then import it into your Angular AppModule:

// Common imports
import { NgModule /* , ... */ } from '@angular/core';
// Import the package's module
import { NgxZxingModule } from 'ngx-zxing';
    declarations: [ /* AppComponent ... */ ],
    imports: [
        // BrowserModule, 
        // ...
        // ZXing scanner module
        // another imports...
    // ...
export class AppModule { }


Once the package is imported, you can use it in your Angular application:

  • start can be used to start and stop the scanning (defaults to false)
  • device is the video-device used for scanning (use one of the devices emitted by onCamsFound)
  • cssClass this CSS-class name will be appended to the video-element e.g. for resizing it (see below)
  • camerasFound will emit an array of video-devices after view was initialized
  • scanSuccess will emit the result as string, after a valid QR-Code was scanned

Change the size of the preview-element

In your CSS, define an extra class and pass it to the component with the cssClass-parameter. CSS might look like this:

.small-video {
    max-height: 70vh;
    width: 100vw;
    object-fit: contain;


Method Parameters Returns Description
changeDevice device: MediaDeviceInfo void Allows you to properly change the scanner device on the fly.
camerasFound callback: (devices: MediaDeviceInfo[]) => {} EventEmitter<MediaDeviceInfo > Emits an event when cameras are found.
camerasNotFound callback: (): void => {} EventEmitter<void> Emits an event when cameras are not found.
scanSuccess callback: (result: string): void => {} EventEmitter<string> Emits an event when a scan is successful performed.
scanFailure callback: (): void => {} EventEmitter<void> Emits an event when a scan fails.
scanError callback: (error: any): void => {} EventEmitter<any> Emits an event when a scan throws an error.


Copied from Instascan by Chris Schmich:

Many factors affect how quickly and reliably ZXing can detect QR codes.

If you control creation of the QR code, consider the following:

  • A larger physical code is better. A 2" square code is better than a 1" square code.
  • Flat, smooth, matte surfaces are better than curved, rough, glossy surfaces.
  • Include a sufficient quiet zone, the white border surrounding QR code. The quiet zone should be at least four times the width of an individual element in your QR code.
  • A simpler code is better. You can use this QR code generator to see how your input affects complexity.
  • For the same length, numeric content is simpler than ASCII content, which is simpler than Unicode content.
  • Shorter content is simpler. If you're encoding a URL, consider using a shortener such as or

When scanning, consider the following:

  • QR code orientation doesn't matter.
  • Higher resolution video is better, but is more CPU intensive.
  • Direct, orthogonal scanning is better than scanning at an angle.
  • Blurry video greatly reduces scanner performance.
  • Auto-focus can cause lags in detection as the camera adjusts focus. Consider disabling it or using a fixed-focus camera with the subject positioned at the focal point.
  • Exposure adjustment on cameras can cause lags in detection. Consider disabling it or having a fixed white backdrop.


  • The component relies on zxing-typescript which currently supports only QR-codes and no 1D-Barcode formats


Looking for a way to generate QR-Codes? Check-out ngx-kjua



npm i ngx-zxing

DownloadsWeekly Downloads






Unpacked Size

13.4 MB

Total Files


Last publish


  • werthd