Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
dynamsoft-javascript-barcode
Advanced tools
dynamsoft-javascript-barcode - npm Package Compare versions
Comparing version 9.6.1 to 9.6.2-beta-202301140102
@@ -31,3 +31,3 @@ /// <reference types="node" /> | ||
| * ```html | ||
| * <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.1/dist/dbr.js" data-license="PRODUCT-KEYS"></script> | ||
| * <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/dbr.js" data-license="PRODUCT-KEYS"></script> | ||
| * ``` | ||
@@ -87,3 +87,3 @@ */ | ||
| * ```js | ||
| * Dynamsoft.DBR.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.1/dist/"; | ||
| * Dynamsoft.DBR.BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/"; | ||
| * await Dynamsoft.DBR.BarcodeReader.loadWasm(); | ||
@@ -235,3 +235,3 @@ * ``` | ||
| * ```js | ||
| * Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.1/dist/dbr.ui.html"; | ||
| * Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/dbr.ui.html"; | ||
| * let pScanner = null; | ||
@@ -368,2 +368,4 @@ * (async()=>{ | ||
| protected autoFocus: boolean; | ||
| protected _clearResultsCanvasTimeoutId: any; | ||
| _resultHighlightingDuration: number; | ||
| private _dce; | ||
@@ -544,2 +546,3 @@ protected set dce(value: CameraEnhancer); | ||
| resetRuntimeSettings(): Promise<void>; | ||
| _resetRuntimeSettingsToCppDefault(): Promise<void>; | ||
| /** | ||
@@ -546,0 +549,0 @@ * Output runtime settings to a string. |
@@ -214,2 +214,3 @@ import { TextResult } from '../interface/textresult'; | ||
| updateRuntimeSettings(settings: RuntimeSettings | string): Promise<void>; | ||
| _resetRuntimeSettingsToCppDefault(): Promise<void>; | ||
| /** @ignore */ | ||
@@ -587,3 +588,3 @@ _onCameraSelChange: () => void; | ||
| * ```js | ||
| * await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.1/dist/dbr.ui.html"); | ||
| * await scanner.setUIElement("https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/dbr.ui.html"); | ||
| * scanner.onUniqueRead = (txt, result) => { alert(txt); console.log(result); }; | ||
@@ -590,0 +591,0 @@ * await scanner.show(); |
| { | ||
| "name": "dynamsoft-javascript-barcode", | ||
| "version": "9.6.1", | ||
| "version": "9.6.2-beta-202301140102", | ||
| "description": "Dynamsoft Barcode Reader JS is a recognition SDK which enables you to embed barcode reading functionality in your web, desktop, and mobile applications. With a few lines of JavaScript code, you can develop a robust application to scan a linear barcode, QR Code, DaraMatrix, PDF417, and Aztec Code.", | ||
@@ -69,3 +69,3 @@ "private": false, | ||
| "@scannerproxy/curscript-path": "^1.0.3", | ||
| "@scannerproxy/dlsjs": "^2.0.2", | ||
| "@scannerproxy/dlsjs": "^2.0.5", | ||
| "@types/node": "16.11.2", | ||
@@ -72,0 +72,0 @@ "@types/node-fetch": "2.6.1", |
177
README.md
@@ -32,2 +32,6 @@ # Barcode Reader for Your Website - User Guide | ||
| - [Customize the UI (optional)](#customize-the-ui-optional) | ||
| - [Modify the file `dist/dbr.ui.html` directly](#modify-the-file-distdbruihtml-directly) | ||
| - [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](#copy-the-file-distdbruihtml-to-your-application-modify-it-and-use-the-the-api-defaultuielementurl-to-set-it-as-the-default-ui) | ||
| - [Append the default UI element to your page, customize it before showing it](#append-the-default-ui-element-to-your-page-customize-it-before-showing-it) | ||
| - [Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`](#build-the-ui-element-from-scratch-and-connect-it-to-the-sdk-with-the-api-setuielementhtmlelement) | ||
| - [API Documentation](#api-documentation) | ||
@@ -41,14 +45,14 @@ - [System Requirements](#system-requirements) | ||
| - Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.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.6.1&utm_source=npm) | ||
| - Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.1&utm_source=npm) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.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.6.1&utm_source=npm) | ||
| - React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.1&utm_source=npm) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.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.6.1&utm_source=npm) | ||
| - Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.1&utm_source=npm) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.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.6.1&utm_source=npm) | ||
| - PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.1&utm_source=npm) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.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.6.1&utm_source=npm) | ||
| - Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.1&utm_source=npm&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.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.6.1&utm_source=npm) | ||
| - Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=npm) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.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.6.1&utm_source=npm) | ||
| - Hello World - [Guide](#hello-world---simplest-implementation) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/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.2&utm_source=npm) | ||
| - Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.2&utm_source=npm) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/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.2&utm_source=npm) | ||
| - React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.2&utm_source=npm) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/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.2&utm_source=npm) | ||
| - Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.2&utm_source=npm) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/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.2&utm_source=npm) | ||
| - PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.2&utm_source=npm) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/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.2&utm_source=npm) | ||
| - Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.2&utm_source=npm&&lang=js) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/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.2&utm_source=npm) | ||
| - Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-barcodes-as-input.html?lang=js&&utm_source=npm) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/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.2&utm_source=npm) | ||
| You can also: | ||
| - Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.1&utm_source=npm) \| [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.1&utm_source=npm) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.1/) | ||
| - Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.2&utm_source=npm) \| [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.2&utm_source=npm) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.2/) | ||
@@ -73,5 +77,5 @@ ## Hello World - Simplest Implementation | ||
| <body> | ||
| <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.1/dist/dbr.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.2/dist/dbr.js"></script> | ||
| <script> | ||
| // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.1&utm_source=npm&product=dbr&package=js to get your own trial license good for 30 days. | ||
| // Specifies a license, you can visit https://www.dynamsoft.com/customer/license/trialLicense?ver=9.6.2&utm_source=npm&product=dbr&package=js to get your own trial license good for 30 days. | ||
| Dynamsoft.DBR.BarcodeScanner.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; | ||
@@ -96,3 +100,3 @@ // Initializes and uses the SDK | ||
| <p align="center" style="text-align:center; white-space: normal; "> | ||
| <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.1/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;"> | ||
| <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.2/1.hello-world/1.hello-world.html" title="Code in Github" style="text-decoration:none;"> | ||
| <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;"> | ||
@@ -105,3 +109,3 @@ </a> | ||
| | ||
| <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.1&utm_source=npm" title="Run in Dynamsoft" style="text-decoration:none;"> | ||
| <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.2&utm_source=npm" title="Run in Dynamsoft" style="text-decoration:none;"> | ||
| <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;"> | ||
@@ -117,3 +121,3 @@ </a> | ||
| > In some rare cases, you might not be able to access the CDN. If this happens, you can use [https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.1/dist/dbr.js](https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.1/dist/dbr.js) for the test. However, please remember this link is temporary and DO NOT use it in your production application. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself). | ||
| > In some rare cases, you might not be able to access the CDN. If this happens, you can use [https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.0/dist/dbr.js](https://download2.dynamsoft.com/dbr/dynamsoft-barcode-reader-js/dynamsoft-barcode-reader-js-9.6.0/dist/dbr.js) for the test. However, please DO NOT use it in your production application because it is temporary. Instead, you can try [hosting the SDK yourself](#host-the-sdk-yourself). | ||
@@ -132,3 +136,3 @@ - `license`: This property specifies a license key. Note that the license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this example is an online license and requires network connection to work. Read more on [Specify the license](#specify-the-license). | ||
| You can run the example deployed to <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.1&utm_source=npm" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it. | ||
| You can run the example deployed to <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.6.2&utm_source=npm" title="Run in Dynamsoft">the Dynamsoft Demo Server</a> or test it with <a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/" title="Run in JSFiddle">JSFiddle code editor</a>. You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it. | ||
@@ -150,3 +154,3 @@ When a barcode is decoded, you will see the result text pop up and the barcode location will be highlighted in the video feed. | ||
| If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=9.6.1&utm_source=npm). | ||
| If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=9.6.2&utm_source=npm). | ||
@@ -166,3 +170,3 @@ <iframe width="400" height="225" src="https://www.youtube.com/embed/j4gFtCHcCG4" title="How to Use Dynamsoft Barcode Reader JavaScript SDK | Dynamsoft Tutorial" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.1/dist/dbr.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.2/dist/dbr.js"></script> | ||
| ``` | ||
@@ -173,3 +177,3 @@ | ||
| ```html | ||
| <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.6.1/dist/dbr.js"></script> | ||
| <script src="https://unpkg.com/dynamsoft-javascript-barcode@9.6.2/dist/dbr.js"></script> | ||
| ``` | ||
@@ -185,3 +189,3 @@ | ||
| <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.6.1&utm_source=npm" title="Download the JavaScript Package">Download the JavaScript Package</a> | ||
| <a target="_blank" href="https://www.dynamsoft.com/barcode-reader/downloads/?ver=9.6.2&utm_source=npm" title="Download the JavaScript Package">Download the JavaScript Package</a> | ||
@@ -203,3 +207,3 @@ - yarn | ||
| ```html | ||
| <script src="/dynamsoft-barcode-reader-js-9.6.1/dist/dbr.js"></script> | ||
| <script src="/dynamsoft-barcode-reader-js-9.6.2/dist/dbr.js"></script> | ||
| ``` | ||
@@ -221,10 +225,15 @@ | ||
| 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. | ||
| * Some older web application servers do not set `.wasm` mimetype as `application/wasm`. Upgrade your web application servers, or define the mimetype yourselves: | ||
| * [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings) | ||
| * [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap) | ||
| * [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types) | ||
| ```cmd | ||
| Cache-Control: max-age=31536000 | ||
| ``` | ||
| * 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 for these engine files, to maximize the performance of your web application. | ||
| Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control). | ||
| ```cmd | ||
| Cache-Control: max-age=31536000 | ||
| ``` | ||
| Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control). | ||
| ### Configure the SDK | ||
@@ -242,3 +251,3 @@ | ||
| 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.1&utm_source=npm&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.2&utm_source=npm&product=dbr&package=js). | ||
@@ -255,3 +264,3 @@ > 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. | ||
| //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.6.1/dist/"; | ||
| Dynamsoft.DBR.BarcodeScanner.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.2/dist/"; | ||
| ``` | ||
@@ -351,5 +360,5 @@ | ||
| See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.1&utm_source=npm). | ||
| See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.2&utm_source=npm). | ||
| > Find the full list of the runtime settings <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/global-interfaces.html?ver=9.6.1&utm_source=npm&&ver=latest#runtimesettings" target="_blank" title="here">here</a>. | ||
| > Find the full list of the runtime settings <a href="https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/global-interfaces.html?ver=9.6.2&utm_source=npm&&ver=latest#runtimesettings" target="_blank" title="here">here</a>. | ||
@@ -360,7 +369,7 @@ ### Customize the UI (optional) | ||
| - Modify the file `dist/dbr.ui.html` directly. | ||
| #### Modify the file `dist/dbr.ui.html` directly | ||
| This option is only possible when you host this file on your own web server instead of using a CDN. | ||
| This option is only possible when you [Host the SDK yourself](#host-the-sdk-yourself) instead of using a public CDN. | ||
| - 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. | ||
| #### 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 | ||
@@ -372,3 +381,3 @@ ```javascript | ||
| - Append the default UI element to your page, customize it before showing it. | ||
| #### Append the default UI element to your page, customize it before showing it | ||
@@ -384,34 +393,34 @@ ```html | ||
| - Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`. | ||
| #### Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)` | ||
| - Embed the video | ||
| 1. **Embed the video** | ||
| ```html | ||
| <div id="div-ui-container" style="width:100%;height:100%;"> | ||
| <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div> | ||
| </div> | ||
| <script> | ||
| (async () => { | ||
| let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); | ||
| await scanner.setUIElement(document.getElementById('div-ui-container')); | ||
| scanner.onFrameRead = results => { | ||
| console.log(results); | ||
| }; | ||
| scanner.onUniqueRead = (txt, result) => { | ||
| alert(txt); | ||
| }; | ||
| await scanner.show(); | ||
| })(); | ||
| </script> | ||
| ``` | ||
| ```html | ||
| <div id="div-ui-container" style="width:100%;height:100%;"> | ||
| <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div> | ||
| </div> | ||
| <script> | ||
| (async () => { | ||
| let scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance(); | ||
| await scanner.setUIElement(document.getElementById('div-ui-container')); | ||
| scanner.onFrameRead = results => { | ||
| console.log(results); | ||
| }; | ||
| scanner.onUniqueRead = (txt, result) => { | ||
| alert(txt); | ||
| }; | ||
| await scanner.show(); | ||
| })(); | ||
| </script> | ||
| ``` | ||
| > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` . | ||
| > The video element will be created and appended to the DIV element with the class `dce-video-container` , make sure the class name is the same. Besides, the CSS property `position` of the DIV element must be either `relative` , `absolute` , `fixed` , or `sticky` . | ||
| [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/) | ||
| [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/) | ||
| 2. **[Optional] Add the camera list and resolution list** | ||
| - [Optional] Add the camera list and resolution list | ||
| If the class names of the created select elements match the default class names, i.e. `dce-sel-camera` and `dce-sel-resolution` respectively, 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 | ||
| ```html | ||
| <div id="div-ui-container" style="width:100%;height:100%;"> | ||
@@ -421,32 +430,32 @@ <select class="dce-sel-camera"></select><br> | ||
| </div> | ||
| ``` | ||
| ``` | ||
| [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/) | ||
| [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/) | ||
| ```html | ||
| <div id="div-ui-container"> | ||
| <select class="dce-sel-camera"></select> | ||
| <select class="dce-sel-resolution"></select> | ||
| <br> | ||
| <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div> | ||
| </div> | ||
| ``` | ||
| ```html | ||
| <div id="div-ui-container"> | ||
| <select class="dce-sel-camera"></select> | ||
| <select class="dce-sel-resolution"></select> | ||
| <br> | ||
| <div class="dce-video-container" style="position:relative;width:100%;height:500px;"></div> | ||
| </div> | ||
| ``` | ||
| [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/) | ||
| [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/) | ||
| > 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. | ||
| > 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 | ||
| <select class="dce-sel-resolution"> | ||
| <option class="dce-opt-gotResolution" value="got"></option> | ||
| <option data-width="1280" data-height="720">1280x720</option> | ||
| <option data-width="1920" data-height="1080">1920x1080</option> | ||
| </select> | ||
| ``` | ||
| ```html | ||
| <select class="dce-sel-resolution"> | ||
| <option class="dce-opt-gotResolution" value="got"></option> | ||
| <option data-width="1280" data-height="720">1280x720</option> | ||
| <option data-width="1920" data-height="1080">1920x1080</option> | ||
| </select> | ||
| ``` | ||
| [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/) | ||
| [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/) | ||
| > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the cloest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will automatically use it to show the **actual resolution**. | ||
| > Generally, you need to provide a resolution that the camera supports. However, in case a camera does not support the specified resolution, it usually uses the cloest supported resolution. As a result, the selected resolution may not be the actual resolution. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the SDK will automatically use it to show the **actual resolution**. | ||
| See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/ui-customization.html?ver=9.6.1&utm_source=npm). | ||
| See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more. | ||
@@ -456,3 +465,3 @@ ## API Documentation | ||
| You can check out the detailed documentation about the APIs of the SDK at | ||
| [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.1](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.1). | ||
| [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.2](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.2). | ||
@@ -478,3 +487,3 @@ ## System Requirements | ||
| This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/BarcodeScanner.html?ver=9.6.1&utm_source=npm#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera. | ||
| This API is only required for in-browser video streaming. If a browser does not support this API, the [Single Frame Mode](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/BarcodeScanner.html?ver=9.6.2&utm_source=npm#singleframemode) will be used automatically. If the API exists but doesn't work correctly, the Single Frame Mode can be used as an alternative way to access the camera. | ||
@@ -504,3 +513,3 @@ - `getSettings` | ||
| If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/?ver=9.6.1&utm_source=npm). | ||
| If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/?ver=9.6.2&utm_source=npm). | ||
@@ -507,0 +516,0 @@ ## Release Notes |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 4 instances in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
AI-detected potential code anomaly
Supply chain riskAI has identified unusual behaviors that may pose a security risk.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 4 instances in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.08%
19046690
- Lines of code
- increased by0.14%
33755
- Number of lines in readme file
- increased by1.82%
504
Worsened metrics
- Number of low quality alerts
- increased byInfinity%
1
- Number of low supply chain risk alerts
- increased by25%
5
- Number of medium supply chain risk alerts
- increased by1.72%
59
No dependency changes