The main purpose of the project is to demonstrate how it's possible to make a fully working visual barcode scanner which is also a web app but also installable as a native app with the help of some modern browser APIs.
This is a web-based project built with Angular using some of its latest features like standalone components, signals, control flow and ligthning fast builds with esbuild (which is currently the default bundler for Angular).
The project is also a Progressive Web App (PWA) thanks to the Angular and its service worker. It covers all requirements for the web manifest configuration and meta tags for a "full green check" on Google's Lighthouse PWA analysis.
For camera streaming and capture I use the media devices interface from the Web RTC API. The app also detects all video devices (in some phones it could detect all of the rear cameras) and provides a select menu that allows the users to switch between different sources.
For barcode detection I use the Barcode Detection API. This API works like a charm but unfortunately there's still a big gap in the browser support. To fill this gap I've implemented a Barcode Detection API polyfill which is also published as an NPM package.
Not a new thing at all, but essential for the app, is the usage of a canvas for drawing. The app renders a transparent canvas element on top of the video stream. The canvas is used to draw the outline of all detected barcodes from the video frames. The barode detection and drawing happens in a specific time interval which is also configurable.
The project also includes a simple Netlify function which is used for product search from detected barcodes. The function uses Axios and Cheerio to scrape information from barcode.bg - a Bulgarian website with huge database of barcodes with a free access (but obviously without an API 😂).
Since the project uses Angular 17, you need to meet its minimum requirement for NodeJS which is v18.13.0
Run ng serve for a dev server powered by Vite. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run npm run test to execute the unit tests via Karma in a headless browser.
Run ng lint or npm run lint to execute code linting via Angular ESLint. Run the same command with --fix argument to automatically fix some of the errors.
Run npm run stylelint to execute stylesheet linting via StyleLint. Run the same command with --fix argument to automatically fix some of the errors.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.