From 9d47483d7ba0c5f459984098b7925953c229b7eb Mon Sep 17 00:00:00 2001 From: DMGithubPublisher Date: Thu, 10 Oct 2024 18:32:42 +0800 Subject: [PATCH] 10.4.2000 --- API Reference.url | 2 +- README.md | 215 +++++++++++++++--------------- dist/dbr.bundle.js | 4 +- dist/dbr.bundle.mjs | 4 +- dist/dbr.no-content-bundle.esm.js | 4 +- package.json | 16 +-- samples.url | 2 +- 7 files changed, 125 insertions(+), 122 deletions(-) diff --git a/API Reference.url b/API Reference.url index bc2b1b8..33c5b7c 100644 --- a/API Reference.url +++ b/API Reference.url @@ -1,2 +1,2 @@ [InternetShortcut] -URL=https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=10.2.1000 \ No newline at end of file +URL=https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=10.4.20 \ No newline at end of file diff --git a/README.md b/README.md index af1646f..3987a73 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,3 @@ - - # Barcode Reader for Your Website - User Guide [Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code. @@ -56,21 +54,21 @@ In this guide, you will learn step by step on how to integrate the DBR-JS SDK in **Popular Examples** -- Hello World - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.2.10&utm_source=github) -- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/angular/dist/dbrjs-sample-angular/browser/?ver=10.2.10&utm_source=github) -- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/react/build/?ver=10.2.10&utm_source=github) -- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/vue) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/vue/dist/?ver=10.2.10&utm_source=github) -- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html?ver=10.2.10&utm_source=github) -- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.2.10/hello-world/webview) -- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/use-case/read-a-drivers-license/index.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/use-case/read-a-drivers-license/index.html?ver=10.2.10&utm_source=github) -- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/use-case/fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/use-case/fill-a-form-with-barcode-reading.html?ver=10.2.10&utm_source=github) -- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/use-case/show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/show-result-texts-on-the-video.html?ver=10.2.10&utm_source=github) -- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/others/debug) +- Hello World - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.20&utm_source=github) +- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/angular) +- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/react) +- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/vue) +- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/pwa) +- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.20/hello-world/webview) +- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/read-a-drivers-license/index.html) +- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/fill-a-form-with-barcode-reading.html) +- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/show-result-texts-on-the-video.html) +- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/others/debug) You can also: -- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=10.2.10&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/) -- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=10.2.10&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.2.10/) +- Try the Official Demo - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/) \| [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=10.4.20&utm_source=github) +- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.20/) ## Hello World - Simplest Implementation @@ -89,18 +87,18 @@ The complete code of the "Hello World" example is shown below -
+
- + + ``` - UNPKG ```html - + ``` - In some rare cases (such as some restricted areas), you might not be able to access the CDN. If this happens, you can use the following files for the test. ```html - + ``` However, please **DO NOT** use `download2.dynamsoft.com` resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself. @@ -251,49 +245,47 @@ The simplest way to include the SDK is to use either the [jsDelivr](https://jsde - In frameworks like React and Vue, you may want to add the package as a dependency. ```sh - npm i dynamsoft-barcode-reader-bundle@10.2.1000 -E + npm i dynamsoft-barcode-reader-bundle@10.4.2000 -E # or - yarn add dynamsoft-barcode-reader-bundle@10.2.1000 -E + yarn add dynamsoft-barcode-reader-bundle@10.4.2000 -E ``` - In frameworks you need to [specify the engineResourcePaths](#specify-the-location-of-the-engine-files-optional). + NOTE that in frameworks, you need to [specify the engineResourcePaths](#specify-the-location-of-the-engine-files-optional). #### Host the SDK yourself (optional) Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application. -Options to download the SDK: +There are two options for downloading the SDK, and the usage for each is slightly different - From the website - [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.2.10&utm_source=github&product=dbr&package=js) + [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.4.20&utm_source=github&product=dbr&package=js) + + The resources are located at path `dynamsoft/distributables/@`, you can typically include it like this: - The resources are located at path `dynamsoft/distributables/@`. + ```html + + ``` - npm ```sh - npm i dynamsoft-barcode-reader-bundle@10.2.1000 -E + npm i dynamsoft-barcode-reader-bundle@10.4.2000 -E # Compared with using CDN, you need to set up more resources. - npm i dynamsoft-capture-vision-std@1.2.0 -E - npm i dynamsoft-image-processing@2.2.10 -E + npm i dynamsoft-capture-vision-std@1.4.10 -E + npm i dynamsoft-image-processing@2.4.20 -E ``` - The resources are located at path `node_modules/`, without `@`. - -Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this -- From the website - - ```html - - ``` - -- From node_modules + The resources are located at the path `node_modules/`, without `@`, so the script would be like: ```html ``` - Since `@` are missing, you need to [specify the engineResourcePaths](#specify-the-location-of-the-engine-files-optional). + + Since the version tags (`@`) are missing, you need to [specify the engineResourcePaths](#specify-the-location-of-the-engine-files-optional) so that the SDK can find the resources correctly. + + > To avoid confusion, we suggest renaming "node_modules" or moving "dynamsoft-" packages elsewhere for self-hosting, as "node_modules" is reserved for Node.js dependencies. *Note*: @@ -324,7 +316,7 @@ To enable the SDK's functionality, you must provide a valid license. Utilize the Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); ``` -As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the [customer portal](https://www.dynamsoft.com/customer/license/trialLicense?ver=10.2.10&utm_source=github&product=dbr&package=js). +As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the Request a Trial License link. > Upon registering a Dynamsoft account and obtaining the SDK package from the official website, Dynamsoft will automatically create a 30-day free trial license and embed the corresponding license key into all the provided SDK samples. @@ -337,13 +329,13 @@ The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*. ```javascript //The following code uses the jsDelivr CDN, feel free to change it to your own location of these files Object.assign(Dynamsoft.Core.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/" + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.4.10/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.4.20/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.4.20/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.4.20/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.4.20/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.4.20/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.1.0/dist/" }); ``` @@ -380,7 +372,7 @@ When creating a `CaptureVisionRouter` object within a function which may be call ```javascript Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); -let pCvRouter = null; // promise of cvRouter +let pCvRouter = null; // The helper variable which is a promise of cvRouter let cvRouter = null; document.getElementById('btn-scan').addEventListener('click', async () => { @@ -396,16 +388,16 @@ document.getElementById('btn-scan').addEventListener('click', async () => { The `CaptureVisionRouter` object, denoted as `cvRouter`, is responsible for handling images provided by an image source. In our scenario, we aim to detect barcodes directly from a live video stream. To facilitate this, we initialize a `CameraEnhancer` object, identified as `cameraEnhancer`, which is specifically designed to capture image frames from the video feed and subsequently forward them to `cvRouter`. -To enable video streaming on the webpage, we create a `CameraView` object referred to as `view`, which is then passed to `cameraEnhancer`, and its content is displayed on the webpage. +To enable video streaming on the webpage, we create a `CameraView` object referred to as `cameraView`, which is then passed to `cameraEnhancer`, and its content is displayed on the webpage. ```html -
+
``` ```javascript -let view = await Dynamsoft.DCE.CameraView.createInstance(); -let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view); -document.querySelector("#cameraViewContainer").append(view.getUIElement()); +let cameraView = await Dynamsoft.DCE.CameraView.createInstance(); +let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView); +document.querySelector("#camera-view-container").append(cameraView.getUIElement()); cvRouter.setInput(cameraEnhancer); ``` @@ -464,7 +456,7 @@ await cvRouter.startCapturing("ReadSingleBarcode"); | Template Name | Function Description | | ------------------------------ | -------------------------------------------------------------- | -| **ReadBarcodes_Default** | Scans a single barcode. | +| **ReadBarcodes_Default** | Scans multiple barcodes by default setting. | | **ReadSingleBarcode** | Quickly scans a single barcode. | | **ReadBarcodes_SpeedFirst** | Prioritizes speed in scanning multiple barcodes. | | **ReadBarcodes_ReadRateFirst** | Maximizes the number of barcodes read. | @@ -524,10 +516,10 @@ const EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType; resultReceiver.onCapturedResultReceived = (result) => { let barcodes = result.items.filter(item => item.type === EnumCRIT.CRIT_BARCODE); if (barcodes.length > 0) { + // Use a filter to get the image on which barcodes are found. let image = result.items.filter( item => item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE )[0].imageData; - // The image that we found the barcode(s) on. } }; ``` @@ -547,6 +539,32 @@ await cvRouter.startCapturing("ReadSingleBarcode"); ##### Specify a scan region +We can specify a scan region to allow the SDK to process only part of the image, improving processing speed. The code snippet below demonstrates how to do this using the `cameraEnhancer` image source. + +```javascript +cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView); +// In this example, we set the scan region to cover the central 25% of the image. +cameraEnhancer.setScanRegion({ + x: 25, + y: 25, + width: 50, + height: 50, + isMeasuredInPercentage: true, +}); +``` + +*Note*: + +1. By configuring the region at the image source, images are cropped before processing, removing the need to adjust any further processing settings. +2. `cameraEnhancer` enhances interactivity by overlaying a mask on the video, clearly marking the scanning region. + +*See Also*: + +[CameraEnhancer::setScanRegion](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion) + + -While the code above accomplishes the task, a more effective approach is to restrict the scan region directly at the image source, as demonstrated in the following code snippet. - -> * With the region configured at the image source, the images are cropped right before they are gathered for processing, eliminating the necessity to modify the processing settings further. -> * `cameraEnhancer` elevates interactivity by overlaying a mask on the video, providing a clear delineation of the scanning region. -> * See also: [CameraEnhancer::setScanRegion](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion) - -```javascript -cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view); -cameraEnhancer.setScanRegion({ - x: 25, - y: 25, - width: 50, - height: 50, - isMeasuredInPercentage: true, -}); -```