Merge branch 'release/v4.x/v4.0.0' of https://github.com/Dynamsoft/mrz-scanner-javascript into release/v4.x/v4.0.0

Author: amro-dynamsoft

.gitignore

@@ -1 +1,3 @@
+public
 node_modules
+samples/*.tgz

dist/mrz-scanner.bundle.js

@@ -2656,7 +2656,7 @@ var Ce = {
 		}, r = {
 			...this.config.scannerViewConfig,
 			container: e[y.Scanner] || S(this.config.scannerViewConfig?.container) || null,
-			cameraEnhancerUIPath: this.config.scannerViewConfig?.uiPath || this.config.scannerViewConfig?.cameraEnhancerUIPath || "<div\n	style=\"\n		position: relative;\n		width: 100%;\n		height: 100%;\n		min-width: 100px;\n		min-height: 100px;\n		background: #000;\n	\"\n>\n	<div\n		class=\"dce-camera-related-container\"\n		style=\"position: relative; width: 100%; height: 100%; background-color: black\"\n	>\n		<!-- Loading spinner shown while camera initializes -->\n		<svg\n			class=\"dce-bg-loading\"\n			style=\"\n				display: none;\n				position: absolute;\n				left: 0;\n				top: 0;\n				right: 0;\n				bottom: 0;\n				margin: auto;\n				width: 20%;\n				height: 20%;\n				fill: #aaa;\n				animation: 1s linear infinite dce-rotate;\n				z-index: 3;\n			\"\n			viewBox=\"0 0 1792 1792\"\n		>\n			<path\n				d=\"M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z\"\n			/>\n		</svg>\n\n		<!-- Camera icon shown before camera permission granted -->\n		<svg\n			class=\"dce-bg-camera\"\n			style=\"\n				display: none;\n				position: absolute;\n				left: 0;\n				top: 0;\n				right: 0;\n				bottom: 0;\n				margin: auto;\n				width: 40%;\n				height: 40%;\n				fill: #aaa;\n			\"\n			viewBox=\"0 0 2048 1792\"\n		>\n			<path\n				d=\"M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z\"\n			/>\n		</svg>\n\n		<!-- Camera viewfinder container (DCE injects video feed here) -->\n		<div\n			class=\"dce-viewfinder-container\"\n			style=\"position: absolute; left: 0; top: 0; width: 100%; height: 100%\"\n		></div>\n\n		<!-- Scan area container (required by DCE for scan region overlay) -->\n		<div\n			class=\"dce-scanarea\"\n			style=\"position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none\"\n		>\n			<!-- Scan spinner shown during active scanning -->\n			<svg class=\"dce-mn-scan-spinner\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n				<rect class=\"dce-spinner-bg\" width=\"56\" height=\"56\" rx=\"8\" />\n				<g class=\"dce-spinner-inner\" clip-path=\"url(#dce-spinner-clip)\">\n					<path d=\"M25.0759 15.968V8.18762C16.2732 9.50351 9.32755 16.3824 8.00195 25.1036H15.8608C16.9879 20.6144 20.5493 17.0842 25.0759 15.968Z\" />\n					<path d=\"M30.9277 15.968C35.4574 17.0842 39.0187 20.6144 40.1428 25.1036H48.0016C46.6761 16.3824 39.7304 9.50351 30.9277 8.18762V15.968Z\" />\n					<path d=\"M25.0759 40.0321C20.5462 38.9158 16.9848 35.3856 15.8608 30.8965H8.00195C9.32755 39.6176 16.2732 46.4965 25.0759 47.8124V40.0321Z\" />\n					<path d=\"M30.9277 40.0321V47.8124C39.7304 46.4965 46.6761 39.6176 48.0016 30.8965H40.1428C39.0157 35.3856 35.4543 38.9158 30.9277 40.0321Z\" />\n				</g>\n				<defs>\n					<clipPath id=\"dce-spinner-clip\">\n						<rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(8 8)\" />\n					</clipPath>\n				</defs>\n			</svg>\n		</div>\n	</div>\n</div>\n\n<style>\n	/* Animation keyframes */\n	@keyframes dce-rotate {\n		from { transform: rotate(0deg); }\n		to { transform: rotate(360deg); }\n	}\n\n	@keyframes dce-spin {\n		from { transform: rotate(0deg); }\n		to { transform: rotate(360deg); }\n	}\n\n	/* Scan spinner styles (used by MRZScannerView) */\n	.dce-mn-scan-spinner {\n		position: absolute;\n		top: 50%;\n		left: 50%;\n		width: 56px;\n		height: 56px;\n		margin: -28px 0 0 -28px;\n		opacity: 0;\n		transition: opacity 0.15s ease;\n		pointer-events: none;\n		z-index: 4;\n	}\n\n	.dce-mn-scan-spinner.dce-visible {\n		opacity: 1;\n	}\n\n	.dce-mn-scan-spinner .dce-spinner-bg {\n		fill: var(--mrz-spinner-background, rgba(0, 0, 0, 0.2));\n	}\n\n	.dce-mn-scan-spinner .dce-spinner-inner {\n		animation: dce-spin 1.2s linear infinite;\n		transform-origin: 28px 28px;\n	}\n\n	.dce-mn-scan-spinner .dce-spinner-inner path {\n		fill: var(--mrz-spinner-color, #fff);\n	}\n\n	@media (prefers-reduced-motion: reduce) {\n		.dce-mn-scan-spinner .dce-spinner-inner { animation: none; }\n	}\n</style>\n",
+			cameraEnhancerUIPath: this.config.scannerViewConfig?.uiPath || this.config.scannerViewConfig?.cameraEnhancerUIPath || "<div\r\n	style=\"\r\n		position: relative;\r\n		width: 100%;\r\n		height: 100%;\r\n		min-width: 100px;\r\n		min-height: 100px;\r\n		background: #000;\r\n	\"\r\n>\r\n	<div\r\n		class=\"dce-camera-related-container\"\r\n		style=\"position: relative; width: 100%; height: 100%; background-color: black\"\r\n	>\r\n		<!-- Loading spinner shown while camera initializes -->\r\n		<svg\r\n			class=\"dce-bg-loading\"\r\n			style=\"\r\n				display: none;\r\n				position: absolute;\r\n				left: 0;\r\n				top: 0;\r\n				right: 0;\r\n				bottom: 0;\r\n				margin: auto;\r\n				width: 20%;\r\n				height: 20%;\r\n				fill: #aaa;\r\n				animation: 1s linear infinite dce-rotate;\r\n				z-index: 3;\r\n			\"\r\n			viewBox=\"0 0 1792 1792\"\r\n		>\r\n			<path\r\n				d=\"M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z\"\r\n			/>\r\n		</svg>\r\n\r\n		<!-- Camera icon shown before camera permission granted -->\r\n		<svg\r\n			class=\"dce-bg-camera\"\r\n			style=\"\r\n				display: none;\r\n				position: absolute;\r\n				left: 0;\r\n				top: 0;\r\n				right: 0;\r\n				bottom: 0;\r\n				margin: auto;\r\n				width: 40%;\r\n				height: 40%;\r\n				fill: #aaa;\r\n			\"\r\n			viewBox=\"0 0 2048 1792\"\r\n		>\r\n			<path\r\n				d=\"M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z\"\r\n			/>\r\n		</svg>\r\n\r\n		<!-- Camera viewfinder container (DCE injects video feed here) -->\r\n		<div\r\n			class=\"dce-viewfinder-container\"\r\n			style=\"position: absolute; left: 0; top: 0; width: 100%; height: 100%\"\r\n		></div>\r\n\r\n		<!-- Scan area container (required by DCE for scan region overlay) -->\r\n		<div\r\n			class=\"dce-scanarea\"\r\n			style=\"position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none\"\r\n		>\r\n			<!-- Scan spinner shown during active scanning -->\r\n			<svg class=\"dce-mn-scan-spinner\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n				<rect class=\"dce-spinner-bg\" width=\"56\" height=\"56\" rx=\"8\" />\r\n				<g class=\"dce-spinner-inner\" clip-path=\"url(#dce-spinner-clip)\">\r\n					<path d=\"M25.0759 15.968V8.18762C16.2732 9.50351 9.32755 16.3824 8.00195 25.1036H15.8608C16.9879 20.6144 20.5493 17.0842 25.0759 15.968Z\" />\r\n					<path d=\"M30.9277 15.968C35.4574 17.0842 39.0187 20.6144 40.1428 25.1036H48.0016C46.6761 16.3824 39.7304 9.50351 30.9277 8.18762V15.968Z\" />\r\n					<path d=\"M25.0759 40.0321C20.5462 38.9158 16.9848 35.3856 15.8608 30.8965H8.00195C9.32755 39.6176 16.2732 46.4965 25.0759 47.8124V40.0321Z\" />\r\n					<path d=\"M30.9277 40.0321V47.8124C39.7304 46.4965 46.6761 39.6176 48.0016 30.8965H40.1428C39.0157 35.3856 35.4543 38.9158 30.9277 40.0321Z\" />\r\n				</g>\r\n				<defs>\r\n					<clipPath id=\"dce-spinner-clip\">\r\n						<rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(8 8)\" />\r\n					</clipPath>\r\n				</defs>\r\n			</svg>\r\n		</div>\r\n	</div>\r\n</div>\r\n\r\n<style>\r\n	/* Animation keyframes */\r\n	@keyframes dce-rotate {\r\n		from { transform: rotate(0deg); }\r\n		to { transform: rotate(360deg); }\r\n	}\r\n\r\n	@keyframes dce-spin {\r\n		from { transform: rotate(0deg); }\r\n		to { transform: rotate(360deg); }\r\n	}\r\n\r\n	/* Scan spinner styles (used by MRZScannerView) */\r\n	.dce-mn-scan-spinner {\r\n		position: absolute;\r\n		top: 50%;\r\n		left: 50%;\r\n		width: 56px;\r\n		height: 56px;\r\n		margin: -28px 0 0 -28px;\r\n		opacity: 0;\r\n		transition: opacity 0.15s ease;\r\n		pointer-events: none;\r\n		z-index: 4;\r\n	}\r\n\r\n	.dce-mn-scan-spinner.dce-visible {\r\n		opacity: 1;\r\n	}\r\n\r\n	.dce-mn-scan-spinner .dce-spinner-bg {\r\n		fill: var(--mrz-spinner-background, rgba(0, 0, 0, 0.2));\r\n	}\r\n\r\n	.dce-mn-scan-spinner .dce-spinner-inner {\r\n		animation: dce-spin 1.2s linear infinite;\r\n		transform-origin: 28px 28px;\r\n	}\r\n\r\n	.dce-mn-scan-spinner .dce-spinner-inner path {\r\n		fill: var(--mrz-spinner-color, #fff);\r\n	}\r\n\r\n	@media (prefers-reduced-motion: reduce) {\r\n		.dce-mn-scan-spinner .dce-spinner-inner { animation: none; }\r\n	}\r\n</style>\r\n",
 			templateFilePath: t.templateFilePath,
 			utilizedTemplateNames: t.utilizedTemplateNames,
 			enableMultiFrameCrossFilter: this.config.scannerViewConfig?.enableMultiFrameCrossFilter ?? !0,

dist/mrz-scanner.cjs

@@ -17,7 +17,6 @@ samples/demo/
     ├── index.css            # shared stylesheet — palette in :root tokens
     ├── landing.css          # landing page, one for mobile and desktop
     ├── result.css           # result view matches default style of MRZ Scanner
-    ├── widgets.css          # live-chat and cookies disclaimer
 ├── tsconfig.json            # IDE/LSP project config (Vite handles build)
 ├── vite.config.ts           # demo-build config: bundles src/ + mirrors DCV into public/, serve /public and /dist
 ├── assets/                  # static assets (logo, QR code SVG)
@@ -26,7 +25,6 @@ samples/demo/
     ├── view.ts              # body[data-view] state, mobile/desktop split, info menu
     ├── scanner.ts           # MRZScanner instance + camera/file/rescan entry points
     ├── results.ts           # displayResults(result, config)
-    ├── chrome.ts            # live-chat and cookies disclaimer
     └── index.ts             # entry — wires DOM events to the exports above
 ```
 

dist/mrz-scanner.mjs

@@ -120,7 +120,6 @@ button {
 }
 
 /* Shared radius for every rectangular surface (.info-btn keeps its 50%). */
-.livechat-btn,
 .secondary-button.compact,
 .mobile-landing-primary,
 .btn-rescan,

samples/demo/README.md

@@ -123,7 +123,6 @@ body[data-view="landing"] #landing-section {
 .mobile-landing-content {
 	flex: 0 0 auto;
 	gap: 32px;
-	/* 50px bottom clears the ~37px-tall docked .livechat-btn. */
 	padding: 40px 16px 50px;
 }
 

samples/demo/css/index.css

@@ -15,8 +15,7 @@ export function showResult(): void {
 	document.body.dataset.view = "result";
 }
 
-// While the SDK's scanner overlay is mounted. Drives widgets.css to hide
-// the chat button so it doesn't overlay the camera UI.
+// While the SDK's scanner overlay is mounted.
 export function showScanner(): void {
 	document.body.dataset.view = "scanner";
 }

samples/demo/css/landing.css

@@ -27,8 +27,7 @@ export default defineConfig({
 		headers: {
 			// crossOriginIsolated lets DCV use the multi-threaded (pthread) WASM
 			// variant via SharedArrayBuffer. COEP=credentialless (not require-corp)
-			// preserves isolation while still allowing no-CORP third-party scripts
-			// like Comm100's livechat widget to load.
+			// preserves isolation while still allowing no-CORP third-party scripts to load.
 			"Cross-Origin-Opener-Policy": "same-origin",
 			"Cross-Origin-Embedder-Policy": "credentialless",
 		},