+
+## Run this Solution
+
+1. Clone the repository to a working directory or download the code as a ZIP file:
+
+```sh
+git clone https://github.com/Dynamsoft/mrz-scanner-javascript
+```
+
+2. Deploy the files to a directory hosted on an HTTPS server.
+
+3. Open the "index.html" file in your browser.
+
+> Basic Requirements
+>
+> * Internet connection
+> * [A supported browser](#system-requirements)
+> * An accessible Camera
+
+-----
+
+## Request a Trial License
+
+The key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this solution (found in the js/init.js file) is a test license valid for 24 hours for any newly authorized browser. If you wish to test the SDK further, you can request a 30-day free trial license through the
+ 
+
+
+
+
+ Dynamsoft MRZ Scanner
+
+ Dynamsoft MRZ Scanner recognizes the Machine-Readable Zone (MRZ) on a passport or ID card and converts the
+ encoded strings into human-readable fields
+
+
+ 
+
+
+ Scan to Open on Mobile
++ For optimal performance, scan this QR code to open the scanner on your mobile device +
+
+
+
+ Quick Start Options
+ ++ Note: Desktop cameras may have limited performance. Mobile scanning is recommended for best results. +
+Powered by Dynamsoft
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+ Scan Results
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pr-preview/pr-14/js/const.js b/pr-preview/pr-14/js/const.js
new file mode 100644
index 0000000..bf96991
--- /dev/null
+++ b/pr-preview/pr-14/js/const.js
@@ -0,0 +1,59 @@
+// Define some global variables that will be used
+let cameraList = [];
+let cameraView = null;
+let cameraEnhancer = null;
+let cvRouter = null;
+let pInit = null; // Promise of init
+let isSoundOn = true;
+let timer = null;
+
+const SCAN_MODES = ["id", "passport", "both"];
+const SCAN_TEMPLATES = {
+ id: "ReadId",
+ passport: "ReadPassport",
+ both: "ReadPassportAndId",
+};
+let currentMode = SCAN_MODES[2]; // Set scan mode as "Scan Both" by default
+
+const resolutions = {
+ "Full HD": [1920, 1080], // Full HD
+ HD: [1280, 720], // HD
+};
+
+// Aspect Ratio of MRZ Guide Box
+const MRZ_GUIDEBOX_ASPECT_RATIO = 6.73;
+
+// Get the UI element
+const homePage = document.querySelector(".home-page");
+
+const cameraViewContainer = document.querySelector(".camera-view-container");
+
+const uploadImageInput = document.querySelector(".upload-image-input");
+
+const cameraListContainer = document.querySelector(".camera-list");
+const cameraSelector = document.querySelector(".camera-selector");
+
+const informationBtn = document.querySelectorAll(".information-btn");
+const informationListContainer = document.querySelector(".information-list");
+
+const scannerContainer = document.querySelector(".scanner-container");
+
+const mrzGuideFrame = document.querySelector(".mrz-frame");
+
+const resultContainer = document.querySelector(".result-container");
+const scannedImage = document.querySelector(".scanned-image");
+const parsedResultArea = document.querySelector(".parsed-result-area");
+
+const startScaningBtn = document.querySelectorAll(".start-btn");
+
+const scanModeContainer = document.querySelector(".scan-mode-container");
+const scanBothBtn = document.querySelector("#scan-both-btn");
+
+const scanAgainBtn = document.querySelector(".btn-scan-again");
+
+const playSoundBtn = document.querySelector(".music");
+const closeSoundBtn = document.querySelector(".no-music");
+const down = document.querySelector(".down");
+const up = document.querySelector(".up");
+
+const notification = document.querySelector("#notification");
diff --git a/pr-preview/pr-14/js/index.js b/pr-preview/pr-14/js/index.js
new file mode 100644
index 0000000..ad166f0
--- /dev/null
+++ b/pr-preview/pr-14/js/index.js
@@ -0,0 +1,194 @@
+import { handleCapturedResult, init, pDataLoad } from "./init.js";
+import { judgeCurResolution, shouldShowScanModeContainer, showNotification } from "./util.js";
+import { checkOrientation, getVisibleRegionOfVideo } from "./util.js";
+
+async function startCapturing(mode) {
+ try {
+ homePage.style.display = "none";
+ scannerContainer.style.display = "block";
+
+ // Open the camera after the model and .wasm files have loaded
+ pInit = pInit || (await init);
+ await pDataLoad.promise;
+
+ // Starts streaming the video
+ if (cameraEnhancer.isOpen()) {
+ await cvRouter.stopCapturing();
+ await cameraView.clearAllInnerDrawingItems();
+ } else {
+ await cameraEnhancer.open();
+ }
+
+ // Highlight the selected camera in the camera list container
+ const currentCamera = cameraEnhancer.getSelectedCamera();
+ const currentResolution = judgeCurResolution(cameraEnhancer.getResolution());
+ cameraListContainer.childNodes.forEach((child) => {
+ if (currentCamera.deviceId === child.deviceId && currentResolution === child.resolution) {
+ child.className = "camera-item camera-selected";
+ }
+ });
+ cameraEnhancer.setScanRegion(region());
+ cameraView.setScanRegionMaskVisible(false);
+
+ await cvRouter.startCapturing(SCAN_TEMPLATES[mode]);
+
+ // Show MRZ guide frame
+ mrzGuideFrame.style.display = "inline-block";
+
+ // Update button styles to show selected scan mode
+ document.querySelectorAll(".scan-option-btn").forEach((button) => {
+ button.classList.remove("selected");
+ });
+ document.querySelector(`#scan-${mode}-btn`).classList.add("selected");
+ showNotification(`Scan mode switched successfully`, "banner-success");
+
+ currentMode = mode;
+ scanModeContainer.style.display = "flex";
+ } catch (ex) {
+ let errMsg = ex.message || ex;
+ console.error(`An error occurred: ${errMsg}`);
+ alert(`An error occurred: ${errMsg}`);
+ }
+}
+
+SCAN_MODES.forEach((mode) =>
+ document.querySelector(`#scan-${mode}-btn`).addEventListener("click", () => startCapturing(mode))
+);
+
+// -----------Logic for calculating scan region ↓------------
+const regionLeft = () => {
+ if (!cameraEnhancer || !cameraEnhancer.isOpen()) return 0;
+ const visibleRegionInPixels = getVisibleRegionOfVideo();
+ const currentResolution = cameraEnhancer.getResolution();
+
+ const vw =
+ checkOrientation() === "portrait"
+ ? Math.min(currentResolution.width, currentResolution.height)
+ : Math.max(currentResolution.width, currentResolution.height);
+ const visibleRegionWidth = visibleRegionInPixels.width;
+
+ let regionCssW;
+ if (document.body.clientWidth > document.body.clientHeight * MRZ_GUIDEBOX_ASPECT_RATIO) {
+ let regionCssH = document.body.clientHeight * 0.75;
+ regionCssW = regionCssH * MRZ_GUIDEBOX_ASPECT_RATIO;
+ } else {
+ regionCssW = document.body.clientWidth * 0.9;
+ }
+ regionCssW = Math.min(regionCssW, 600);
+
+ const regionWidthInPixel = (visibleRegionWidth / document.body.clientWidth) * regionCssW;
+ const left = ((vw - regionWidthInPixel) / 2 / vw) * 100;
+
+ return Math.round(left);
+};
+
+const regionTop = () => {
+ if (!cameraEnhancer || !cameraEnhancer.isOpen()) return 0;
+
+ const currentResolution = cameraEnhancer.getResolution();
+
+ const vw =
+ checkOrientation() === "portrait"
+ ? Math.min(currentResolution.width, currentResolution.height)
+ : Math.max(currentResolution.width, currentResolution.height);
+ const vh =
+ checkOrientation() === "portrait"
+ ? Math.max(currentResolution.width, currentResolution.height)
+ : Math.min(currentResolution.width, currentResolution.height);
+
+ const regionWidthInPixel = vw - (regionLeft() * 2 * vw) / 100;
+ const regionHeightInPixel = regionWidthInPixel / 4;
+ const top = ((vh - regionHeightInPixel) / 2 / vh) * 100;
+ return Math.round(top);
+};
+
+const region = () => {
+ let region = {
+ left: regionLeft(),
+ right: 100 - regionLeft(),
+ top: regionTop(),
+ bottom: 100 - regionTop(),
+ isMeasuredInPercentage: true,
+ };
+ return region;
+};
+// -----------Logic for calculating scan region ↑------------
+
+window.addEventListener("click", () => {
+ cameraListContainer.style.display = "none";
+ up.style.display = "none";
+ down.style.display = "inline-block";
+ informationListContainer.style.display = "none";
+});
+
+// Recalculate the scan region when the window size changes
+window.addEventListener("resize", () => {
+ mrzGuideFrame.style.display = "none";
+ timer && clearTimeout(timer);
+ timer = setTimeout(() => {
+ shouldShowScanModeContainer();
+ mrzGuideFrame.style.display = "inline-block";
+ cameraEnhancer?.setScanRegion(region());
+ cameraView?.setScanRegionMaskVisible(false);
+ }, 500);
+});
+
+// Add click events to buttons
+startScaningBtn.forEach((btn) => btn.addEventListener("click", () => scanBothBtn.click()));
+const restartVideo = async () => {
+ resultContainer.style.display = "none";
+ document.querySelector(`#scan-${currentMode}-btn`).click();
+};
+scanAgainBtn.addEventListener("click", restartVideo);
+
+uploadImageInput.addEventListener("change", async (event) => {
+ try {
+ const file = event.target.files[0];
+
+ if (file) {
+ // Open the camera after the model and .wasm files have loaded
+ pInit = pInit || (await init);
+ await pDataLoad.promise;
+
+ event.target.value = "";
+
+ // Decode selected image with 'both' template.
+ const result = await cvRouter.capture(file, SCAN_TEMPLATES.both);
+ handleCapturedResult(result, file);
+ }
+ } catch (ex) {
+ let errMsg = ex.message || ex;
+ alert(errMsg);
+ console.error(errMsg);
+ }
+});
+
+cameraSelector.addEventListener("click", (e) => {
+ e.stopPropagation();
+ const isShow = cameraListContainer.style.display === "block";
+ cameraListContainer.style.display = isShow ? "none" : "block";
+ up.style.display = !isShow ? "inline-block" : "none";
+ down.style.display = isShow ? "inline-block" : "none";
+});
+
+playSoundBtn.addEventListener("click", () => {
+ playSoundBtn.style.display = "none";
+ closeSoundBtn.style.display = "block";
+ showNotification("Sound feedback off", "banner-default");
+ isSoundOn = false;
+});
+
+closeSoundBtn.addEventListener("click", () => {
+ playSoundBtn.style.display = "block";
+ closeSoundBtn.style.display = "none";
+ showNotification("Sound feedback on", "banner-default");
+ isSoundOn = true;
+});
+
+informationBtn.forEach((infoBtn) =>
+ infoBtn.addEventListener("click", (e) => {
+ e.stopPropagation();
+ const isShow = informationListContainer.style.display === "block";
+ informationListContainer.style.display = isShow ? "none" : "block";
+ })
+);
diff --git a/pr-preview/pr-14/js/init.js b/pr-preview/pr-14/js/init.js
new file mode 100644
index 0000000..d80f545
--- /dev/null
+++ b/pr-preview/pr-14/js/init.js
@@ -0,0 +1,167 @@
+import { judgeCurResolution, showNotification } from "./util.js";
+import { createPendingPromise, extractDocumentFields, resultToHTMLElement, formatMRZ } from "./util.js";
+
+// Promise variable used to control model loading state
+const pDataLoad = createPendingPromise();
+
+/** LICENSE ALERT - README
+ * To use the library, you need to first specify a license key using the API "initLicense" as shown below.
+ */
+Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
+/**
+ * You can visit https://www.dynamsoft.com/customer/license/trialLicense/?product=mrz&utm_source=docs&package=js to get your own trial license good for 30 days.
+ * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
+ * For more information, see https://www.dynamsoft.com/label-recognition/programming/javascript/user-guide.html?ver=latest#specify-the-license or contact support@dynamsoft.com.
+ * LICENSE ALERT - THE END
+ */
+
+Dynamsoft.DLR.LabelRecognizerModule.onDataLoadProgressChanged = (modelPath, tag, progress) => {
+ if (tag === "completed") {
+ pDataLoad.resolve();
+ }
+};
+
+/**
+ * Preloads the resources
+ */
+Dynamsoft.Core.CoreModule.loadWasm(["DLR", "DCP"]);
+Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD3_PASSPORT");
+Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD1_ID");
+Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD2_ID");
+Dynamsoft.DLR.LabelRecognizerModule.loadRecognitionData("MRZ");
+
+/**
+ * Creates a CameraEnhancer instance as the image source
+ */
+async function initDCE() {
+ cameraView = await Dynamsoft.DCE.CameraView.createInstance(cameraViewContainer);
+ cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
+
+ // Get the camera information of the device and render the camera list
+ cameraList = await cameraEnhancer.getAllCameras();
+ for (let camera of cameraList) {
+ for (let res of Object.keys(resolutions)) {
+ const cameraItem = document.createElement("div");
+ cameraItem.className = "camera-item";
+ cameraItem.innerText = `${camera.label} (${res})`;
+ cameraItem.deviceId = camera.deviceId;
+ cameraItem.resolution = res;
+
+ cameraItem.addEventListener("click", async (e) => {
+ e.stopPropagation();
+ for (let child of cameraListContainer.childNodes) {
+ child.className = "camera-item";
+ }
+ cameraItem.className = "camera-item camera-selected";
+ await cameraEnhancer.selectCamera(camera);
+ await cameraEnhancer.setResolution({
+ width: resolutions[res][0],
+ height: resolutions[res][1],
+ });
+
+ const currentCamera = await cameraEnhancer.getSelectedCamera();
+ const currentResolution = judgeCurResolution(await cameraEnhancer.getResolution());
+ if (currentCamera.deviceId === camera.deviceId && currentResolution === res) {
+ showNotification("Camera and resolution switched successfully!", "banner-success");
+ } else if (judgeCurResolution(currentResolution) !== res) {
+ showNotification(`Resolution switch failed! ${res} is not supported.`, "banner-default");
+
+ // Update resolution to the current resolution that is supported
+ for (let child of cameraListContainer.childNodes) {
+ child.className = "camera-item";
+ if (currentCamera.deviceId === child.deviceId && currentResolution === child.resolution) {
+ child.className = "camera-item camera-selected";
+ }
+ }
+ } else {
+ showNotification(`Camera switch failed!`, "banner-error");
+ }
+
+ // Hide options after user clicks an option
+ cameraSelector.click();
+ });
+ cameraListContainer.appendChild(cameraItem);
+ }
+ }
+ cameraView.setVideoFit("cover");
+ await cameraEnhancer.setResolution({ width: 1920, height: 1080 });
+}
+
+/**
+ * Initialize CaptureVisionRouter, CameraEnhancer, and CameraView instance
+ */
+let init = (async () => {
+ await initDCE();
+ cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
+ await cvRouter.initSettings("./template.json");
+ cvRouter.setInput(cameraEnhancer);
+
+ /* Defines the result receiver for the solution.*/
+ const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
+ resultReceiver.onCapturedResultReceived = handleCapturedResult;
+
+ await cvRouter.addResultReceiver(resultReceiver);
+})();
+
+export const handleCapturedResult = (result, uploadedImage = null) => {
+ const recognizedResults = result.textLineResultItems;
+ const parsedResults = result.parsedResultItems;
+ const originalImage = result.items?.[0]?.imageData;
+
+ if (recognizedResults?.length) {
+ // Play sound feedback if enabled
+ isSoundOn ? Dynamsoft.DCE.Feedback.beep() : null;
+
+ parsedResultArea.innerText = "";
+
+ // Add MRZ Text to Result
+ const mrzElement = resultToHTMLElement("MRZ String", formatMRZ(recognizedResults[0]?.text));
+ mrzElement.classList.add("code");
+ parsedResultArea.appendChild(mrzElement);
+
+ // If a parsed result is obtained, use it to render the result page
+ if (parsedResults) {
+ const parseResultInfo = extractDocumentFields(parsedResults[0]);
+ Object.entries(parseResultInfo).map(([field, value]) => {
+ const resultElement = resultToHTMLElement(field, value);
+ parsedResultArea.appendChild(resultElement);
+ });
+
+ if (uploadedImage && uploadedImage.type.startsWith("image/")) {
+ handleUploadedImage(uploadedImage);
+ } else if (originalImage) {
+ scannedImage.innerHTML = "";
+ scannedImage.append(originalImage.toCanvas());
+ }
+ } else {
+ alert(`Failed to parse the content.`);
+ parsedResultArea.style.justifyContent = "flex-start";
+ }
+ resultContainer.style.display = "flex";
+ cameraListContainer.style.display = "none";
+ informationListContainer.style.display = "none";
+ scanModeContainer.style.display = "none";
+
+ cameraEnhancer.close();
+ cvRouter.stopCapturing();
+ cameraView.clearAllInnerDrawingItems();
+ }
+};
+
+function handleUploadedImage(file) {
+ const img = document.createElement("img");
+ const imageUrl = URL.createObjectURL(file);
+
+ img.src = imageUrl;
+ img.className = "uploaded-image";
+
+ // Append the image to the div
+ scannedImage.innerHTMl = "";
+ scannedImage.append(img);
+
+ img.onload = () => {
+ URL.revokeObjectURL(imageUrl);
+ };
+}
+
+export { pDataLoad, init };
diff --git a/pr-preview/pr-14/js/util.js b/pr-preview/pr-14/js/util.js
new file mode 100644
index 0000000..403fe2d
--- /dev/null
+++ b/pr-preview/pr-14/js/util.js
@@ -0,0 +1,201 @@
+/**
+ * Creates a pending promise. Used to keep track of library loading progress
+ *
+ * @returns {Object} An object containing the promise, resolve, and reject functions.
+ */
+export function createPendingPromise() {
+ let resolve, reject;
+ const promise = new Promise((res, rej) => {
+ resolve = res;
+ reject = rej;
+ });
+
+ return { promise, resolve, reject };
+}
+
+/**
+ * Extracts and returns document fields from the parsed MRZ result
+ *
+ * @param {Object} result - The parsed result object containing document fields.
+ * @returns {Object} An object with key-value pairs of the extracted fields.
+ */
+export function extractDocumentFields(result) {
+ const parseResultInfo = {};
+ if (!result.exception) {
+ const type = result.getFieldValue("documentCode");
+ const documentType = JSON.parse(result.jsonString).CodeType;
+ const birthYear = result.getFieldValue("birthYear");
+ const birthYearBase = parseInt(birthYear) > new Date().getFullYear() % 100 ? "19" : "20";
+ const fullBirthYear = `${birthYearBase}${birthYear}`;
+
+ const expiryYear = result.getFieldValue("expiryYear");
+ const expiryYearBase = parseInt(expiryYear) >= 60 ? "19" : "20";
+ const fullExpiryYear = `${expiryYearBase}${expiryYear}`;
+
+ parseResultInfo["Document Type"] = documentType;
+ parseResultInfo["Surname"] = result.getFieldValue("primaryIdentifier");
+ parseResultInfo["Given Name"] = result.getFieldValue("secondaryIdentifier");
+ parseResultInfo["Nationality"] = result.getFieldValue("nationality");
+ parseResultInfo["Document Number"] =
+ type === "P" ? result.getFieldValue("passportNumber") : result.getFieldValue("documentNumber");
+ parseResultInfo["Issuing State"] = result.getFieldValue("issuingState");
+ parseResultInfo["Sex"] = result.getFieldValue("sex");
+ parseResultInfo["Date of Birth (YYYY-MM-DD)"] =
+ fullBirthYear + "-" + result.getFieldValue("birthMonth") + "-" + result.getFieldValue("birthDay");
+ parseResultInfo["Date of Expiry (YYYY-MM-DD)"] =
+ fullExpiryYear + "-" + result.getFieldValue("expiryMonth") + "-" + result.getFieldValue("expiryDay");
+ }
+ return parseResultInfo;
+}
+
+/**
+ * Checks and returns the current screen orientation.
+ *
+ * @returns {string} The current screen orientation ('portrait' or 'landscape').
+ */
+export function checkOrientation() {
+ if (window.matchMedia("(orientation: portrait)").matches) {
+ return "portrait";
+ } else if (window.matchMedia("(orientation: landscape)").matches) {
+ return "landscape";
+ }
+}
+
+export function getVisibleRegionOfVideo() {
+ if (!cameraView || !cameraView.getVideoElement()) return;
+ const video = cameraView.getVideoElement();
+ const { videoWidth, videoHeight } = video;
+ const objectFit = cameraView.getVideoFit();
+
+ // Adjust dimensions based on orientation
+ const isPortrait = checkOrientation() === "portrait";
+ const width = isPortrait ? Math.min(videoWidth, videoHeight) : Math.max(videoWidth, videoHeight);
+ const height = isPortrait ? Math.max(videoWidth, videoHeight) : Math.min(videoWidth, videoHeight);
+
+ // Get the CSS dimensions of the video element
+ const { width: videoCSSWidth, height: videoCSSHeight } = cameraView._innerComponent.getBoundingClientRect();
+ if (videoCSSWidth <= 0 || videoCSSHeight <= 0) {
+ throw new Error(`Unable to get video dimensions. Video may not be rendered on the page.`);
+ }
+
+ const videoCSSWHRatio = videoCSSWidth / videoCSSHeight,
+ videoWHRatio = width / height;
+ let cssScaleRatio;
+
+ // Set visible region in pixels
+ const regionInPixels = {
+ x: 0,
+ y: 0,
+ width: width,
+ height: height,
+ isMeasuredInPercentage: false,
+ };
+
+ if (objectFit === "cover") {
+ if (videoCSSWHRatio < videoWHRatio) {
+ // a part of length is invisible
+ cssScaleRatio = videoCSSHeight / height;
+ regionInPixels.x = Math.floor((width - videoCSSWidth / cssScaleRatio) / 2);
+ regionInPixels.y = 0;
+ regionInPixels.width = Math.ceil(videoCSSWidth / cssScaleRatio);
+ regionInPixels.height = height;
+ } else {
+ // a part of height is invisible
+ cssScaleRatio = videoCSSWidth / width;
+ regionInPixels.x = 0;
+ regionInPixels.y = Math.floor((height - videoCSSHeight / cssScaleRatio) / 2);
+ regionInPixels.width = width;
+ regionInPixels.height = Math.ceil(videoCSSHeight / cssScaleRatio);
+ }
+ }
+ return regionInPixels;
+}
+
+/**
+ * Create an HTML paragraph element containing the document field name and value.
+ *
+ * @param {string} field - The document field name.
+ * @param {string} value - The document field value.
+ * @returns {HTMLElement} The paragraph element containing the formatted document field name and value.
+ */
+export function resultToHTMLElement(field, value) {
+ const p = document.createElement("p");
+ p.className = "parsed-filed";
+ const spanFieldName = document.createElement("span");
+ spanFieldName.className = "field-name";
+ const spanValue = document.createElement("span");
+ spanValue.className = "field-value";
+
+ spanFieldName.innerText = `${field} : `;
+ spanValue.innerText = `${value || "Not detected"}`;
+
+ p.appendChild(spanFieldName);
+ p.appendChild(spanValue);
+
+ return p;
+}
+
+/**
+ * Formats a Machine Readable Zone (MRZ) string by adding line breaks based on its length.
+ *
+ * @param {string} [mrzString=""] - The MRZ string to format.
+ * @returns {string} The formatted MRZ string with appropriate line breaks or the original string
+ */
+export function formatMRZ(mrzString = "") {
+ let formattedMRZ = mrzString;
+
+ // Check if the length matches any known MRZ format
+ if (mrzString.length === 88) {
+ // Passport (TD3 format)
+ formattedMRZ = mrzString.slice(0, 44) + "\n" + mrzString.slice(44);
+ } else if (mrzString.length === 90) {
+ // ID card (TD1 format)
+ formattedMRZ = mrzString.slice(0, 30) + "\n" + mrzString.slice(30, 60) + "\n" + mrzString.slice(60);
+ } else if (mrzString.length === 72) {
+ // Visa (TD2 format)
+ formattedMRZ = mrzString.slice(0, 36) + "\n" + mrzString.slice(36);
+ }
+
+ return formattedMRZ;
+}
+
+/** Check if current resolution is Full HD or HD
+ * @params {Object} currentResolution - an object with `width` and `height` to represent the current resolution of the camera
+ * @returns {string} Either "HD" or "Full HD" depending of the resolution of the screen
+ */
+export const judgeCurResolution = (currentResolution) => {
+ const width = currentResolution?.width ?? 0;
+ const height = currentResolution?.height ?? 0;
+ const minValue = Math.min(width, height);
+ const maxValue = Math.max(width, height);
+ if (minValue >= 480 && minValue <= 960 && maxValue >= 960 && maxValue <= 1440) {
+ return "HD";
+ } else if (minValue >= 900 && minValue <= 1440 && maxValue >= 1400 && maxValue <= 2160) {
+ return "Full HD";
+ }
+};
+
+/**
+ * Checks if we should show the switch scan mode buttons
+ * @returns true if cameraEnhancer is open, false otherwise
+ */
+export function shouldShowScanModeContainer() {
+ const isHomepageClosed = homePage.style.display === "none";
+ const isResultClosed = resultContainer.style.display === "none" || resultContainer.style.display === "";
+ scanModeContainer.style.display = isHomepageClosed && isResultClosed ? "flex" : "none";
+}
+
+/** Show notification banner to users
+ * @params {string} message - noficiation message
+ * @params {string} className - CSS class name to show notification status
+ */
+export function showNotification(message, className) {
+ notification.className = className;
+ notification.innerText = message;
+ notification.style.display = "block";
+ notification.style.opacity = 1;
+ setTimeout(() => {
+ notification.style.opacity = 0;
+ notification.style.display = "none";
+ }, 2000);
+}
diff --git a/pr-preview/pr-14/template.json b/pr-preview/pr-14/template.json
new file mode 100644
index 0000000..b2ac8fb
--- /dev/null
+++ b/pr-preview/pr-14/template.json
@@ -0,0 +1,257 @@
+{
+ "CaptureVisionTemplates": [
+ {
+ "Name": "ReadPassportAndId",
+ "OutputOriginalImage": 1,
+ "ImageROIProcessingNameArray": ["roi-passport-and-id"],
+ "SemanticProcessingNameArray": ["sp-passport-and-id"],
+ "Timeout": 2000
+ },
+ {
+ "Name": "ReadPassport",
+ "OutputOriginalImage": 1,
+ "ImageROIProcessingNameArray": ["roi-passport"],
+ "SemanticProcessingNameArray": ["sp-passport"],
+ "Timeout": 2000
+ },
+ {
+ "Name": "ReadId",
+ "OutputOriginalImage": 1,
+ "ImageROIProcessingNameArray": ["roi-id"],
+ "SemanticProcessingNameArray": ["sp-id"],
+ "Timeout": 2000
+ }
+ ],
+ "TargetROIDefOptions": [
+ {
+ "Name": "roi-passport-and-id",
+ "TaskSettingNameArray": ["task-passport-and-id"]
+ },
+ {
+ "Name": "roi-passport",
+ "TaskSettingNameArray": ["task-passport"]
+ },
+ {
+ "Name": "roi-id",
+ "TaskSettingNameArray": ["task-id"]
+ }
+ ],
+ "TextLineSpecificationOptions": [
+ {
+ "Name": "tls_mrz_passport",
+ "BaseTextLineSpecificationName": "tls_base",
+ "StringLengthRange": [44, 44],
+ "OutputResults": 1,
+ "ExpectedGroupsCount": 1,
+ "ConcatResults": 1,
+ "ConcatSeparator": "\n",
+ "SubGroups": [
+ {
+ "StringRegExPattern": "(P[A-Z<][A-Z<]{3}[A-Z<]{39}){(44)}",
+ "StringLengthRange": [44, 44],
+ "BaseTextLineSpecificationName": "tls_base"
+ },
+ {
+ "StringRegExPattern": "([A-Z0-9<]{9}[0-9][A-Z<]{3}[0-9]{2}[0-9<]{4}[0-9][MF<][0-9]{2}[(01-12)][(01-31)][0-9][A-Z0-9<]{14}[0-9<][0-9]){(44)}",
+ "StringLengthRange": [44, 44],
+ "BaseTextLineSpecificationName": "tls_base"
+ }
+ ]
+ },
+ {
+ "Name": "tls_mrz_id_td2",
+ "BaseTextLineSpecificationName": "tls_base",
+ "StringLengthRange": [36, 36],
+ "OutputResults": 1,
+ "ExpectedGroupsCount": 1,
+ "ConcatResults": 1,
+ "ConcatSeparator": "\n",
+ "SubGroups": [
+ {
+ "StringRegExPattern": "([ACI][A-Z<][A-Z<]{3}[A-Z<]{31}){(36)}",
+ "StringLengthRange": [36, 36],
+ "BaseTextLineSpecificationName": "tls_base"
+ },
+ {
+ "StringRegExPattern": "([A-Z0-9<]{9}[0-9][A-Z<]{3}[0-9]{2}[0-9<]{4}[0-9][MF<][0-9]{2}[(01-12)][(01-31)][0-9][A-Z0-9<]{8}){(36)}",
+ "StringLengthRange": [36, 36],
+ "BaseTextLineSpecificationName": "tls_base"
+ }
+ ]
+ },
+ {
+ "Name": "tls_mrz_id_td1",
+ "BaseTextLineSpecificationName": "tls_base",
+ "StringLengthRange": [30, 30],
+ "OutputResults": 1,
+ "ExpectedGroupsCount": 1,
+ "ConcatResults": 1,
+ "ConcatSeparator": "\n",
+ "SubGroups": [
+ {
+ "StringRegExPattern": "([ACI][A-Z<][A-Z<]{3}[A-Z0-9<]{9}[0-9<][A-Z0-9<]{15}){(30)}",
+ "StringLengthRange": [30, 30],
+ "BaseTextLineSpecificationName": "tls_base"
+ },
+ {
+ "StringRegExPattern": "([0-9]{2}[(01-12)][(01-31)][0-9][MF<][0-9]{2}[0-9<]{4}[0-9][A-Z<]{3}[A-Z0-9<]{11}[0-9]){(30)}",
+ "StringLengthRange": [30, 30],
+ "BaseTextLineSpecificationName": "tls_base"
+ },
+ {
+ "StringRegExPattern": "([A-Z<]{30}){(30)}",
+ "StringLengthRange": [30, 30],
+ "BaseTextLineSpecificationName": "tls_base"
+ }
+ ]
+ },
+ {
+ "Name": "tls_base",
+ "CharacterModelName": "MRZ",
+ "CharHeightRange": [5, 1000, 1],
+ "BinarizationModes": [
+ {
+ "BlockSizeX": 30,
+ "BlockSizeY": 30,
+ "Mode": "BM_LOCAL_BLOCK",
+ "EnableFillBinaryVacancy": 0,
+ "ThresholdCompensation": 15
+ }
+ ],
+ "ConfusableCharactersCorrection": {
+ "ConfusableCharacters": [
+ ["0", "O"],
+ ["1", "I"],
+ ["5", "S"]
+ ],
+ "FontNameArray": ["OCR_B"]
+ }
+ }
+ ],
+ "LabelRecognizerTaskSettingOptions": [
+ {
+ "Name": "task-passport",
+ "ConfusableCharactersPath": "ConfusableChars.data",
+ "TextLineSpecificationNameArray": ["tls_mrz_passport"],
+ "SectionImageParameterArray": [
+ {
+ "Section": "ST_REGION_PREDETECTION",
+ "ImageParameterName": "ip-mrz"
+ },
+ {
+ "Section": "ST_TEXT_LINE_LOCALIZATION",
+ "ImageParameterName": "ip-mrz"
+ },
+ {
+ "Section": "ST_TEXT_LINE_RECOGNITION",
+ "ImageParameterName": "ip-mrz"
+ }
+ ]
+ },
+ {
+ "Name": "task-id",
+ "ConfusableCharactersPath": "ConfusableChars.data",
+ "TextLineSpecificationNameArray": ["tls_mrz_id_td1", "tls_mrz_id_td2"],
+ "SectionImageParameterArray": [
+ {
+ "Section": "ST_REGION_PREDETECTION",
+ "ImageParameterName": "ip-mrz"
+ },
+ {
+ "Section": "ST_TEXT_LINE_LOCALIZATION",
+ "ImageParameterName": "ip-mrz"
+ },
+ {
+ "Section": "ST_TEXT_LINE_RECOGNITION",
+ "ImageParameterName": "ip-mrz"
+ }
+ ]
+ },
+ {
+ "Name": "task-passport-and-id",
+ "ConfusableCharactersPath": "ConfusableChars.data",
+ "TextLineSpecificationNameArray": ["tls_mrz_passport", "tls_mrz_id_td1", "tls_mrz_id_td2"],
+ "SectionImageParameterArray": [
+ {
+ "Section": "ST_REGION_PREDETECTION",
+ "ImageParameterName": "ip-mrz"
+ },
+ {
+ "Section": "ST_TEXT_LINE_LOCALIZATION",
+ "ImageParameterName": "ip-mrz"
+ },
+ {
+ "Section": "ST_TEXT_LINE_RECOGNITION",
+ "ImageParameterName": "ip-mrz"
+ }
+ ]
+ }
+ ],
+ "CharacterModelOptions": [
+ {
+ "DirectoryPath": "",
+ "Name": "MRZ"
+ }
+ ],
+ "ImageParameterOptions": [
+ {
+ "Name": "ip-mrz",
+ "TextureDetectionModes": [
+ {
+ "Mode": "TDM_GENERAL_WIDTH_CONCENTRATION",
+ "Sensitivity": 8
+ }
+ ],
+ "BinarizationModes": [
+ {
+ "EnableFillBinaryVacancy": 0,
+ "ThresholdCompensation": 21,
+ "Mode": "BM_LOCAL_BLOCK"
+ }
+ ],
+ "TextDetectionMode": {
+ "Mode": "TTDM_LINE",
+ "CharHeightRange": [5, 1000, 1],
+ "Direction": "HORIZONTAL",
+ "Sensitivity": 7
+ }
+ }
+ ],
+ "SemanticProcessingOptions": [
+ {
+ "Name": "sp-passport-and-id",
+ "ReferenceObjectFilter": {
+ "ReferenceTargetROIDefNameArray": ["roi-passport-and-id"]
+ },
+ "TaskSettingNameArray": ["dcp-passport-and-id"]
+ },
+ {
+ "Name": "sp-passport",
+ "ReferenceObjectFilter": {
+ "ReferenceTargetROIDefNameArray": ["roi-passport"]
+ },
+ "TaskSettingNameArray": ["dcp-passport"]
+ },
+ {
+ "Name": "sp-id",
+ "ReferenceObjectFilter": {
+ "ReferenceTargetROIDefNameArray": ["roi-id"]
+ },
+ "TaskSettingNameArray": ["dcp-id"]
+ }
+ ],
+ "CodeParserTaskSettingOptions": [
+ {
+ "Name": "dcp-passport",
+ "CodeSpecifications": ["MRTD_TD3_PASSPORT"]
+ },
+ {
+ "Name": "dcp-id",
+ "CodeSpecifications": ["MRTD_TD1_ID", "MRTD_TD2_ID"]
+ },
+ {
+ "Name": "dcp-passport-and-id",
+ "CodeSpecifications": ["MRTD_TD3_PASSPORT", "MRTD_TD1_ID", "MRTD_TD2_ID"]
+ }
+ ]
+}
+
+
+
+
+