Skip to content

fix: match hello-world js to sample on docs #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

fix: match hello-world js to sample on docs #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 87 additions & 82 deletions hello-world/es6.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,101 @@
<!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, es6" />
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/es6.html" />
<title>Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera)</title>
</head>

<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, es6" />
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/es6.html" />
<title>Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera)</title>
</head>
<body>
<h1>Hello World for ES6 (Decode via Camera)</h1>
<div id="div-ui-container" style="width: 100%; height: 80vh"></div>
Results:<br />
<div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto"></div>
<script type="module">
import {
CoreModule,
LicenseManager,
CaptureVisionRouter,
CameraView,
CameraEnhancer,
MultiFrameResultCrossFilter,
} from "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.mjs";

<body>
<h1>Hello World for ES6 (Decode via Camera)</h1>
<div id="div-ui-container" style="width: 100%; height: 80vh"></div>
Results:<br>
<div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto;"></div>
<script type="module">
import { CoreModule, LicenseManager, CaptureVisionRouter, CameraView, CameraEnhancer, MultiFrameResultCrossFilter }
from "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.mjs";
/** LICENSE ALERT - README
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
*/

/** 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");

LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
/**
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&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/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
* LICENSE ALERT - THE END
*/

/**
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&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/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
* LICENSE ALERT - THE END
*/
CoreModule.engineResourcePaths = {
std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/",
};

CoreModule.engineResourcePaths = {
std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/"
};
// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
CoreModule.loadWasm(["DBR"]);

// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
CoreModule.loadWasm(["DBR"]);
(async function () {
try {
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
const cameraView = await CameraView.createInstance();
const cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
// Get default UI and append it to DOM.
document.querySelector("#div-ui-container").append(cameraView.getUIElement());

(async function () {
try {
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
const cameraView = await CameraView.createInstance();
const cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
// Get default UI and append it to DOM.
document.querySelector("#div-ui-container").append(cameraView.getUIElement());
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
const cvRouter = await CaptureVisionRouter.createInstance();
cvRouter.setInput(cameraEnhancer);

// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
const cvRouter = await CaptureVisionRouter.createInstance();
cvRouter.setInput(cameraEnhancer);
// Define a callback for results.
cvRouter.addResultReceiver({
onDecodedBarcodesReceived: (result) => {
if (!result.barcodeResultItems.length) return;

// Define a callback for results.
cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
if (!result.barcodeResultItems.length) return;
const resultsContainer = document.querySelector("#div-results-container");
resultsContainer.textContent = "";
console.log(result);
for (let item of result.barcodeResultItems) {
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
}
},
});

const resultsContainer = document.querySelector("#div-results-container");
resultsContainer.textContent = '';
console.log(result);
for (let item of result.barcodeResultItems) {
resultsContainer.append(
`${item.formatString}: ${item.text}`,
document.createElement('br'),
document.createElement('hr'),
);
}
}});
// 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);

// 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) {
let errMsg = ex.message || ex;
console.error(errMsg);
alert(errMsg);
}
})();
</script>
</body>

</html>
// Open camera and start scanning single barcode.
await cameraEnhancer.open();
await cvRouter.startCapturing("ReadSingleBarcode");
} catch (ex) {
let errMsg = ex.message || ex;
console.error(errMsg);
alert(errMsg);
}
})();
</script>
</body>
</html>
143 changes: 72 additions & 71 deletions hello-world/hello-world.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,84 +1,85 @@
<!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>
<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="div-ui-container" style="width: 100%; height: 80vh"></div>
Results:<br>
<div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto;"></div>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
<script>
/** LICENSE ALERT - README
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
*/
<body>
<h1>Hello World (Decode via Camera)</h1>
<div id="div-ui-container" style="width: 100%; height: 80vh"></div>
Results:<br />
<div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto"></div>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
<script>
/** 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");
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");

/**
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&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/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
* LICENSE ALERT - THE END
*/
/**
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&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/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license 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.
Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
// Defined globally for easy debugging.
let cameraEnhancer, cvRouter;
// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
// Defined globally for easy debugging.
let cameraEnhancer, cvRouter;

(async () => {
try {
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
// Get default UI and append it to DOM.
document.querySelector("#div-ui-container").append(cameraView.getUIElement());
(async () => {
try {
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
// Get default UI and append it to DOM.
document.querySelector("#div-ui-container").append(cameraView.getUIElement());

// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
cvRouter.setInput(cameraEnhancer);
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
cvRouter.setInput(cameraEnhancer);

// Define a callback for results.
cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
if (!result.barcodeResultItems.length) return;
// Define a callback for results.
cvRouter.addResultReceiver({
onDecodedBarcodesReceived: (result) => {
if (!result.barcodeResultItems.length) return;

const resultsContainer = document.querySelector("#div-results-container");
resultsContainer.textContent = '';
console.log(result);
for (let item of result.barcodeResultItems) {
resultsContainer.append(
`${item.formatString}: ${item.text}`,
document.createElement('br'),
document.createElement('hr'),
);
}
}});
const resultsContainer = document.querySelector("#div-results-container");
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 Dynamsoft.Utility.MultiFrameResultCrossFilter();
// Filter out unchecked barcodes.
filter.enableResultCrossVerification("barcode", true);
// Filter out duplicate barcodes within 3 seconds.
filter.enableResultDeduplication("barcode", true);
await cvRouter.addResultFilter(filter);
// Filter out unchecked and duplicate results.
const filter = new Dynamsoft.Utility.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) {
let errMsg = ex.message || ex;
console.error(errMsg);
alert(errMsg);
}
})();
</script>
</body>
// Open camera and start scanning single barcode.
await cameraEnhancer.open();
await cvRouter.startCapturing("ReadSingleBarcode");
} catch (ex) {
let errMsg = ex.message || ex;
console.error(errMsg);
alert(errMsg);
}
})();
</script>
</body>
</html>
Loading