Vue components supporting bedrock web optical scanner library #1
Conversation
- Implements plugin architecture for optical scanning with MRZ, QR, and PDF417 support. - Integrates Dynamsoft MRZ scanner with native camera interface for passport/ID scanning. - Adds scan type selection UI with dedicated modes for different document types. - Includes validation logic for MRZ field integrity and critical field checking. - Configures timeout handling and scanning mode coordination between continuous and camera-based scanning. - Provides Vue.js components (OpticalScanner, ScannerUI) with reactive state management.
|
@mandyvenables, for some reason, I can't add James as one of the reviewers. |
- Replace direct OpticalScanner usage with CameraScanner abstraction - Delegate all scanning complexity to bedrock-web-optical-scanner module - Simplify configuration to scanType/scanMode props instead of plugin setup - Use event-based result handling for cleaner separation of concerns - Enable thin framework wrapper pattern
- Separate camera-area for CameraScanner and overlay-area for Vue UI - Provide cameraContainer ref for CameraScanner management - Focus purely on Quasar/Vue-specific UI components and styling - Remove scanning logic to achieve thin wrapper architecture - Enable framework-agnostic scanning with Vue-specific presentation layer
- Demonstrate proper usage of thin OpticalScanner wrapper - Add architecture validation messaging for delegation testing - Simplify demo to focus on result display and UI interaction - Show successful Vue > CameraScanner > OpticalScanner flow
README.md
Outdated
| - `tipText`: Instruction text for users | ||
| - `showQrBox`: Boolean to show/hide scanning frame overlay | ||
| - `torchOn`: Boolean to control camera flash | ||
| - `licenseKey`: Dynamsoft License key for enhanced scanning features |
There was a problem hiding this comment.
I think this should be nested inside dynamsoft options, which itself should perhaps be nested inside thirdParty. I think that could be a good future proof design if other third party scanners are required in the future:
{
thirdParty: {
dynamsoft: {
licenseKey: '...'
}
}
}
There was a problem hiding this comment.
Addressed in this commit - 572bdcd
Updated the README instructions for details.
| - `scanType` (required): `'mrz'` or `'barcode'` | ||
| - `scanMode`: `'first'` (default), `'all'`, or `'exhaustive'` | ||
| - `tipText`: Instruction text for users | ||
| - `showQrBox`: Boolean to show/hide scanning frame overlay |
There was a problem hiding this comment.
This seems like an odd option to not be namespaced based on the scan mode -- does it mean you could have a QR box when using mrz? It seems like the options API could be refactored a little w/namespacing that would be more intentional vs. a flat structure of options that won't all necessarily work together properly.
Can this be done in some idiomatic way in vue or would it be too messy? If it's messy -- maybe it's a sign that we haven't broken up the components or used the primitives quite right. Or that I'm overthinking it and this will be good enough.
There was a problem hiding this comment.
I can implement a complex structure with namespacing, but I think it will be messy and is not required at least at the current implementation/usage level. If it is still required, I'm happy to work on the props refactoring.
Addressed in this commit - 572bdcd
Updated the README instructions for details.
README.md
Outdated
| Key Features Demonstrated: | ||
|
|
||
| - MRZ Scanning: Passport and ID document recognition with field validation | ||
| - Barcode Scanning: QR codes, PDF417, and enhanced PDF417 for driver licenses |
There was a problem hiding this comment.
What is "enhanced PDF417"? I think that's probably an implementation detail of a third party scanner (dynamsoft)? I don't think we should mention it here -- and keep it as an implementation detail we always internally turn on for anyone using that third party scanner. Is there a reason to ever disable it when using that third party, etc.?
I think it will be more API surface area that will have to change if the third party dynamsoft scanner isn't supported in the future (i.e., just more for someone to refactor -- without significant benefit?).
Come to think of it, I don't think we plan on supporting third party scanners for PDF417 -- only MRZ at the moment?
There was a problem hiding this comment.
enhanced PDF417 - just a name used for PDF417 scan with Dynamsoft SDK (third-party scanner).
Understood. I have updated the implementation.
Summary:
- By default, the open source barcode detector API is used for
qr_codeandpdf417scan - For details, please refer to the README instructions.
Addressed in this commit - 572bdcd
- Remove licenseKey prop from OpticalScanner component API. - Add configuration section to README explaining bedrock config setup. - Update props documentation to clarify mode-specific behavior (showQrBox, torchOn apply to barcode mode only). - Implement effectiveShowQrBox computed property for mode-aware UI rendering. - Add troubleshooting section addressing common questions. - Clarify enhanced PDF417 as hidden/legacy feature accessible via formats override. - Document license key management architecture and design rationale. This change addresses feedback to hide third-party dependencies from public API, making it easier to swap scanning providers in the future without breaking changes.
3 participants
Uh oh!
There was an error while loading. Please reload this page.