Merge pull request #220 from Dynamsoft/_dev

add native-ts-sample
Dynamsoft · Oct 25, 2024 · 83351aa · 83351aa
2 parents a7e0a2d + dc656e2
commit 83351aa
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 0 deletions.
diff --git a/hello-world/native-ts/index.html b/hello-world/native-ts/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
+  <meta name="keywords" content="barcode, camera" />
+  <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" />
+  <title>Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)</title>
+</head>
+
+<body>
+  <h1>Hello World (Decode via Camera)</h1>
+  <div id="camera-view-container" style="width: 100%; height: 80vh"></div>
+  Results:<br />
+  <div id="results" style="width: 100%; height: 10vh; overflow: auto; white-space: pre-wrap"></div>
+  <script src="./dist/index.js"></script>
+</body>
+
+</html>
diff --git a/hello-world/native-ts/index.ts b/hello-world/native-ts/index.ts
@@ -0,0 +1,73 @@
+import "dynamsoft-barcode-reader"
+import { CoreModule } from "dynamsoft-core";
+import { LicenseManager } from "dynamsoft-license";
+import { CameraView, CameraEnhancer } from "dynamsoft-camera-enhancer";
+import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
+import { MultiFrameResultCrossFilter } from "dynamsoft-utility";
+import { DecodedBarcodesResult } from "dynamsoft-barcode-reader";
+
+// Configures the paths where the .wasm files and other necessary resources for modules are located.
+CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
+
+/** LICENSE ALERT - README
+ * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
+ */
+
+LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
+
+/**
+ * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&product=dbr&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/barcode-reader/docs/web/programming/javascript/user-guide/index.html?ver=10.4.2001&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com.
+ * LICENSE ALERT - THE END
+ */
+
+// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
+CoreModule.loadWasm(["DBR"]);
+// Defined globally for easy debugging.
+let cameraEnhancer: CameraEnhancer;
+let cvRouter: CaptureVisionRouter;
+
+(async () => {
+  try {
+    // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
+    const cameraView = await CameraView.createInstance();
+    cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
+    // Get default UI and append it to DOM.
+    document.querySelector("#camera-view-container")!.append(cameraView.getUIElement());
+
+    // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
+    cvRouter = await CaptureVisionRouter.createInstance();
+    cvRouter.setInput(cameraEnhancer);
+
+    // Define a callback for results.
+    cvRouter.addResultReceiver({
+      onDecodedBarcodesReceived: (result: DecodedBarcodesResult) => {
+        if (!result.barcodeResultItems.length) return;
+
+        const resultsContainer = document.querySelector("#results")!;
+        resultsContainer.textContent = "";
+        console.log(result);
+        for (let item of result.barcodeResultItems) {
+          resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
+        }
+      },
+    });
+
+    // Filter out unchecked and duplicate results.
+    const filter = new MultiFrameResultCrossFilter();
+    // Filter out unchecked barcodes.
+    filter.enableResultCrossVerification("barcode", true);
+    // Filter out duplicate barcodes within 3 seconds.
+    filter.enableResultDeduplication("barcode", true);
+    await cvRouter.addResultFilter(filter);
+
+    // Open camera and start scanning single barcode.
+    await cameraEnhancer.open();
+    await cvRouter.startCapturing("ReadSingleBarcode");
+  } catch (ex: any) {
+    let errMsg = ex.message || ex;
+    console.error(errMsg);
+    alert(errMsg);
+  }
+})();
diff --git a/hello-world/native-ts/package.json b/hello-world/native-ts/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "dbrjs-native-ts-sample",
+  "version": "0.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build": "tsc && rollup -c",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "dynamsoft-barcode-reader-bundle": "10.4.2002"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "rollup": "^4.24.0",
+    "tslib": "^2.8.0",
+    "typescript": "^5.6.3"
+  }
+}
diff --git a/hello-world/native-ts/rollup.config.mjs b/hello-world/native-ts/rollup.config.mjs
@@ -0,0 +1,27 @@
+import typescript from "@rollup/plugin-typescript";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+
+// https://rollupjs.org/guide/en/#configuration-files
+export default () => {
+  // cvr.js: Only use for <script>, compatibility target to es6. Will never through webpack/rollup again
+  // cvr.esm.js: same as .mjs, webpack 4 don't know mjs, so current we still set .esm.js as package.json->browser
+  return [
+    {
+      input: "./index.ts",
+      plugins: [
+        typescript({
+          tsconfig: "./tsconfig.json"
+        }),
+        nodeResolve({
+          exportConditions: ["browser", "default", "module", "import"],
+        }),
+      ],
+      output: [
+        {
+          file: "./dist/index.js",
+          format: "umd",
+        },
+      ],
+    },
+  ];
+};
diff --git a/hello-world/native-ts/tsconfig.json b/hello-world/native-ts/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+  }
+}