Barcodescanner controls

[serra]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui

ui.scanner()

ui.run

Description

I'd like to add a bar- and qr code scanner control to my nicegui app.
There are many open source web libraries that support this, e.g. scanapp and zxing.
The user should use their phone's camera or a webcam attached to their computer to scan a barcode.
The program should have access to the scanned code.

Are you aware of a NiceGUI control or plugin I could use for this purpose?

If no such control does yet exist, how would you suggest I create one?

NiceGUI Version

2.19

Python Version

3.12

Browser

Chrome

Operating System

Linux

Additional Context

I am aware of barcode scan and amazon lookup application #2028, but as far as I can tell, that NiceGUI app uploads images and scans those.

[thevinchi]

I believe a custom vue component is the nicegui way to solve this use case. I’ve done this a few times with other JS libraries (e.g. xterm.js) in the past, and it turned out to be a very elegant way to wire everything together.

Here’s an example of a custom component if you need it:
https://github.com/zauberzeug/nicegui/tree/main/examples/custom_vue_component

[serra]

Thnx for the feedback @thevinchi and @falkoschindler .

I created a basic nicegui_scanner app.
Will probably explore more at a later time, but for my purposes it already works well enough.

What is the best/preferred way to bundle node modules with a nicegui app?
Other feedback is welcome as well of course.

[thevinchi]

Hey @serra, I’m happy that example was useful. As for node_modules, I tend to just cherry pick the necessary .js and .css files and any other dependencies from node_modules/… and roll them into a static assets folder. 🤷

This has always seemed like a sloppy way to handle things, but it has worked for me so far. Would love to know how others handle this. There must be a better way!

[falkoschindler]

Putting JS and CSS files into a static folder is fine as long as it works. Some libraries, however, come in chunks or depend on other libraries. This is where it might be easier to use rollup or vite to generate a bundle that can be imported.

Right now I'm actually working on the way NiceGUI manages its own dependencies (PR #5021). Hopefully this improves the compatibility with web standards so that it becomes easier to include user-defined dependencies.

[serra]

I have packaged my experimental application, it is published on PyPi.

pip install nicegui nicegui-scanner

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_controls()

ui.run()

[falkoschindler]

Very nice! 😀