Vue components supporting bedrock web optical scanner library #1

bparth24 · 2025-09-15T02:19:27Z

Provides Vue.js components (OpticalScanner, ScannerUI) with reactive state management.
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.

- 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.

bparth24 · 2025-09-15T02:21:56Z

@mandyvenables, for some reason, I can't add James as one of the reviewers.

…r option

- 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

demo/App.vue

components/ScannerUI.vue

README.md

- 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.

dlongley · 2025-10-15T03:11:14Z

CHANGELOG.md

@@ -1,114 +1,57 @@
-# bedrock-web-pouch-edv ChangeLog


@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.

@dlongley @davidlehn

There is a PR already - digitalbazaar/bedrock-module-template-web#1 -- need to make decision on where certain content should be -- readme versus some other place.

dlongley · 2025-10-15T03:12:22Z

CHANGELOG.md

+- 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


Maybe we make this more generic and say "show heads up display (HUD)", which will change based on the mode?

Suggested change

- 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

dlongley · 2025-10-15T03:13:56Z

README.md

+- **`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


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?

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?

@dlongley

Question about useThirdPartyEngine implementation:

Where should the conversion from the useThirdPartyEngine boolean to the internal
pdf417_enhanced format string happen?

Option A - Convert in Vue layer:

Vue: useThirdPartyEngine={true} -> formats=['pdf417_enhanced']

Web module: Receives formats array (already implemented this way)

Pro: No changes to web module API

Con: Additional conversion logic; "pdf417_enhanced" - not good from a reusability point of view.

Option B - Convert in a web optical scanner module:

Vue: Passes useThirdPartyEngine: Boolean directly to CameraScanner

Web optical scanner module: Internally maps boolean → format string

Pro: "pdf417_enhanced" stays completely hidden; single source of conversion logic

Con: Requires adding a new parameter to the CameraScanner constructor

Which approach aligns better, according to you?

My inclination is Option B for now, but I wanted to confirm that this aligns with your vision before finalizing.

dlongley · 2025-10-15T03:15:18Z

components/OpticalScanner.vue

+  },
+  emits: ['result', 'error', 'close'],
+  setup(props, {emit}) {
+    console.log('🔍 Props:', props);


We will want to remember to remove debug logging prior to merge.

dlongley · 2025-10-15T03:17:05Z

components/OpticalScanner.vue

+    // TODO: double check and remove this logic from OpticalScanner as
+    // CameraScanner should be handle this


TODO needs to be addressed or converted into a github issue for later.

dlongley · 2025-10-15T03:18:26Z

components/OpticalScanner.vue

+        // emit('error', {
+        //   message: error.message || 'File scanning failed',
+        //   code: error.code || 'FILE_SCAN_ERROR'
+        // });
+      }
+      // finally {
+      //         scanning.value = false;
+      //       }


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.

dlongley · 2025-10-15T03:21:27Z

lib/index.js

-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';


Does this need to be re-exported? If not, let's not do so right now -- easy to add than to remove.

dlongley · 2025-10-15T03:21:45Z

package.json

@@ -1,51 +1,68 @@
 {


Don't check in package-lock in libraries.

bparth24 requested review from dlongley, mandyvenables and msporny September 15, 2025 02:19

dlongley requested a review from jameseaster September 15, 2025 15:23

bparth24 added 10 commits September 15, 2025 10:37

constrain MRZ scanner to component container using Dynamsoft containe…

79f7fad

…r option

functional mrz scan - working demo

4431075

Update eslint and ensure eslint rules followed in all files

33e0463

Update changelog

f9fc57c

Update readme instructions

74091fd

Update package.json dependencies

7616656

Remove edv pouch related test files from this lib

b26b660

dlongley reviewed Sep 28, 2025

View reviewed changes

demo/App.vue Show resolved Hide resolved

components/ScannerUI.vue Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

README.md Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

bparth24 and others added 6 commits September 28, 2025 13:54

Rename directory - src to demo - for clarity

6c31ffd

docs: remove word from OpticalScanner comment

850cb90

Update package.json

394872f

Update package.json

0721419

Update ScannerDemo.vue

bb6385c

bparth24 requested a review from dlongley October 12, 2025 02:25

Update Changelog.

a37b8cd

bparth24 requested review from BigBlueHat and tminard October 12, 2025 17:01

dlongley requested changes Oct 15, 2025

View reviewed changes

		// TODO: double check and remove this logic from OpticalScanner as
		// CameraScanner should be handle this

Vue components supporting bedrock web optical scanner library #1

Are you sure you want to change the base?

Vue components supporting bedrock web optical scanner library #1

Uh oh!

Conversation

bparth24 commented Sep 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bparth24 commented Sep 15, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bparth24 Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bparth24 commented Sep 15, 2025 •

edited

Loading

bparth24 Oct 20, 2025 •

edited

Loading