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
| - `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: '...'
}
}
}
| - `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.
| 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?
Uh oh!
There was an error while loading. Please reload this page.