diff --git a/.gitignore b/.gitignore index bed50ce..1eb387f 100644 --- a/.gitignore +++ b/.gitignore @@ -21,6 +21,7 @@ yarn-error.log* *.sln *.sw? *.map +.npmrc __pycache__ ~~* diff --git a/Api Reference.url b/Api Reference.url index e74c0e5..b43eaf1 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=9.3.1 \ No newline at end of file +URL=https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.6.0 \ No newline at end of file diff --git a/README.md b/README.md index e3608fd..aaa848b 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. @@ -22,7 +20,7 @@ In this guide, you will learn step by step on how to integrate the DBR-JS SDK in - [Run the example](#run-the-example) - [Building your own page](#building-your-own-page) - [Include the SDK](#include-the-sdk) - - [Use a CDN](#use-a-cdn) + - [Use a public CDN](#use-a-public-cdn) - [Host the SDK yourself](#host-the-sdk-yourself) - [Configure the SDK](#configure-the-sdk) - [Specify the license](#specify-the-license) @@ -39,18 +37,18 @@ In this guide, you will learn step by step on how to integrate the DBR-JS SDK in **Popular Examples** -- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.3.1&utm_source=github) -- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.3.1&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.3.1&utm_source=github) -- React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.3.1&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.3.1&utm_source=github) -- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.3.1&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.3.1&utm_source=github) -- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.3.1&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.3.1&utm_source=github) -- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.3.1&utm_source=github&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.3.1&utm_source=github) -- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.1/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.3.1&utm_source=github) +- Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.0/1.hello-world/1.hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.0&utm_source=github) +- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.0&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.0/1.hello-world/3.read-video-angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/3.read-video-angular/dist/hello-world/?ver=9.6.0&utm_source=github) +- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.0&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.0/1.hello-world/4.read-video-react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/?ver=9.6.0&utm_source=github) +- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.0&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.0/1.hello-world/6.read-video-vue3) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/?ver=9.6.0&utm_source=github) +- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.0&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.0/1.hello-world/10.read-video-pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html?ver=9.6.0&utm_source=github) +- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.0&utm_source=github&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.0/4.use-case/2.read-a-drivers-license.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html?ver=9.6.0&utm_source=github) +- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.0/4.use-case/1.fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html?ver=9.6.0&utm_source=github) You can also: -- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.3.1&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=9.3.1&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.3.1/) +- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.0&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=9.6.0&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.0/) ## Hello World - Simplest Implementation @@ -70,9 +68,9 @@ The complete code of the "Hello World" example is shown below - + + ``` - UNPKG ```html - + ``` #### Host the SDK yourself -Besides using the CDN, you can also download the SDK and host its files on your own website / server before including it in your application. +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: - From the website - Download the JavaScript Package + Download the JavaScript Package - yarn @@ -187,7 +189,7 @@ Options to download the SDK: Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this: ```html - + ``` or @@ -202,6 +204,16 @@ or import { BarcodeScanner } from 'dynamsoft-javascript-barcode'; ``` +**NOTE** + +To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time to maximize the performance of your web application. + +```cmd +Cache-Control: max-age=31536000 +``` + +Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control). + ### Configure the SDK Before using the SDK, you need to configure a few things. @@ -214,9 +226,9 @@ The SDK requires a license to work, use the API `license` to specify a license k Dynamsoft.DBR.BarcodeScanner.license = "YOUR-LICENSE-KEY"; ``` -To test the SDK, you can request a 30-day trial license via the [customer portal](https://www.dynamsoft.com/customer/license/trialLicense?ver=9.3.1&utm_source=github&product=dbr&package=js). +To test the SDK, you can request a 30-day trial license via the [customer portal](https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.0&utm_source=github&product=dbr&package=js). -> If you registered a Dynamsoft account and downloaded the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you and put the license key into all the samples that come with the SDK. +> If you register a Dynamsoft account and download the SDK from the official website, Dynamsoft will automatically generate a 30-day trial license for you, and put the license key into all the samples attached to the SDK. #### Specify the location of the "engine" files @@ -226,7 +238,7 @@ 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 -Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.3.1/dist/"; +Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.0/dist/"; ``` ### Interact with the SDK @@ -321,9 +333,9 @@ As you can see from the above code snippets, there are three types of configurat Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/). - See also [settings samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/parameter-settings.html?ver=9.3.1&utm_source=github). + See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.0&utm_source=github). -> Find the full list of the runtime settings here. +> Find the full list of the runtime settings here. ### Customize the UI (optional) @@ -336,7 +348,7 @@ The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr. - Copy the file `dist/dbr.ui.html` to your application, modify it and use the the API `defaultUIElementURL` to set it as the default UI. ```javascript - // This line only takes effect when it is put before the method `createInstance()` is called. + // This line only takes effect before the method `createInstance()` is called. Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "THE-URL-TO-THE-FILE"; ``` @@ -378,9 +390,9 @@ The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr. [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/) - - Add the camera list and resolution list + - [Optional] Add the camera list and resolution list - If the class names for these lists match the default ones, `dce-sel-camera` and `dce-sel-resolution` , the SDK will automatically populate the lists and handle the camera/resolution switching. + If the class names of these lists match the default class names, i.e. `dce-sel-camera` and `dce-sel-resolution` , the SDK will automatically populate the lists and handle the camera/resolution switching. ```html
@@ -402,7 +414,7 @@ The built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr. [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/) - > By default, only 3 hard-coded resolutions (3840 x 2160, 1920 x 1080, 1280 x 720), are populated as options. You can show a customized set of options by hardcoding them. + > By default, only 3 hard-coded resolutions (1920 x 1080, 1280 x 720,640 x 480) are populated as options. You can show a customized set of options by hardcoding them. ```html