From 44cb6614732b3f08d8929bf6c9e67803c14ebfbf Mon Sep 17 00:00:00 2001 From: Artsiom Tsybulko Date: Wed, 21 Jan 2026 12:39:31 +0300 Subject: [PATCH] Add backend reprocessing with manual multi-page processing sample --- README.md | 9 ++ .../backend-reprocessing/index.html | 18 +++ .../backend-reprocessing/index.ts | 106 ++++++++++++++++++ .../backend-reprocessing/package.json | 16 +++ .../backend-reprocessing/styles.css | 42 +++++++ .../backend-reprocessing/tsconfig.json | 22 ++++ manual-multi-page/react/package.json | 4 +- manual-multi-page/typescript/package.json | 2 +- 8 files changed, 216 insertions(+), 3 deletions(-) create mode 100644 manual-multi-page/backend-reprocessing/index.html create mode 100644 manual-multi-page/backend-reprocessing/index.ts create mode 100644 manual-multi-page/backend-reprocessing/package.json create mode 100644 manual-multi-page/backend-reprocessing/styles.css create mode 100644 manual-multi-page/backend-reprocessing/tsconfig.json diff --git a/README.md b/README.md index dc4fb42..0201bd5 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,7 @@ 1. [Controller sample](#controller-sample) 1. [UI-components sample](#ui-components-sample) 1. [Switch to mobile sample](#switch-to-mobile-sample) +1. [Manual multi-page sample](#manual-multi-page-sample) 1. [CodePen samples](#codepen-samples) --- @@ -122,6 +123,14 @@ The ```switch-to-mobile``` folder contains an example of using Document reader c Follow the steps as in [Webpack sample](#webpack-sample). +## Manual multi-page sample + +The ```manual-multi-page``` folder contains an example of using Document reader component for manual control of document page scanning. + +### Example installation + +Follow the steps as in [Webpack sample](#webpack-sample). + ## CodePen samples ### Camera snapshot component diff --git a/manual-multi-page/backend-reprocessing/index.html b/manual-multi-page/backend-reprocessing/index.html new file mode 100644 index 0000000..6ca766a --- /dev/null +++ b/manual-multi-page/backend-reprocessing/index.html @@ -0,0 +1,18 @@ + + + + + + + My app + + +
+ + +
+
Press "Start new document" to start scanning document.
+ + + diff --git a/manual-multi-page/backend-reprocessing/index.ts b/manual-multi-page/backend-reprocessing/index.ts new file mode 100644 index 0000000..d2c77b1 --- /dev/null +++ b/manual-multi-page/backend-reprocessing/index.ts @@ -0,0 +1,106 @@ +import { + defineComponents, + DocumentReaderService, + InternalScenarios, + DocumentReaderWebComponent, + DocumentReaderDetailType, + TransactionEvent, + EventActions, + ResponseCode, +} from '@regulaforensics/vp-frontend-document-components'; +import './styles.css'; + +const newDocumentButton = document.querySelector('#new-document') as HTMLButtonElement; +const nextPageButton = document.querySelector('#new-page') as HTMLButtonElement; +const info = document.querySelector('.info') as HTMLDivElement; + +window.RegulaDocumentSDK = new DocumentReaderService(); +window.RegulaDocumentSDK.recognizerProcessParam = { + processParam: { + scenario: InternalScenarios.MrzAndLocate, + multipageProcessing: true, + backendProcessing: { + serviceURL: 'YOUR_SERVICE_URL', + httpHeaders: { // you can set http headers if necessary + key1: 'header1', + key2: 'header2', + key3: 'header3' + } + }, + }, +}; +window.RegulaDocumentSDK.imageProcessParam = { + processParam: { + scenario: InternalScenarios.MrzAndLocate, + }, +}; + +defineComponents().then(() => window.RegulaDocumentSDK.initialize()); +// To use the document-reader component on test environments, you have to set the base64 license +// defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: 'YOUR_BASE64_LICENSE_KEY' })); + +function createDocumentReader() { + const documentReaderElement = document.createElement('document-reader') as DocumentReaderWebComponent; + const container = document.createElement('div'); + documentReaderElement.setAttribute('new-layout', 'true'); + container.setAttribute('class', 'reader-container'); + container.append(documentReaderElement); + + documentReaderElement.settings = { + uploadFileButton: false, + manualMultipageMode: true, + } + + return container; +} + +function documentReaderListener(data: CustomEvent) { + const reader = document.querySelector('.reader-container'); + const action = data.detail.action; + + if (action === EventActions.PROCESS_FINISHED) { + const status = data.detail.data?.status; + const isFinishStatus = status === ResponseCode.OK || status === ResponseCode.TIMEOUT; + const responseData = data.detail.data; + + if (isFinishStatus && responseData?.response) { + const isMorePagesAvailable = !!responseData.response.rawResponse.morePagesAvailable; + + info.textContent = 'Check your result in the console. '; + + if (isMorePagesAvailable) { + nextPageButton.disabled = false; + info.textContent += 'More pages are available, click "Start new page" ' + + 'to continue scanning, or start scanning a new document by clicking "Start new document".'; + } else { + void window.RegulaDocumentSDK.finalizePackage(); + } + console.log(responseData.response); + + reader?.remove(); + } + } + if (action === EventActions.CAMERA_PROCESS_CLOSED) reader?.remove(); +} + +function newDocumentButtonListener() { + if (!window.RegulaDocumentSDK) return; + + info.textContent = ''; + nextPageButton.disabled = true; + void window.RegulaDocumentSDK.createBackendTransaction(); + document.body.append(createDocumentReader()); +} + +function nextPageButtonListener() { + if (!window.RegulaDocumentSDK) return; + + info.textContent = ''; + nextPageButton.disabled = true; + void window.RegulaDocumentSDK.startNewPage(); + document.body.append(createDocumentReader()); +} + +newDocumentButton?.addEventListener('click', newDocumentButtonListener); +nextPageButton?.addEventListener('click', nextPageButtonListener); +document.body.addEventListener('document-reader', documentReaderListener); diff --git a/manual-multi-page/backend-reprocessing/package.json b/manual-multi-page/backend-reprocessing/package.json new file mode 100644 index 0000000..585979f --- /dev/null +++ b/manual-multi-page/backend-reprocessing/package.json @@ -0,0 +1,16 @@ +{ + "name": "sample", + "version": "1.0.0", + "type": "module", + "scripts": { + "serve": "vite", + "build": "vite build" + }, + "dependencies": { + "@regulaforensics/vp-frontend-document-components": "*" + }, + "devDependencies": { + "typescript": "^5.9.3", + "vite": "^7.2.6" + } +} diff --git a/manual-multi-page/backend-reprocessing/styles.css b/manual-multi-page/backend-reprocessing/styles.css new file mode 100644 index 0000000..a8bca30 --- /dev/null +++ b/manual-multi-page/backend-reprocessing/styles.css @@ -0,0 +1,42 @@ +.reader-container { + position: absolute; + inset: 0; + width: 100%; + height: 100%; +} + +.buttons { + display: flex; + justify-content: center; + column-gap: 15px; + padding-bottom: 20px; +} + +.button { + padding: 8px 15px; + border: 1px solid black; + background: #fff; + font-family: Arial, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 135%; + border-radius: 8px; + cursor: pointer; + transition: .1s; +} + +.button:hover:not(:disabled) { + background: #efefef; +} + +.button:disabled { + cursor: not-allowed; + border: 1px solid lightgrey; +} + +.info { + max-width: 600px; + text-align: center; + line-height: 24px; + margin: 0 auto; +} diff --git a/manual-multi-page/backend-reprocessing/tsconfig.json b/manual-multi-page/backend-reprocessing/tsconfig.json new file mode 100644 index 0000000..5dd35f0 --- /dev/null +++ b/manual-multi-page/backend-reprocessing/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "target": "ES2022", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "types": ["vite/client"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + } +} diff --git a/manual-multi-page/react/package.json b/manual-multi-page/react/package.json index c4e58f9..dd5985e 100644 --- a/manual-multi-page/react/package.json +++ b/manual-multi-page/react/package.json @@ -7,8 +7,8 @@ "build": "vite build" }, "dependencies": { - "@regulaforensics/ui-components": "nightly", - "@regulaforensics/vp-frontend-document-components": "nightly", + "@regulaforensics/ui-components": "*", + "@regulaforensics/vp-frontend-document-components": "*", "react": "^19.2.0", "react-dom": "^19.2.0" }, diff --git a/manual-multi-page/typescript/package.json b/manual-multi-page/typescript/package.json index f78d9d1..585979f 100644 --- a/manual-multi-page/typescript/package.json +++ b/manual-multi-page/typescript/package.json @@ -7,7 +7,7 @@ "build": "vite build" }, "dependencies": { - "@regulaforensics/vp-frontend-document-components": "nightly" + "@regulaforensics/vp-frontend-document-components": "*" }, "devDependencies": { "typescript": "^5.9.3",