From 62e3ad584b002fc6ef73b9cd0df1f1f2e86db2ad Mon Sep 17 00:00:00 2001 From: Aare Undo Date: Thu, 27 Nov 2025 10:10:27 +0200 Subject: [PATCH 1/3] barcode scanning modes examples --- .../src/_snippets/BarcodeScanningModes.ts | 103 ++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 react-js/src/_snippets/BarcodeScanningModes.ts diff --git a/react-js/src/_snippets/BarcodeScanningModes.ts b/react-js/src/_snippets/BarcodeScanningModes.ts new file mode 100644 index 0000000..434d44c --- /dev/null +++ b/react-js/src/_snippets/BarcodeScanningModes.ts @@ -0,0 +1,103 @@ +/** + * This code snippet is to be used only as a part of the website documentation. + * It is not intended for any use outside of the support of documentation by Scanbot SDK GmbH employees. + * + * For maintainers: whenever changing this code, ensure that links using it are still pointing to valid lines! + */ + +import ScanbotSDK from "scanbot-web-sdk/ui"; +import { BarcodeScannerViewConfiguration } from "scanbot-web-sdk/@types"; +import { ViewFinderConfiguration } from "scanbot-web-sdk/@types/ui2/configuration/common/ViewFinderConfiguration"; + +// Mock the ScanbotSDK initialization for this snippet +const sdk = await ScanbotSDK.initialize({ licenseKey: "", enginePath: "" }); + +export class BarcodeScanningModes { + + single(): BarcodeScannerViewConfiguration { + const config: BarcodeScannerViewConfiguration = { + containerId: "", + onBarcodesDetected: (result) => { + console.log("Barcodes detected:", result.barcodes); + // If you want to scan a single barcode, you'll want to close the scanner after first detection + } + } + config.scannerConfiguration!.returnBarcodeImage = true; + + return config; + } + + multiple(): BarcodeScannerViewConfiguration { + const config: BarcodeScannerViewConfiguration = { + containerId: "", + onBarcodesDetected: (result) => { + console.log("Barcodes detected:", result.barcodes); + // In multiple barcode scanning mode, the scanner continues scanning and reporting barcodes + // until you explicitly stop or dispose it. + } + } + config.scannerConfiguration!.returnBarcodeImage = true; + if (config.finder?._type === "ViewFinderConfiguration") { + // Finder type can be persistent or transient, so we need to cast it + (config.finder as ViewFinderConfiguration).visible = false; + } + return config; + } + + batch(): BarcodeScannerViewConfiguration { + return { + containerId: "", + onBarcodesDetected: (result) => { + console.log("Barcodes detected:", result.barcodes); + // In batch barcode scanning mode, the scanner continues scanning and reporting barcodes + // until you explicitly stop or dispose it. + // You can collect the results into a batch for further processing. + } + }; + } + + detectOnStillImages() { + const fileInput: HTMLInputElement = document.createElement("input"); + fileInput.type = "file"; + fileInput.id = "file-input"; + fileInput.accept = "image/png, image/jpeg"; + fileInput.style.display = "none"; + + try { + if (!fileInput) { + return; + } + fileInput.click(); + + fileInput.onchange = async (e: Event) => { + e.preventDefault(); + const target = e.target as HTMLInputElement; + + const reader = new FileReader(); + const file = target.files?.[0]; + + if (file) { + reader.readAsDataURL(file); + + reader.onload = async () => { + try { + const result = await sdk.detectBarcodes(reader.result as string); + + if (result.barcodes.length === 0) { + alert("No barcodes were detected in your image."); + } else { + alert(`${result.barcodes.length} barcodes were detected in your image.`); + } + } catch (error) { + alert("Error while detecting barcodes: " + error); + } + }; + } + }; + fileInput.remove(); + + } catch (error) { + alert(error); + } + } +} From 1a895d3fc29dd231ee4260c70d75c00bbeb62f4f Mon Sep 17 00:00:00 2001 From: Aare Undo Date: Thu, 27 Nov 2025 13:34:09 +0200 Subject: [PATCH 2/3] react: improve line order in snippets --- react-js/src/_snippets/BarcodeScanningModes.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/react-js/src/_snippets/BarcodeScanningModes.ts b/react-js/src/_snippets/BarcodeScanningModes.ts index 434d44c..d082b71 100644 --- a/react-js/src/_snippets/BarcodeScanningModes.ts +++ b/react-js/src/_snippets/BarcodeScanningModes.ts @@ -18,8 +18,8 @@ export class BarcodeScanningModes { const config: BarcodeScannerViewConfiguration = { containerId: "", onBarcodesDetected: (result) => { - console.log("Barcodes detected:", result.barcodes); // If you want to scan a single barcode, you'll want to close the scanner after first detection + console.log("Barcodes detected:", result.barcodes); } } config.scannerConfiguration!.returnBarcodeImage = true; @@ -31,9 +31,9 @@ export class BarcodeScanningModes { const config: BarcodeScannerViewConfiguration = { containerId: "", onBarcodesDetected: (result) => { - console.log("Barcodes detected:", result.barcodes); // In multiple barcode scanning mode, the scanner continues scanning and reporting barcodes // until you explicitly stop or dispose it. + console.log("Barcodes detected:", result.barcodes); } } config.scannerConfiguration!.returnBarcodeImage = true; @@ -48,10 +48,10 @@ export class BarcodeScanningModes { return { containerId: "", onBarcodesDetected: (result) => { - console.log("Barcodes detected:", result.barcodes); // In batch barcode scanning mode, the scanner continues scanning and reporting barcodes // until you explicitly stop or dispose it. // You can collect the results into a batch for further processing. + console.log("Barcodes detected:", result.barcodes); } }; } From 867d09809f601b23415456ec5b55fffbdc61ba36 Mon Sep 17 00:00:00 2001 From: Aare Undo Date: Thu, 27 Nov 2025 13:50:46 +0200 Subject: [PATCH 3/3] react: add AR modes to snippets --- .../src/_snippets/BarcodeScanningModes.ts | 79 ++++++++++++++++++- 1 file changed, 78 insertions(+), 1 deletion(-) diff --git a/react-js/src/_snippets/BarcodeScanningModes.ts b/react-js/src/_snippets/BarcodeScanningModes.ts index d082b71..8be83e7 100644 --- a/react-js/src/_snippets/BarcodeScanningModes.ts +++ b/react-js/src/_snippets/BarcodeScanningModes.ts @@ -6,7 +6,7 @@ */ import ScanbotSDK from "scanbot-web-sdk/ui"; -import { BarcodeScannerViewConfiguration } from "scanbot-web-sdk/@types"; +import { BarcodeItem, BarcodeScannerViewConfiguration, IBarcodePolygonHandle, IBarcodePolygonLabelHandle } from "scanbot-web-sdk/@types"; import { ViewFinderConfiguration } from "scanbot-web-sdk/@types/ui2/configuration/common/ViewFinderConfiguration"; // Mock the ScanbotSDK initialization for this snippet @@ -100,4 +100,81 @@ export class BarcodeScanningModes { alert(error); } } + + multiAR(): BarcodeScannerViewConfiguration { + return { + containerId: "", + finder: { + _type: "ViewFinderConfiguration", + visible: false, + }, + overlay: { + visible: true, + // Barcodes are detected automatically in the AR overlay. + automaticSelectionEnabled: true, + }, + onBarcodesDetected: (result) => { + console.log("Barcodes detected:", result.barcodes); + }, + }; + } + + selectAR(): BarcodeScannerViewConfiguration { + return { + containerId: "", + finder: { + _type: "ViewFinderConfiguration", + visible: false, + }, + overlay: { + visible: true, + // Barcodes are detected only when the user selects them in the AR overlay. + automaticSelectionEnabled: false, + }, + onBarcodesDetected: (result) => { + console.log("Barcodes detected:", result.barcodes); + }, + }; + } + + findAndPick(): BarcodeScannerViewConfiguration { + return { + containerId: "", + finder: { + _type: "ViewFinderConfiguration", + visible: false, + }, + scannerConfiguration: { + returnBarcodeImage: true, + }, + overlay: { + visible: true, + // Barcodes are detected only when the user selects them in the AR overlay. + automaticSelectionEnabled: false, + onBarcodeFound: (code: BarcodeItem, polygon: IBarcodePolygonHandle, label: IBarcodePolygonLabelHandle) => { + // This callback is invoked whenever a barcode is "found" in the camera preview. + // Note that the barcode is not "selected" yet, i.e. onBarcodesDetected is not called yet. + if (code.format === "QR_CODE") { + polygon.style({ + fillColor: "rgba(0, 255, 0, 0.3)", + strokeColor: "rgba(0, 255, 0, 1)", + }); + label.style({ + backgroundColor: "rgba(0, 255, 0, 0.9)", + textColor: "white", + }); + } else { + polygon.style({ + fillColor: "rgba(255, 255, 255, 0.3)", + strokeColor: "rgba(255, 255, 255, 1)", + }); + label.style({ + backgroundColor: "rgba(255, 255, 255, 0.9)", + textColor: "black", + }); + } + } + }, + }; + } }