Skip to content

Commit 83351aa

Browse files
Shen-wbShen-wb
authored
Merge pull request #220 from Dynamsoft/_dev
add native-ts-sample
2 parents a7e0a2d + dc656e2 commit 83351aa

File tree

5 files changed

+165
-0
lines changed

5 files changed

+165
-0
lines changed

‎hello-world/native-ts/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7+
<meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
8+
<meta name="keywords" content="barcode, camera" />
9+
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" />
10+
<title>Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)</title>
11+
</head>
12+
13+
<body>
14+
<h1>Hello World (Decode via Camera)</h1>
15+
<div id="camera-view-container" style="width: 100%; height: 80vh"></div>
16+
Results:<br />
17+
<div id="results" style="width: 100%; height: 10vh; overflow: auto; white-space: pre-wrap"></div>
18+
<script src="./dist/index.js"></script>
19+
</body>
20+
21+
</html>

‎hello-world/native-ts/index.ts

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import "dynamsoft-barcode-reader"
2+
import { CoreModule } from "dynamsoft-core";
3+
import { LicenseManager } from "dynamsoft-license";
4+
import { CameraView, CameraEnhancer } from "dynamsoft-camera-enhancer";
5+
import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
6+
import { MultiFrameResultCrossFilter } from "dynamsoft-utility";
7+
import { DecodedBarcodesResult } from "dynamsoft-barcode-reader";
8+
9+
// Configures the paths where the .wasm files and other necessary resources for modules are located.
10+
CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
11+
12+
/** LICENSE ALERT - README
13+
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
14+
*/
15+
16+
LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
17+
18+
/**
19+
* 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.
20+
* 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.
21+
* 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.
22+
* LICENSE ALERT - THE END
23+
*/
24+
25+
// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
26+
CoreModule.loadWasm(["DBR"]);
27+
// Defined globally for easy debugging.
28+
let cameraEnhancer: CameraEnhancer;
29+
let cvRouter: CaptureVisionRouter;
30+
31+
(async () => {
32+
try {
33+
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
34+
const cameraView = await CameraView.createInstance();
35+
cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
36+
// Get default UI and append it to DOM.
37+
document.querySelector("#camera-view-container")!.append(cameraView.getUIElement());
38+
39+
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
40+
cvRouter = await CaptureVisionRouter.createInstance();
41+
cvRouter.setInput(cameraEnhancer);
42+
43+
// Define a callback for results.
44+
cvRouter.addResultReceiver({
45+
onDecodedBarcodesReceived: (result: DecodedBarcodesResult) => {
46+
if (!result.barcodeResultItems.length) return;
47+
48+
const resultsContainer = document.querySelector("#results")!;
49+
resultsContainer.textContent = "";
50+
console.log(result);
51+
for (let item of result.barcodeResultItems) {
52+
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
53+
}
54+
},
55+
});
56+
57+
// Filter out unchecked and duplicate results.
58+
const filter = new MultiFrameResultCrossFilter();
59+
// Filter out unchecked barcodes.
60+
filter.enableResultCrossVerification("barcode", true);
61+
// Filter out duplicate barcodes within 3 seconds.
62+
filter.enableResultDeduplication("barcode", true);
63+
await cvRouter.addResultFilter(filter);
64+
65+
// Open camera and start scanning single barcode.
66+
await cameraEnhancer.open();
67+
await cvRouter.startCapturing("ReadSingleBarcode");
68+
} catch (ex: any) {
69+
let errMsg = ex.message || ex;
70+
console.error(errMsg);
71+
alert(errMsg);
72+
}
73+
})();

‎hello-world/native-ts/package.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "dbrjs-native-ts-sample",
3+
"version": "0.0.0",
4+
"main": "index.js",
5+
"scripts": {
6+
"build": "tsc && rollup -c",
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"description": "",
13+
"dependencies": {
14+
"dynamsoft-barcode-reader-bundle": "10.4.2002"
15+
},
16+
"devDependencies": {
17+
"@rollup/plugin-node-resolve": "^15.3.0",
18+
"@rollup/plugin-typescript": "^12.1.1",
19+
"rollup": "^4.24.0",
20+
"tslib": "^2.8.0",
21+
"typescript": "^5.6.3"
22+
}
23+
}

‎hello-world/native-ts/rollup.config.mjs

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import typescript from "@rollup/plugin-typescript";
2+
import { nodeResolve } from "@rollup/plugin-node-resolve";
3+
4+
// https://rollupjs.org/guide/en/#configuration-files
5+
export default () => {
6+
// cvr.js: Only use for <script>, compatibility target to es6. Will never through webpack/rollup again
7+
// cvr.esm.js: same as .mjs, webpack 4 don't know mjs, so current we still set .esm.js as package.json->browser
8+
return [
9+
{
10+
input: "./index.ts",
11+
plugins: [
12+
typescript({
13+
tsconfig: "./tsconfig.json"
14+
}),
15+
nodeResolve({
16+
exportConditions: ["browser", "default", "module", "import"],
17+
}),
18+
],
19+
output: [
20+
{
21+
file: "./dist/index.js",
22+
format: "umd",
23+
},
24+
],
25+
},
26+
];
27+
};

‎hello-world/native-ts/tsconfig.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es2017",
4+
"lib": [
5+
"dom",
6+
"dom.iterable",
7+
"esnext"
8+
],
9+
"allowJs": true,
10+
"esModuleInterop": true,
11+
"allowSyntheticDefaultImports": true,
12+
"strict": true,
13+
"forceConsistentCasingInFileNames": true,
14+
"noFallthroughCasesInSwitch": true,
15+
"module": "ESNext",
16+
"moduleResolution": "node",
17+
"resolveJsonModule": true,
18+
"isolatedModules": true,
19+
"noEmit": true,
20+
}
21+
}

0 commit comments

Comments
 (0)