ngx-scanner is an open-source Angular component, published on npm as @zxing/ngx-scanner under the MIT licence, that decodes QR codes, barcodes and DataMatrix codes from a device camera using the ZXing engine, and it is aimed at Angular developers who need scanning inside an existing application rather than in a separate mobile app.

What it is

ngx-scanner is an Angular component that turns a live camera feed into decoded barcode, QR code and DataMatrix results. It is written in TypeScript and depends on ZXing for the actual decoding work, which means the recognition logic comes from a mature barcode-reading engine rather than from code maintained inside this project. The component is distributed as the npm package @zxing/ngx-scanner, and according to the README usage is intended to be as simple as placing the component in an Angular template. It sits in the Angular and zxing-js ecosystem, and the project maintains version alignment with the framework: the package major version matches the supported Angular major, so @zxing/ngx-scanner@21.0.0 targets Angular 21, and future releases will keep using the same major as the Angular version they support.

The concrete problem it removes is the plumbing between camera access and barcode decoding. Any Angular application that wants to read a code has to request camera permissions, manage a media stream, feed frames to a decoder and surface results and errors in the UI. ngx-scanner packages that whole chain into one reusable component, so a team integrating scan-to-lookup behaviour does not write and maintain its own camera-to-decode pipeline. It replaces custom, hand-rolled scanning code in Angular projects with a dependency that can be versioned and upgraded alongside the framework.

Key capabilities

• Decodes QR code, barcode and DataMatrix formats through the ZXing engine.
• Ships as the npm package @zxing/ngx-scanner so it can be added as a normal Angular dependency.
• Aligns major versions with Angular: @zxing/ngx-scanner@21.0.0 corresponds to Angular 21, and later releases will follow the same scheme.
• Uses the device camera directly in the browser, as reflected in the project's camera topic, with no native application required.
• Requires HTTPS in production environments, which the README states as a requisite with a linked explanation.
• Provides a hosted demo at https://zxing-js.github.io/ngx-scanner/ and a StackBlitz instance for trying the component without local setup.
• Documents setup and tuning in a wiki, including a Getting Started page and a Performance Considerations page.

Who uses it and how

• Angular teams adding a scan step to an existing web application, where the component is consumed as one npm dependency rather than as a separate service.
• Developers evaluating first, using the online demo or the StackBlitz instance before committing to the package in a codebase.
• Production deployments served over HTTPS, since camera access in the browser depends on a secure context and on the user granting permission.
• Projects pinned to a specific Angular major, which select the matching package major to stay compatible.
• Contributors and backers, including participants drawn in through the hacktoberfest topic and supporters funding the work through the project's Open Collective.

Getting started

The component is installed from npm as @zxing/ngx-scanner, and the README points to the project wiki's Getting Started page for the setup steps. Version compatibility is determined by matching the package major to the Angular major in use, and any production deployment must be served over HTTPS.

How it compares

Within the same zxing-js family, the README points to ngx-kjua for generating QR codes and to the ZXing TypeScript port at zxing-js/library for writing codes directly, so ngx-scanner is the scanning front end for Angular rather than a generator or a general-purpose decoder library. A project that only needs to produce codes should look at those two instead.

When to use it — and when not to

There is no server-side component to operate, since the scanning runs in the browser, but a self-hoster still has to serve the application over HTTPS and handle camera permissions from users. Anyone who needs guaranteed vendor support should not choose it: the README carries a "Maintainer wanted" badge and states plainly that the maintainers no longer have time to actively maintain zxing-js, while welcoming new maintainers to take the lead. The repository also carries a substantial number of open issues and a README thin enough that real detail lives on the wiki, so teams should budget for reading that documentation and for the possibility that fixes arrive slowly.

<!-- some.component.html -->
<zxing-scanner></zxing-scanner>