-
Notifications
You must be signed in to change notification settings - Fork 55
[WC-3032] Add logic to use barcodedetector API for barcode scanner #1876
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR adds support for using the native browser BarcodeDetector API when available, falling back to the ZXing library for better performance. It introduces a new architecture with separate reader classes for native and ZXing implementations, along with improved video resolution settings.
- Refactors the barcode scanning logic into separate reader classes (native vs ZXing)
- Implements feature detection to automatically choose the best available API
- Increases video resolution limits to improve scanning performance on high-end devices
Reviewed Changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 5 comments.
Show a summary per file
File | Description |
---|---|
src/ui/BarcodeScanner.scss |
Adds debug styling to visually distinguish between native and ZXing detectors |
src/package.xml |
Bumps version from 2.4.2 to 2.5.0 for the new feature |
src/hooks/zxReader.ts |
New ZXing-based reader implementation extracted from useReader hook |
src/hooks/useReader.ts |
Refactored to use factory pattern for reader selection and return API type |
src/hooks/nativeReader.ts |
New native BarcodeDetector API reader implementation |
src/helpers/utils.tsx |
Extracts shared utilities and types, increases video resolution constraints |
src/helpers/barcode-detector.ts |
TypeScript definitions for native BarcodeDetector API |
src/helpers/barcode-detector-utils.tsx |
Utility functions for native BarcodeDetector feature detection and usage |
src/components/BarcodeScanner.tsx |
Updates to use new reader architecture and apply conditional CSS classes |
package.json |
Version bump to 2.5.0 |
CHANGELOG.md |
Documents the new native API support and resolution improvements |
packages/pluggableWidgets/barcode-scanner-web/src/hooks/zxReader.ts
Outdated
Show resolved
Hide resolved
packages/pluggableWidgets/barcode-scanner-web/src/hooks/nativeReader.ts
Outdated
Show resolved
Hide resolved
packages/pluggableWidgets/barcode-scanner-web/src/hooks/useReader.ts
Outdated
Show resolved
Hide resolved
packages/pluggableWidgets/barcode-scanner-web/src/hooks/useReader.ts
Outdated
Show resolved
Hide resolved
packages/pluggableWidgets/barcode-scanner-web/src/helpers/utils.tsx
Outdated
Show resolved
Hide resolved
bf89b73
to
deebbf9
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
e4ab700
to
de69b02
Compare
de69b02
to
5b7fc11
Compare
note: add Class "debug" on Properties -> Styling : Class in studio pro to check if BarcodeDetector API is being used.
if BarcodeDetector API is used, green border will be shown, otherwise, it is normal zxing/library.