v8.1.0

react-js/src/_snippets/BarcodeScanningModes.ts

@@ -0,0 +1,180 @@
+/**
+ * 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 { 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
+const sdk = await ScanbotSDK.initialize({ licenseKey: "", enginePath: "" });
+
+export class BarcodeScanningModes {
+
+    single(): BarcodeScannerViewConfiguration {
+        const config: BarcodeScannerViewConfiguration = {
+            containerId: "<SCANNER-CONTAINER-ID>",
+            onBarcodesDetected: (result) => {
+                // 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;
+
+        return config;
+    }
+
+    multiple(): BarcodeScannerViewConfiguration {
+        const config: BarcodeScannerViewConfiguration = {
+            containerId: "<SCANNER-CONTAINER-ID>",
+            onBarcodesDetected: (result) => {
+                // 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;
+        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: "<SCANNER-CONTAINER-ID>",
+            onBarcodesDetected: (result) => {
+                // 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);
+            }
+        };
+    }
+
+    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);
+        }
+    }
+
+    multiAR(): BarcodeScannerViewConfiguration {
+        return {
+            containerId: "<SCANNER-CONTAINER-ID>",
+            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: "<SCANNER-CONTAINER-ID>",
+            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: "<SCANNER-CONTAINER-ID>",
+            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",
+                        });
+                    }
+                }
+            },
+        };
+    }
+}