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
- 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.
| @@ -1,114 +1,57 @@ | |||
| # bedrock-web-pouch-edv ChangeLog | |||
There was a problem hiding this comment.
@davidlehn if you have time and could help wipe out / squash-away the old history from the module this built off of before we release 1.0 that would be great, it's ok if not.
| - Implemented `effectiveShowQrBox` computed property for mode-aware UI rendering | ||
| - Automatically disables QR box overlay when MRZ mode is active | ||
| - Makes mode-specific behavior explicit in code rather than implicit |
There was a problem hiding this comment.
Maybe we make this more generic and say "show heads up display (HUD)", which will change based on the mode?
| - Implemented `effectiveShowQrBox` computed property for mode-aware UI rendering | |
| - Automatically disables QR box overlay when MRZ mode is active | |
| - Makes mode-specific behavior explicit in code rather than implicit | |
| - Implemented `showHud` computed property for mode-aware UI rendering | |
| - Automatically disables QR box overlay when MRZ mode is active | |
| - Makes mode-specific behavior explicit in code rather than implicit |
| - **`formats`** (Array|null, default: `null`): Override default formats for scanType | ||
| - Example: `:formats="['pdf417_enhanced']"` for legacy driver license parsing | ||
| - **Note:** This is for advanced use cases and legacy support only |
There was a problem hiding this comment.
I don't think this is actually a different format that's being parsed, it's a request to use a different underlying engine, right? Perhaps we could just have a flag that says "useThirdPartyEngine: true/false" that we remove later? Or something like this?
| }, | ||
| emits: ['result', 'error', 'close'], | ||
| setup(props, {emit}) { | ||
| console.log('🔍 Props:', props); |
There was a problem hiding this comment.
We will want to remember to remove debug logging prior to merge.
| // TODO: double check and remove this logic from OpticalScanner as | ||
| // CameraScanner should be handle this |
There was a problem hiding this comment.
TODO needs to be addressed or converted into a github issue for later.
| // emit('error', { | ||
| // message: error.message || 'File scanning failed', | ||
| // code: error.code || 'FILE_SCAN_ERROR' | ||
| // }); | ||
| } | ||
| // finally { | ||
| // scanning.value = false; | ||
| // } |
There was a problem hiding this comment.
There is still a considerable amount of commented coded (just one such example highlighted here) and such (e.g., debug logging) that we want to remove before merging.
| export {PouchEdvClient} from './PouchEdvClient.js'; | ||
| export {default as OpticalScanner} from '../components/OpticalScanner.vue'; | ||
| export {default as ScannerUI} from '../components/ScannerUI.vue'; | ||
| export {CameraScanner} from '@bedrock/web-optical-scanner'; |
There was a problem hiding this comment.
Does this need to be re-exported? If not, let's not do so right now -- easy to add than to remove.
| @@ -1,51 +1,68 @@ | |||
| { | |||
There was a problem hiding this comment.
Don't check in package-lock in libraries.
3 participants
Uh oh!
There was an error while loading. Please reload this page.