Skip to content

Commit c92e90c

Browse files
ArtsiomTsybulkoArtsiomTsybulko
authored
Merge pull request #69 from regulaforensics/feature/49575
Add backend reprocessing with manual multi-page processing sample
2 parents 482029e + 44cb661 commit c92e90c

File tree

8 files changed

+216
-3
lines changed

8 files changed

+216
-3
lines changed

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
1. [Controller sample](#controller-sample)
1313
1. [UI-components sample](#ui-components-sample)
1414
1. [Switch to mobile sample](#switch-to-mobile-sample)
15+
1. [Manual multi-page sample](#manual-multi-page-sample)
1516
1. [CodePen samples](#codepen-samples)
1617

1718
---
@@ -122,6 +123,14 @@ The ```switch-to-mobile``` folder contains an example of using Document reader c
122123

123124
Follow the steps as in [Webpack sample](#webpack-sample).
124125

126+
## Manual multi-page sample
127+
128+
The ```manual-multi-page``` folder contains an example of using Document reader component for manual control of document page scanning.
129+
130+
### Example installation
131+
132+
Follow the steps as in [Webpack sample](#webpack-sample).
133+
125134
## CodePen samples
126135

127136
### Camera snapshot component

‎manual-multi-page/backend-reprocessing/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>My app</title>
9+
</head>
10+
<body>
11+
<div class="buttons">
12+
<button class="button" id="new-document">Start new document</button>
13+
<button class="button" id="new-page" disabled>Start new page</button>
14+
</div>
15+
<div class="info">Press "Start new document" to start scanning document.</div>
16+
<script type="module" src="/index.ts"></script>
17+
</body>
18+
</html>

‎manual-multi-page/backend-reprocessing/index.ts‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import {
2+
defineComponents,
3+
DocumentReaderService,
4+
InternalScenarios,
5+
DocumentReaderWebComponent,
6+
DocumentReaderDetailType,
7+
TransactionEvent,
8+
EventActions,
9+
ResponseCode,
10+
} from '@regulaforensics/vp-frontend-document-components';
11+
import './styles.css';
12+
13+
const newDocumentButton = document.querySelector('#new-document') as HTMLButtonElement;
14+
const nextPageButton = document.querySelector('#new-page') as HTMLButtonElement;
15+
const info = document.querySelector('.info') as HTMLDivElement;
16+
17+
window.RegulaDocumentSDK = new DocumentReaderService();
18+
window.RegulaDocumentSDK.recognizerProcessParam = {
19+
processParam: {
20+
scenario: InternalScenarios.MrzAndLocate,
21+
multipageProcessing: true,
22+
backendProcessing: {
23+
serviceURL: 'YOUR_SERVICE_URL',
24+
httpHeaders: { // you can set http headers if necessary
25+
key1: 'header1',
26+
key2: 'header2',
27+
key3: 'header3'
28+
}
29+
},
30+
},
31+
};
32+
window.RegulaDocumentSDK.imageProcessParam = {
33+
processParam: {
34+
scenario: InternalScenarios.MrzAndLocate,
35+
},
36+
};
37+
38+
defineComponents().then(() => window.RegulaDocumentSDK.initialize());
39+
// To use the document-reader component on test environments, you have to set the base64 license
40+
// defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: 'YOUR_BASE64_LICENSE_KEY' }));
41+
42+
function createDocumentReader() {
43+
const documentReaderElement = document.createElement('document-reader') as DocumentReaderWebComponent;
44+
const container = document.createElement('div');
45+
documentReaderElement.setAttribute('new-layout', 'true');
46+
container.setAttribute('class', 'reader-container');
47+
container.append(documentReaderElement);
48+
49+
documentReaderElement.settings = {
50+
uploadFileButton: false,
51+
manualMultipageMode: true,
52+
}
53+
54+
return container;
55+
}
56+
57+
function documentReaderListener(data: CustomEvent<DocumentReaderDetailType | TransactionEvent>) {
58+
const reader = document.querySelector('.reader-container');
59+
const action = data.detail.action;
60+
61+
if (action === EventActions.PROCESS_FINISHED) {
62+
const status = data.detail.data?.status;
63+
const isFinishStatus = status === ResponseCode.OK || status === ResponseCode.TIMEOUT;
64+
const responseData = data.detail.data;
65+
66+
if (isFinishStatus && responseData?.response) {
67+
const isMorePagesAvailable = !!responseData.response.rawResponse.morePagesAvailable;
68+
69+
info.textContent = 'Check your result in the console. ';
70+
71+
if (isMorePagesAvailable) {
72+
nextPageButton.disabled = false;
73+
info.textContent += 'More pages are available, click "Start new page" ' +
74+
'to continue scanning, or start scanning a new document by clicking "Start new document".';
75+
} else {
76+
void window.RegulaDocumentSDK.finalizePackage();
77+
}
78+
console.log(responseData.response);
79+
80+
reader?.remove();
81+
}
82+
}
83+
if (action === EventActions.CAMERA_PROCESS_CLOSED) reader?.remove();
84+
}
85+
86+
function newDocumentButtonListener() {
87+
if (!window.RegulaDocumentSDK) return;
88+
89+
info.textContent = '';
90+
nextPageButton.disabled = true;
91+
void window.RegulaDocumentSDK.createBackendTransaction();
92+
document.body.append(createDocumentReader());
93+
}
94+
95+
function nextPageButtonListener() {
96+
if (!window.RegulaDocumentSDK) return;
97+
98+
info.textContent = '';
99+
nextPageButton.disabled = true;
100+
void window.RegulaDocumentSDK.startNewPage();
101+
document.body.append(createDocumentReader());
102+
}
103+
104+
newDocumentButton?.addEventListener('click', newDocumentButtonListener);
105+
nextPageButton?.addEventListener('click', nextPageButtonListener);
106+
document.body.addEventListener('document-reader', documentReaderListener);

‎manual-multi-page/backend-reprocessing/package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "sample",
3+
"version": "1.0.0",
4+
"type": "module",
5+
"scripts": {
6+
"serve": "vite",
7+
"build": "vite build"
8+
},
9+
"dependencies": {
10+
"@regulaforensics/vp-frontend-document-components": "*"
11+
},
12+
"devDependencies": {
13+
"typescript": "^5.9.3",
14+
"vite": "^7.2.6"
15+
}
16+
}

‎manual-multi-page/backend-reprocessing/styles.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.reader-container {
2+
position: absolute;
3+
inset: 0;
4+
width: 100%;
5+
height: 100%;
6+
}
7+
8+
.buttons {
9+
display: flex;
10+
justify-content: center;
11+
column-gap: 15px;
12+
padding-bottom: 20px;
13+
}
14+
15+
.button {
16+
padding: 8px 15px;
17+
border: 1px solid black;
18+
background: #fff;
19+
font-family: Arial, sans-serif;
20+
font-size: 16px;
21+
font-weight: 400;
22+
line-height: 135%;
23+
border-radius: 8px;
24+
cursor: pointer;
25+
transition: .1s;
26+
}
27+
28+
.button:hover:not(:disabled) {
29+
background: #efefef;
30+
}
31+
32+
.button:disabled {
33+
cursor: not-allowed;
34+
border: 1px solid lightgrey;
35+
}
36+
37+
.info {
38+
max-width: 600px;
39+
text-align: center;
40+
line-height: 24px;
41+
margin: 0 auto;
42+
}

‎manual-multi-page/backend-reprocessing/tsconfig.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2022",
4+
"useDefineForClassFields": true,
5+
"module": "ESNext",
6+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
7+
"types": ["vite/client"],
8+
"skipLibCheck": true,
9+
10+
/* Bundler mode */
11+
"moduleResolution": "bundler",
12+
"allowImportingTsExtensions": true,
13+
"moduleDetection": "force",
14+
"noEmit": true,
15+
16+
/* Linting */
17+
"strict": true,
18+
"noUnusedLocals": true,
19+
"noUnusedParameters": true,
20+
"noFallthroughCasesInSwitch": true
21+
}
22+
}

‎manual-multi-page/react/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
"build": "vite build"
88
},
99
"dependencies": {
10-
"@regulaforensics/ui-components": "nightly",
11-
"@regulaforensics/vp-frontend-document-components": "nightly",
10+
"@regulaforensics/ui-components": "*",
11+
"@regulaforensics/vp-frontend-document-components": "*",
1212
"react": "^19.2.0",
1313
"react-dom": "^19.2.0"
1414
},

‎manual-multi-page/typescript/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"build": "vite build"
88
},
99
"dependencies": {
10-
"@regulaforensics/vp-frontend-document-components": "nightly"
10+
"@regulaforensics/vp-frontend-document-components": "*"
1111
},
1212
"devDependencies": {
1313
"typescript": "^5.9.3",

0 commit comments

Comments
 (0)