Skip to content

Improve barcode scanning with native BarcodeDetector - #12784

Open
BI7KHI wants to merge 4 commits into
inventree:masterfrom
BI7KHI:qr-native-scan
Open

Improve barcode scanning with native BarcodeDetector#12784
BI7KHI wants to merge 4 commits into
inventree:masterfrom
BI7KHI:qr-native-scan

Conversation

@BI7KHI

@BI7KHI BI7KHI commented Sep 4, 2026

Copy link
Copy Markdown

Use the browser-native BarcodeDetector (Shape Detection API) for camera barcode scanning when available, falling back to html5-qrcode. Native decoding is hardware-accelerated and far more robust to low light, blur and small codes than the pure-JS software decoder.

Also:

  • Prefer the rear camera and higher resolution for better recognition
  • Add a flashlight (torch) toggle for low-light scanning
  • Full-frame detection (no aiming box) with multi-code support
  • Relax camera constraints (ideal instead of exact)
  • Fix a bug where the native
demo

Use the browser-native BarcodeDetector (Shape Detection API) for camera
barcode scanning when available, falling back to html5-qrcode. Native
decoding is hardware-accelerated and far more robust to low light, blur
and small codes than the pure-JS software decoder.

Also:
- Prefer the rear camera and higher resolution for better recognition
- Add a flashlight (torch) toggle for low-light scanning
- Full-frame detection (no aiming box) with multi-code support
- Auto-select a camera so scanning starts without manual selection
- Relax camera constraints (ideal instead of exact) for mobile robustness
- Fix a bug where the native <video> element was not rendered before
  scanning started, making the play button unresponsive
@netlify

netlify Bot commented Sep 4, 2026

Copy link
Copy Markdown

Deploy Preview for inventree-web-pui-preview ready!

Name Link
🔨 Latest commit b26e5e9
🔍 Latest deploy log https://app.netlify.com/projects/inventree-web-pui-preview/deploys/6a9e1b92413a890008dd8df1
😎 Deploy Preview https://deploy-preview-12784--inventree-web-pui-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 93 (🔴 down 1 from production)
Accessibility: 82 (no change from production)
Best Practices: 92 (no change from production)
SEO: 78 (no change from production)
PWA: -
View the detailed breakdown and full score reports
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Comment thread src/frontend/src/components/barcodes/BarcodeCameraInput.tsx Outdated
Comment thread src/frontend/src/components/barcodes/BarcodeCameraInput.tsx Outdated
The videoConstraints.facingMode override in the legacy html5-qrcode
path replaced the selected camera ID entirely, so selfie/front cameras
could not be used. Remove the facingMode preference from both scan
paths and rely on the camera selector, which already auto-selects the
rear camera when available.
@SchrodingersGat SchrodingersGat added barcode Barcode scanning and integration User Interface Related to the frontend / User Interface labels Sep 5, 2026
@SchrodingersGat SchrodingersGat added this to the 1.6.0 milestone Sep 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

barcode Barcode scanning and integration User Interface Related to the frontend / User Interface

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants