NiceGUI barcode scanner app

This project demonstrates how to create a barcode scanner using the ZXing library wrapped in a NiceGUI custom Vue component. Based on this discussion, and inspired by the custom vue component example.

Usage

Install the package from PyPI:

pip install nicegui nicegui-scanner

Basic Example

Create a simple barcode scanner app (save as scanner_app.py):

from nicegui import ui
from nicegui_scanner import BarcodeScanner

def on_scan(event):
    ui.notify(f"Scanned: {event.args}")

scanner = BarcodeScanner(on_scan=on_scan)
scanner.create_control_buttons()

ui.run()

Then run: python scanner_app.py

Features

• Easy Integration: Drop-in component for NiceGUI apps - no additional setup required after pip install
• Camera Selection: Automatic camera detection with settings UI
• Flexible Styling: Use standard CSS via .style() method
• Multiple Formats: Supports QR codes, barcodes, and more via ZXing

Examples

See the examples/ directory for:

• app.py - Multiple scanner configurations
• pages.py - Usage with NiceGUI pages

Mobile Browsers

Mobile browsers typically require a secure context before they expose the camera. Serve your NiceGUI app over HTTPS (even on a local network) or use localhost during development, and accept the browser's camera prompt. The component relies on the ZXing library, so device support follows its limitations.

To test the compatibility of your device with the ZXing component, please use this Javascript-only web app:

https://www.serraict.com/scanner-pwa/

If that app works, then the ZXing component is compatible with your device, and the nicegui-scanner component should be too.

Development

To develop this component, install dependencies and run the example app:

npm install  # Install ZXing library
uv sync      # Install Python dependencies
make dev     # Run example app

This will start the example app on http://localhost:3001 with multiple scanner demos.

To release a new version, run make release. This will bump the version number and push to Github, where the release workflow will build and publish to Github.