![](\"https://raw.githubusercontent.com/dynamsoft-dbr/javascript-barcode/dac614f8033661901d85381dfaff8d612115862a/img/dbr-wasm-demo-scaning.jpg\")
\r\n\r\n\r\n\r\n## Getting Started: HelloWorld\r\n\r\nThis section will help you use the library to build a simple web application to decode barcodes from a video stream. \r\n\r\n**Basic Requirements**:\r\n\r\n* Internet connection\r\n\r\n* Camera Access\r\n\r\n### Step One: Write the code in minutes!\r\n\r\nCreate an HTML file with the following content. Deploy it to your web server if you have it already. \r\n\r\n* The sample is missing one piece of information to actually work which is the field `PRODUCT-KEYS`, you can acquire a trial key [here](https://www.dynamsoft.com/CustomerPortal/Portal/TrialLicense.aspx) and replace the field with your key.\r\n* If you don't have a ready-to-use web server and you happen to have a package manager like `npm` or `yarn`, you can set up a simple http server in minutes. Check out http-server on [npm](https://www.npmjs.com/package/http-server) or [yarn](https://yarnpkg.com/en/package/http-server).\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n\r\n```\r\n[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/pL4e7yrd/)\r\n\r\n### Step Two: Tackle a few issues\r\n\r\nOpen the file in your browser (must be one that is supported) and there will be a pop-up asking for permission to access the camera. Once the access is granted, you will see the video stream in the default UI of the **BarcodeScanner**. \r\n\r\n##### **General Issue one**\r\n\r\nIf you open the HTML file as `file:///` or `http://`, the following error may appear in the browser console\r\n\r\n> [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.\r\n\r\nIn Safari 12 the error is\r\n\r\n> Trying to call getUserMedia from an insecure document.\r\n\r\nAs the error states, to access the camera with the API [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), a secure channel (`https://`) is required.\r\n\r\n> If you use Chrome or Firefox, you might not get the error because these two browsers allow camera access via `file:///` and `http://localhost`.\r\n\r\nTo make sure your web application can access the camera, try to configure your web server to support HTTPS. The following links may help.\r\n\r\n- NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)\r\n- IIS: [Create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)\r\n- Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)\r\n- Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)\r\n\r\n##### **General Issue Two**\r\n\r\nFor testing purposes, a self-signed certificate can be used when configuring HTTPS. When accessing the site, the browser might say \"`the site is not secure`\". In this case, go to the certificate settings and trust this certificate. \r\n\r\n> In a production environment, you will need a valid HTTPS certificate that does not have this issue. If you don't have one yet, you can get a free one from [Let’s Encrypt](https://letsencrypt.org/). Of course, you are advised to apply for a paid certificate from companies such as Verisign, GeoTrust, etc.\r\n\r\n### Step Three: Time to scan!\r\n\r\nPut something with a barcode in front of the camera and you'll see it located and decoded right in the UI.\r\n\r\n### Step Four: Dive into the code\r\n\r\nNow, take a look at the sample code. You can find that there is nothing but two scripts inside the ``\r\n\r\n* The following script includes the core library in the application via a [jsDelivr](https://www.jsdelivr.com/) CDN\r\n \r\n ```javascript\r\n \r\n ```\r\n \r\n The same can be done with other CDNs like unpkg as well\r\n \r\n ```javascript\r\n \r\n ```\r\n\r\n The api may change slightly between versions. Please use a specific version in your production environment to ensure stability.\r\n\r\n* The following script initializes and uses the library:\r\n \r\n ```javascript\r\n \r\n ```\r\n For now, pay attention to the following two events.\r\n\r\n * `onFrameRead`\r\n This event is triggered after a single frame is scanned. The `results` object contains all the barcode results that the library found on this frame.\r\n * `onUnduplicatedRead`\r\n This event is triggered when a new barcode (not a duplicate) is found. `txt` holds the barcode text value while `result` is an object that holds details of the found barcode.\r\n\r\nIn the following sections, you'll find more detailed information on how the library works and how you can customize it to your needs.\r\n\r\n## Getting Started: Take a closer look\r\n\r\n### Initializing\r\n\r\nThe library is based on the WebAssembly standard, therefore, **on first use**, it needs some time to download and compile the WebAssembly files. After the first use, the program can cache the file so that the next time you can start from compiling. \r\n\r\n`Dynamsoft.BarcodeReader.loadWasm` is the API used to start the initialization. \r\n\r\nUse the following code to listen to the initialization process:\r\n\r\n```javascript\r\nDynamsoft.BarcodeReader.loadWasm()\r\n .then(()=>{ /* success */ }, ex=>{console.error(ex.message||ex);})\r\n```\r\n\r\nHowever, other APIs like `Dynamsoft.BarcodeReader.createInstance`, `Dynamsoft.BarcodeScanner.createInstance` will call `loadWasm` internally. So you can listen to the initialization process during `createInstance`:\r\n\r\n```javascript\r\nDynamsoft.BarcodeReader.createInstance()\r\n .then(reader=>{ /* success */ }, ex=>{console.error(ex.message||ex);})\r\n```\r\n\r\n> Including the library with a script tag doesn't automatically initializes the library. When you want to load wasm in advance, and create a reader or scanner instance later, it is a good choice can call `loadWasm`.\r\n\r\nThe detailed initialization includes the following steps:\r\n\r\n#### 1. Download\r\n\r\nDownload the necessary resources. Usually we deploy the resources on cdn and set a long cache duration. The speed of cdn will greatly affect the feeling of the first experience. The resources can be obtained from the cache on the next visit.\r\n\r\n#### 2. Compile\r\n\r\nThe WebAssembly files are automatically compiled once downloaded. The compilation time varies among different devices & browsers. While it takes less than a second on latest phones or PCs, it may take seconds on some older devices. \r\n\r\n#### 3. Initialize\r\n\r\nThe library needs to initialize every time the page loads.\r\n\r\n\r\n### Configuring Scanner Settings\r\n\r\nWhen creating an instance of the `BarcodeScanner` object, there are a number of configuration options. The following code shows some of the most useful ones:\r\n\r\n```js\r\nlet barcodeScanner = null;\r\nDynamsoft.BarcodeScanner.createInstance({\r\n // The following two callbacks are explained in previous context\r\n onFrameRead: results => {console.log(results);},\r\n onUnduplicatedRead: (txt, result) => {alert(txt);}\r\n}).then(async scanner => {\r\n barcodeScanner = scanner;\r\n // updateVideoSettings sets which camera and what resolution to use\r\n await barcodeScanner.updateVideoSettings({ video: { width: 1280, height: 720, facingMode: \"environment\" } });\r\n\r\n let runtimeSettings = await barcodeScanner.getRuntimeSettings();\r\n // Specify which symbologies are to enabled\r\n runtimeSettings.barcodeFormatIds = Dynamsoft.EnumBarcodeFormat.BF_ONED | Dynamsoft.EnumBarcodeFormat.BF_QR_CODE;\r\n // By default, the library assumes accurate focus and good lighting. The settings below are for more complex environments. Check out according API descriptions for more info.\r\n runtimeSettings.localizationModes = [\r\n Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,\r\n Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,\r\n Dynamsoft.EnumLocalizationMode.LM_STATISTICS,\r\n Dynamsoft.EnumLocalizationMode.LM_LINES,\r\n 0,0,0,0\r\n ];\r\n // Discard results which have a low confidence score.\r\n runtimeSettings.minResultConfidence = 30;\r\n await barcodeScanner.updateRuntimeSettings(runtimeSettings);\r\n\r\n let scanSettings = await barcodeScanner.getScanSettings();\r\n // Disregard duplicated results found in a specified time period\r\n scanSettings.duplicateForgetTime = 20000;\r\n // Set a interval so that the CPU can relax\r\n scanSettings.intervalTime = 300;\r\n await barcodeScanner.updateScanSettings(scanSettings);\r\n barcodeScanner.show();\r\n})\r\n```\r\n\r\n[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)\r\n\r\nAs you can see in the code, there are basically three categories of configurations.\r\n\r\n* `get/updateVideoSettings`: Configures the data source, I.E., the video stream. These settings include which camera to use , the resolution, etc.. Check out more information [here](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Syntax).\r\n* `get/updateRuntimeSettings`: Configures the decode engine. Find a full list of these settings and their corresponding descriptions [here](https://www.dynamsoft.com/help/Barcode-Reader/struct_dynamsoft_1_1_barcode_1_1_public_runtime_settings.html). Below lists the recommended settings for specific usage.\r\n[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/)\r\n \r\n **fast**\r\n \r\n ```javascript\r\n let settings = await barcodeScanner.getRuntimeSettings();\r\n settings.localizationModes = [Dynamsoft.EnumLocalizationMode.LM_STATISTICS, 0, 0, 0, 0, 0, 0, 0];\r\n settings.deblurLevel = 0;\r\n await barcodeScanner.updateRuntimeSettings(settings);\r\n ```\r\n **1D**\r\n ```javascript\r\n let settings = await barcodeScanner.getRuntimeSettings();\r\n settings.localizationModes = [\r\n Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,\r\n Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,\r\n Dynamsoft.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0];\r\n settings.deblurLevel = 0;\r\n await barcodeScanner.updateRuntimeSettings(settings);\r\n ```\r\n **2D**\r\n \r\n ```javascript\r\n let settings = await barcodeScanner.getRuntimeSettings();\r\n settings.localizationModes = [\r\n Dynamsoft.EnumLocalizationMode.LM_CONNECTED_BLOCKS,\r\n Dynamsoft.EnumLocalizationMode.LM_SCAN_DIRECTLY,\r\n Dynamsoft.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0];\r\n settings.deblurLevel = 2;\r\n await barcodeScanner.updateRuntimeSettings(settings);\r\n ```\r\n* `get/updateScanSettings`: Some settings about video scanning, include `duplicateForgetTime`, `intervalTime` and `filter`.\r\n\r\n### Customizing the UI\r\n\r\nWhile the library provides a built-in `BarcodeScanner` which has its own UI, you are free to use your own UI. Check out the following code on how it's done.\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n \r\n ![\"Code](\"https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg\"){kind=icon}
\r\n \r\n \r\n \r\n ![\"Run](\"https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg\"){kind=icon}
\r\n \r\n \r\n \r\n ![\"Run](\"https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg\")
\r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n * Add the camera list and resolution list\r\n\r\n If the class names for these lists match the default ones, `dce-sel-camera` and `dce-sel-resolution` , the library will automatically populate the lists and handle the camera/resolution switching.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > By default, 8 hard-coded resolutions are populated as options. You can show only a custom set of options by hardcoding them.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 nearest supported resolution. As a result, the selected resolution may not be the actual resolution used. In this case, add an option with the class name `dce-opt-gotResolution` (as shown above) and the library will then use it to show the actual resolution.\r\n\r\nSee also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.0.2&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the library at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.0.2](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.0.2).\r\n\r\n## System Requirements\r\n\r\nThis library requires the following features which are supported by all modern mainstream browsers:\r\n\r\n* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the library to work.\r\n\r\n* `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.0.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.\r\n\r\n* `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v61+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the library files on the same domain as your web page.\r\n \r\n 3 Safari 11.2.2 ~ 11.2.6 are not supported.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the library. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## Advanced Usage\r\n\r\nIn addition to the above basic settings, the library has many more settings and options that you can adjust to best suit your usage. To read more, please see [advanced usage](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/advanced-usage.html?ver=9.0.2&utm_source=npm).\r\n\r\n## How to Upgrade\r\n\r\nIf you want to upgrade the library from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/programming/javascript/upgrade-guide/?ver=9.0.2&utm_source=npm).\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.11","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","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.2.10-beta07270208_1658913098100_0.7787777005416834","host":"s3://npm-registry-packages"}},"9.2.10-beta07271933":{"name":"dynamsoft-javascript-barcode","version":"9.2.10-beta07271933","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.2.10-beta07271933","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"dc7304c7046cbf41918934595311dbb66958b626","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.2.10-beta07271933.tgz","fileCount":65,"integrity":"sha512-GMe9unJA2WeMqh+cnSrDIMnhktaciuZDXfR22EWkplx1WjgNDOT2VEH5Nk0cW5UzKgVUndpuCxFStDWWi1yPzA==","signatures":[{"sig":"MEUCIBvqJT/8tsRr6MCrwitomm/MmogpO4kHBspFpgSyUuoDAiEA3MDjomkwTHrNjALY2DzmGvpoHixDt02sJKC6ZOYIb1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9368946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4fY4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6dg//UXBzMDi+LT5085RDDcohNotwK2QwY8zDfQh17Mi8lHNNwgxS\r\nzuQCeVQx3+ZFeghsoUHzWXjVzd1dzQf9hYxy8H/heCOOygmpV3gmT3lqZaJI\r\nAlNkr4jY4J+r7LypduWJyl40zqsToUqcmijy/t9APSVfxC8ONjley/WIARJJ\r\niT/KyCCn2X/56MPoUc+C1p5cPFqMcIHCj4NrohGO+FoIWK2wLevYYnXazeol\r\nkjCXWUgBJKZScdlH1Q4I0vsl754++qmHvXauk6LC0YR7qAetrmZXsxD7kP9x\r\n8FWF8W1lJtMubK5wALb1QJ9HM9DXP6PiNSQgt5ZJon1Np8MmImPiBYZeF3dS\r\nr3z9TDqV/N6PCNsNriaVd8aeU42weN0fBeGYZoF/mQ29mZ4SL8lJ2o82UNUr\r\nc/SMIgGj3pwJtIalNX732IyuP1Wlyz9AsND2xCNdc2qgsywMxnBJ7z0yjE3K\r\n8QdPuwrgKYwM1ZfWnwNUKp48sy91zw/SJGJN/zDmKLdkrfyjSq9stoyy16lX\r\nzms1eTJAijI254n9E3NZS2tfxqd96AGRnBJtINkfAn5S43u9Wxet5ZnTGMAe\r\naXGJuu0vYwY7X+VfT01oHht3tGtPL8h52gDhCHTSjszrE0I7HoGB8mX48I1p\r\nwRTjpGahuOFelGzhnLTe8SW2qHHloeh4Swk=\r\n=Is1E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"\r\n\r\n# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n* [Building your own page](#building-your-own-page)\r\n * [Include the SDK](#include-the-sdk)\r\n * [Configure the SDK](#configure-the-sdk)\r\n * [Interact with the SDK](#interact-with-the-sdk)\r\n * [Customize the UI](#customize-the-ui-optional)\r\n* [API Documentation](#api-documentation)\r\n* [System Requirements](#system-requirements)\r\n* [How to Upgrade](#how-to-upgrade)\r\n* [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n* Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/1.hello-world/1.hello-world.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.2.10&utm_source=npm)\r\n* Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-the-pdf417-barcode-on-the-drivers-license?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-barcodes-and-fill-form-fields?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n\r\nYou can also:\r\n\r\n* Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n* Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.2.10/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n* Basic Requirements\r\n * Internet connection\r\n * [A supported browser](#system-requirements)\r\n * Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n * Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 then use it to show the **actual resolution**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.2.10&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.10](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.10).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n* Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n * Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n * Dynamsoft License requires a secure context to work.\r\n\r\n* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n* `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.2.10&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.\r\n\r\n* `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v61+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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/programming/javascript/upgrade-guide/?ver=9.2.10&utm_source=npm).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.11","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","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.2.10-beta07271933_1658975800092_0.9833756217073526","host":"s3://npm-registry-packages"}},"9.2.10-beta07272246":{"name":"dynamsoft-javascript-barcode","version":"9.2.10-beta07272246","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.2.10-beta07272246","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"f88b93c4a8f1973038a324eb50c7c79264bf3064","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.2.10-beta07272246.tgz","fileCount":65,"integrity":"sha512-nJuxPWhVRe9AmvkBj4WugLoWYtq5SdKMvCBdtgGeWXeaPBOIXb9iF80Ka9Bri50L+nc+mShHo6DDTe/T1x/b9w==","signatures":[{"sig":"MEQCIFFNVn2514QqxHkQza1uAsyKUd7iQA9Ok3UieUFVyGF4AiBpOxKIobdIhux5mFavclj4w5PS/M7TGmS4YCosR1S6CA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9369707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4iNwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNPQ//ZQ4Td4o6v3uaHdqsTyQD4uc2LBRtWIaCpzccGBBuHXwLTZbz\r\nedwR+98poVVBS4M+QF+U8LkVw2toxKwopKFY6E5QMkVnHHJsR0CaTQJuHYdw\r\n3uM5aX0FiHNLOJohULVlNurusGY1Gy9d0dffpqmOQBRDCCa6YVYRzdyVuDQq\r\nC8La0/lnHBQkhAcV9sxBlDugSUaC+Ym8ufA/4fxmZxhoLx9xfLRO0Z5OlFt3\r\ndj04a0qrJaWALfjH9mjot9ChFDXICfzT2A7QQHy/jXCco1navT+dNQFX1fv4\r\nP2Uh9NRTQl3JMXkXMXC87TjOunMRuRCwknnxImj+Xq/dlvpZC63jo7XprzY6\r\nwcGIoK75gfSX/qKf46Pv52qETqZj4F/kgzTHbDgt6SyvVkle2JMFutRtbm1s\r\nLMFnfL+ymsgW2b215tpBXNF5sr1tYGDgpf7mQGQPpubUOyuhJBbHYtE0O1B2\r\njv+GRMWrpjFBL1v1ka09+NswNtya3yjxqC06FPNEefsA6OuRjp9qtmdsn41o\r\nslnBCdyS1V9pnR3lrbu5HErVdA+azv0NfRL1JzXj1lHv09BiUUeMV4wFDM72\r\nu5U/Z8v4rR+Mj5dJg87vAeJ/JGNyJBXVeioxgLRxxvrIrNRP3su5iK0x+vVv\r\nEwKJN0biZZx+dl8wHVUPXBY/ZOrmsNoe/sY=\r\n=PtH2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"\r\n\r\n# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n* [Building your own page](#building-your-own-page)\r\n * [Include the SDK](#include-the-sdk)\r\n * [Configure the SDK](#configure-the-sdk)\r\n * [Interact with the SDK](#interact-with-the-sdk)\r\n * [Customize the UI](#customize-the-ui-optional)\r\n* [API Documentation](#api-documentation)\r\n* [System Requirements](#system-requirements)\r\n* [How to Upgrade](#how-to-upgrade)\r\n* [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n* Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/1.hello-world/1.hello-world.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.2.10&utm_source=npm)\r\n* Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-the-pdf417-barcode-on-the-drivers-license?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-barcodes-and-fill-form-fields?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n\r\nYou can also:\r\n\r\n* Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n* Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.2.10/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n* Basic Requirements\r\n * Internet connection\r\n * [A supported browser](#system-requirements)\r\n * Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n * Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 then use it to show the **actual resolution**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.2.10&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.10](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.10).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n* Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n * Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n * Dynamsoft License requires a secure context to work.\r\n\r\n* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n* `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.2.10&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.\r\n\r\n* `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v61+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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/programming/javascript/upgrade-guide/?ver=9.2.10&utm_source=npm).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.11","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","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.2.10-beta07272246_1658987376596_0.5293282790067104","host":"s3://npm-registry-packages"}},"9.2.10":{"name":"dynamsoft-javascript-barcode","version":"9.2.10","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.2.10","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"133002ed114aada0cf60eb3c6fe1545d1af87ea9","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.2.10.tgz","fileCount":65,"integrity":"sha512-JjhM5Upjiywk2piosfehNKNc4AXgeSuCDad14hXPmrMRFIsemVeUBkfEp0q4tTFQr7H1Gmik94yk5Ls78SatlA==","signatures":[{"sig":"MEUCIQC9Fh61EB0z5uf7j4Ef3v5d1HuCybDNy3A9VYHY4xhdxwIgOVD/rCfsCUUgDBql7/Wy6IjwAwZT19N3g1Rd7cLSHgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9369694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4ipsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6Qg/9HAY732H+B9wIRHbNV2wjkq+HUJui67XSjhdqRHK2GO4z12vH\r\n1YjzlSBsqcyeLqCg+v1HIoU0tl2XyPKDrEQKDGFjvJ3sw++BP4+qM32oH3x3\r\nQ6rD/OSteBsnBZpnzT69PgOviFrcJilcCInXo055W9Bap4vP5Qnb67lpTI5N\r\nUeYUy3eN94QLfJoQAzyig/OxpJbYLq/AacJvUehxEGJ5G9cuNPetRLZl1fTT\r\nI7FE6hvL8w1KKwMYtoinNCBgV7ClbeCk8gGdRTcazwaT3odbboebIRnZgDLM\r\ncWM7hn6yyvIMvXaOwiGhEZDYHK1aYPu3TrFz9R0SnXvLHPcNK4z+Jwaa5QpZ\r\n4uhAmW2rWEa/IA2xIKeYx8Bi7spHDGQgMPORDoF6wwjXbuMvFltyp1HPTa0l\r\nvwjvYPuHX4+/6FIcwhh+yBwydc2YaT4OBJiFVaFSC98MEAWpQBVU4Hf9UMov\r\nQjYGSP0QdsvMxSu1AUO6e+zPpJGVLD35jVKVbz490mrco98/qYI8+mPf6aJG\r\nd3Vp7cc9wLXnkzThGOJi2jF1p2GGhb/0ZvRVrUNfLiG3C8sJ1MYRATk1vSB4\r\nlRbFFznnfKrSguGtnjQFTlvoCuqfC5o1WDeHb+9L73gL86bLN3Jf30RmQphl\r\nula1j+WFpw/isJ2i7+nq5ONdQjI9bE7vDJk=\r\n=lKSK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.2.10_1658989164343_0.32744533944431686","host":"s3://npm-registry-packages"}},"9.2.10-beta07280004":{"name":"dynamsoft-javascript-barcode","version":"9.2.10-beta07280004","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.2.10-beta07280004","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"668197c68c29b55eda6cbeecb84e8f5b7d41c3f0","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.2.10-beta07280004.tgz","fileCount":65,"integrity":"sha512-H7WI3SwSVcLcXyPJtT71LR7aiKmzT5b2c2pBerw3OLqSPu72Jys5i2EL645HDH9w2Ehbe8zP796Qjq7qGfOjGw==","signatures":[{"sig":"MEUCIQDW0g0AUPmebZGzUUP49DnJOU1Fhr65WBe4aCmwor0UwQIgYHHIGavKyYVbDQN42glTH8XWxIfVW14BEEzPWbOltzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9369707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4jWaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfGw//Xovy+3VKdk4HXy7mSFExVus52rI398YWW+v3HwVLiIt3oaAC\r\nuEIkO+DaXypSoIYOzo4Afw2zR/17IWaLBvRFFd+MnaxeUvzbyZQ3dZ7EDVUi\r\nP7rF7UX8ljz7llOxst+cso42O1R+Q77QjkSIHVpPAqJxsbh0z0ubStUPo/xx\r\n37guDuKraJD8f2PZADe2jlocZ3RqMOlHTcQYbcTxB3PieSyhnAK/QfD5BONO\r\nl3ttiO8vbqmEFx+WOWJLYB/a3hD+O0SXvHn3SxpquH0d6kiITaQSsF99Gv2h\r\ntZy0E6UBvyRGzPYUDP9Boga/KREJYagU7Bsq+xHkausIi120tne0Ov8t2fzK\r\nkbvcRqvbzNfI+OUyeDjesKOtDap/pri+IXzhHwMV2qkrYJQqmNZhr1wH19aH\r\nNLKSTJk+U/z4+lyEYsP9s3f/ghTRvkDw/amtJB9wn+RV1gzUYgBHBkmkHSEc\r\n/DYW7I2Qqa5SoW6o6my3Z+LLJPcb46S4lAo2ZhOzzWZ5OUP/3Y1+f0WWT4YW\r\npMNPSrK2Ixam2XeN6jah+aPv1ZdGXpScdUhEijFC+8hrGv++lkTH4vrlM+e8\r\nq3rDaMoLhHmbGC6t68E8NBDx9GdFvfuUCr9oRktBuyPzusTCls29Zao/tMH4\r\nmaBnOJMFBrxXcG+8GWudF+eRghcq1P6idXo=\r\n=FVXI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"\r\n\r\n# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n* [Building your own page](#building-your-own-page)\r\n * [Include the SDK](#include-the-sdk)\r\n * [Configure the SDK](#configure-the-sdk)\r\n * [Interact with the SDK](#interact-with-the-sdk)\r\n * [Customize the UI](#customize-the-ui-optional)\r\n* [API Documentation](#api-documentation)\r\n* [System Requirements](#system-requirements)\r\n* [How to Upgrade](#how-to-upgrade)\r\n* [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n* Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/1.hello-world/1.hello-world.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.2.10&utm_source=npm)\r\n* Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-the-pdf417-barcode-on-the-drivers-license?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n* Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-barcodes-and-fill-form-fields?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.10/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.2.10&utm_source=npm)\r\n\r\nYou can also:\r\n\r\n* Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n* Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.2.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.2.10/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n* Basic Requirements\r\n * Internet connection\r\n * [A supported browser](#system-requirements)\r\n * Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n * Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 then use it to show the **actual resolution**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.2.10&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.10](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.10).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n* Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n * Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n * Dynamsoft License requires a secure context to work.\r\n\r\n* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n* `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.2.10&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.\r\n\r\n* `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v61+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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/programming/javascript/upgrade-guide/?ver=9.2.10&utm_source=npm).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.11","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","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.2.10-beta07280004_1658992025913_0.3894519748727858","host":"s3://npm-registry-packages"}},"9.2.11-beta07280205":{"name":"dynamsoft-javascript-barcode","version":"9.2.11-beta07280205","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.2.11-beta07280205","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"d6225642e3f07a7a6d3687a1f4307946ae2d207b","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.2.11-beta07280205.tgz","fileCount":65,"integrity":"sha512-boaYbCDUilCQxNDUrM4Owe/ilLwDyXW6YK/7aLadvizCNkY4A24it/VcVETjxVdcCeCJo6lXBAr8UT36/0iFCQ==","signatures":[{"sig":"MEQCICsrymQLEFmMxOQaPUOSn0tHAlMCTE9BHcMeJq3j85SRAiBLvBTPIMY6DoD54xVWNJqJum4n+L+PE3nBqvIdXZu7Nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9385456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4lH2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/AA//UVWVg4RWnwd6ZbVG5iyqizdnqHc5lH82JM4UA9M8e9JZxG48\r\nZe7szgCJER4zU618jZkDRAfNUBg+Y4VIv2+O0uQ+jDhoH4xOPi9XrpxSmrWR\r\nFlag5p9ZdUI1KTmi6XdwD1VTgod98lbowigvEGp82IaKdchMjRmOif1l8UNL\r\ndK3D3AgtxAcKPrqA/qE55WtcEfyMxhiRXj9+acAwjjRZlC3FYUzS+rYQM4V7\r\nlIXwkr6kBySAwOK+0xwzPCyLH3ZZ+/A6rC07r0Jz54uvzLKZH6gpEkx1dOCE\r\niV5PQUYI+kVjD6WK5v2HEHymcjcPyBk1LdjHX13ERNprS8J5rqhiI0Rt/4ik\r\nRH6lkkGphjQZP7xqelBr1JT2cmnjuVMBDrKB6FmWT3SVZNQadHRCjSOmFlUn\r\nvG4XECsCiHEA54jIRgmaiayZsVxKJk8Mq7KWHqA6aAAL+ybc6ekRYPZGRYR9\r\nJ46LbhbjPk3UnMtNGSrBtZ7RsU8NMnoFYiUqve8KYX08lEtkasJoOmjxguyb\r\ny8A1fyatpYcdgJNwr8FazAsDZwu0N4dr/eM3oy595MS333TBgy7rS59igk4v\r\nfsemhUjbUKB0svnAGZ0yGODTJfX7tyadBEofpbQJu5gZtK7cZSUPKOTNhHGB\r\nCH3YiTSzUNRl0vEr5sK0BIRooC/OMveo2E0=\r\n=4iU3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"\r\n\r\n# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n* [Building your own page](#building-your-own-page)\r\n * [Include the SDK](#include-the-sdk)\r\n * [Configure the SDK](#configure-the-sdk)\r\n * [Interact with the SDK](#interact-with-the-sdk)\r\n * [Customize the UI](#customize-the-ui-optional)\r\n* [API Documentation](#api-documentation)\r\n* [System Requirements](#system-requirements)\r\n* [How to Upgrade](#how-to-upgrade)\r\n* [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n* Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.11/1.hello-world/1.hello-world.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.2.11&utm_source=npm)\r\n* Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.2.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.11/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.2.11&utm_source=npm)\r\n* React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.2.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.11/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.2.11&utm_source=npm)\r\n* Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.2.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.11/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.2.11&utm_source=npm)\r\n* PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.2.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.11/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.2.11&utm_source=npm)\r\n* Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-the-pdf417-barcode-on-the-drivers-license?ver=9.2.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.11/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.2.11&utm_source=npm)\r\n* Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-barcodes-and-fill-form-fields?ver=9.2.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.11/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.2.11&utm_source=npm)\r\n\r\nYou can also:\r\n\r\n* Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.2.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n* Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.2.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.2.11/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n* Basic Requirements\r\n * Internet connection\r\n * [A supported browser](#system-requirements)\r\n * Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n * Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 then use it to show the **actual resolution**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.2.11&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.11](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.11).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n* Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n * Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n * Dynamsoft License requires a secure context to work.\r\n\r\n* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n* `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.2.11&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.\r\n\r\n* `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v61+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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/programming/javascript/upgrade-guide/?ver=9.2.11&utm_source=npm).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.11","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","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.2.11-beta07280205_1658999286086_0.3692437202392467","host":"s3://npm-registry-packages"}},"9.2.11":{"name":"dynamsoft-javascript-barcode","version":"9.2.11","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.2.11","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"eacc067bcf2c16fe3fe9f4b92b70954697bc0cb4","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.2.11.tgz","fileCount":65,"integrity":"sha512-ZrepNtFCJddZ8D3TUpjqCyGG5atrSS8KzcHAIGdTtkU1z9rAQpwEON0njg08mFVciN8dVloP1gLj5nPND07Xbw==","signatures":[{"sig":"MEUCIQDAlY7jOiB1LUJP2Xadz4x4dU154AGprLSeMjQOrnF76QIgNF3RLOzB8Rp+3u50sp3o4mT85Ot7S79vEak5ajfrYVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9385443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4lVSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqI/w/8CLbi9RAvSw5foZvEu6UkpvquFcTudTwAxNHpVxj5EcntvBvK\r\na3rjnqEPMcizqYkz6XQZ4QdwoqMSdKrbSEtoFSUI+war3Lp7YbwCtqDFwIzO\r\nUvJiJI9d2oUbhECvkgWEmxqsE/mu3t9q7rATXIweCS3rfY6HGJmWqFcbbviH\r\n7a6eAyMSITmrtqzv6A9f/a9yJVDsHSVFnc8e7HQiQtXT2ecCHsTlOZvsqVM2\r\nwyQPQ95HT/iH1ptGpLRCdCyO0/nwX6KMreqr5G2iodToIMrj/kVAnZtjn3WG\r\n1GyUb8+1aHwGyTb87xvdSPm0SoleFacpJe+cqajjLWITsiHkS6c1U4L3fZtH\r\nQvOON0k1r0izG3Zmro5QdsTNFq3MdSQjiLMTyF7jdOWFvzhqVlDlaKFxmPXh\r\nk0yXBZko2/E6acgn2acA8n2zvmWbg/ozAqJEosLZxIzHAFunk4aZMPXwH+OB\r\nSZynUqfcm7ASBT1oDJMANcdyBNBRX8Az9Vgx7QoQtyV3VMAGy6mTySiK2l8I\r\nawhBVpOGu/yTvKz5494DzKYlzuEZ7AClOSyK6lsA+Gw6d1jfn1LdmR5qZuJQ\r\nz4Oijujm84Rkd/bWT9iHFiAb/JfPtpeBaCnBJSDHwVjy5CKghZIBECpDlyIe\r\nj9eMFmu3lA7Sj/wNLNA6T8K1F3Ht9QNJdi4=\r\n=JE/s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.2.11_1659000146322_0.9303663588529689","host":"s3://npm-registry-packages"}},"9.2.12-beta08032257":{"name":"dynamsoft-javascript-barcode","version":"9.2.12-beta08032257","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.2.12-beta08032257","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"6eff2c5176e9eb080170a7044c63e582711c7c20","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.2.12-beta08032257.tgz","fileCount":65,"integrity":"sha512-kt0RwD+WyO2VLDezlCmy0h/DCciGaC8K8IYQj5wKjJ/SgQLRnCHqty1xoT6tnABZd7gqpm/wLWmplebfTtohzQ==","signatures":[{"sig":"MEYCIQDmhDR3SGMIFYbEmh5Ig717tZXrW1RC2Wtk1wW4pkvz8wIhAOEcp8m6orr6ev6qebWqetudoZAgpF2D8OAXPSGAUw84","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9386063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi62BgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjGQ//W5Fb+Iim4KUlVDMCz5lXxEnaZPFycRsrfUscbtghxr7d7QNd\r\nNqAPJ18+cff54mv3aVYcpVe/uG1vO8y4BlyWCEVEsDaABijcsekAS7RAyXi5\r\nRi8bs0ilnLqNxvZU+XWPxl/QTnmVVoJUBFOUwE8Z/+LeubbcL3HmXo9pn14r\r\n687KhUJfiqhQldtnQ52OeDaKg/SHwrkAm2fImWtLGvR0tsk5fkN4hEbC8bSA\r\n6IxHcFbLJ90dVBX+s1mq5g3nnzyPUkjx636sqohuZzWDXfWfT+LH+WmUmDJ1\r\nta/2cIeapngAl+tvL8L/fGKoWSEPK7TcRDn4XiAXJ+EJQRXA3cwY0NloChZu\r\nuxnJDetu9tpcsxs4Y3XdxX5QPQ8ixZqVXdcaDzTOGTR5KR+D65ofnrpYHrw3\r\n6sAdfd0g1eh1Ohm6u64+ZKj0Hu74PIvnecBFhjbPlj9PrSewV2Ll9YPnAjcg\r\nMh5u+pUU1VpEC7Qw9d+dwle2jZrOlQ9cO1hV3ng79Ed+iQPREVTxd9R9jHcN\r\n1e/hyNQ+1Ve5ynku+vDECsiQlSRok9dszCUjfsa74OLd5nyWEr1cn/A08thP\r\nmrtk2I0upISOKsNd1Zx2JxL8VMYqZsJY3FLKL/1TlkTATV/Pa12783tDoJjh\r\n/BOQglVfREsh8ZtC+QbTNKG/64ZmfCt8pTA=\r\n=fQKu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"\r\n\r\n# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n* [Building your own page](#building-your-own-page)\r\n * [Include the SDK](#include-the-sdk)\r\n * [Configure the SDK](#configure-the-sdk)\r\n * [Interact with the SDK](#interact-with-the-sdk)\r\n * [Customize the UI](#customize-the-ui-optional)\r\n* [API Documentation](#api-documentation)\r\n* [System Requirements](#system-requirements)\r\n* [How to Upgrade](#how-to-upgrade)\r\n* [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n* Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/1.hello-world/1.hello-world.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.2.12&utm_source=npm)\r\n* Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/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.2.12&utm_source=npm)\r\n* React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/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.2.12&utm_source=npm)\r\n* Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/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.2.12&utm_source=npm)\r\n* PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/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.2.12&utm_source=npm)\r\n* Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-the-pdf417-barcode-on-the-drivers-license?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/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.2.12&utm_source=npm)\r\n* Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-barcodes-and-fill-form-fields?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/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.2.12&utm_source=npm)\r\n\r\nYou can also:\r\n\r\n* Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n* Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.2.12/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n* Basic Requirements\r\n * Internet connection\r\n * [A supported browser](#system-requirements)\r\n * Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n * Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 then use it to show the **actual resolution**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.2.12&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.12](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.12).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n* Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n * Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n * Dynamsoft License requires a secure context to work.\r\n\r\n* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n* `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.2.12&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.\r\n\r\n* `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v61+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n\r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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/programming/javascript/upgrade-guide/?ver=9.2.12&utm_source=npm).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.11","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","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.0.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.2.12-beta08032257_1659592800279_0.5819734130134575","host":"s3://npm-registry-packages"}},"9.2.12-beta08032351":{"name":"dynamsoft-javascript-barcode","version":"9.2.12-beta08032351","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.2.12-beta08032351","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"4eba9bf20479a2d98fdda7b9f43bf8428b1cc48b","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.2.12-beta08032351.tgz","fileCount":65,"integrity":"sha512-olQu8tJSkllvWtJtZ0cVYXG8BhScfj31svsZtOw/2Xg27F4F63/9Cd+UtfgrbKRYUGW0M80uAv9EWc8lldzT0w==","signatures":[{"sig":"MEUCIQCxnKJ6pLhuMNa+7pYsvXQc1dm0BYi0phWkJZmy74ErwgIgSB68gGQ7IlaX0wgBwCRqHZ8KNyV5ro5gnf0QFsLFTas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9385952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi620TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO1Q/+OXyOZf1b1zspeTV9ARiJyLhyP2QmFc9VG20qGXmneVs7uPf6\r\nRt4zbtp2MIC796sh5uNzuNr+w3I0OkK8TvNsw4/La/h/QFLSceAnNz9odN3C\r\nt6FTpWiL3v3xWuSmgUPeIDe+HhgoTBThRW20vHwxTmBIRMSwdcce0vdPa8DF\r\n9+k1Byz1FGGtWTqKKJeaDxobWZzlm5JFVhvIbBJZsmYftiRmIIyFABvjkW42\r\nnmg7E5d3jKL2b1rTUUr0XNXX803m8UmvxZ5amu2VfQhWcEN81tcJ63JI8+To\r\nQRb+VkkA4nZ1oFMOU/P3EqGgsiuZCNO4KRjCaSD5fsQlQuJz3yxglBF6D7Oi\r\n/K58PBcjXtDQ4kgi2qLngspDKlpYnHtWOc9PCdyxu/UvTUXi4OoNCmyTLCvP\r\nNAlkIekJ2HjiT2g5s0pMbSHwxVaOM0inPfLGIAPki1Xli7P2HI8HdjejYogB\r\nREDvxNWGbuzu2RDGMLP2lmAuVWtHiM15Vg3v+OYLr5bwweSB+Xww7hCzF8jB\r\n/wJ37oWWPZH0tsnmT7PjZn4pDcEdqEBmP9pLxBQYj6mg5edda/yQi/ZoqvOq\r\nneAd2nyRTRflDCRaWL1oe/wVoyudGJBWssl51A2JnIew+U3j4QaRBzeVD84F\r\ns6C+VC8Pup5PfHG58uUXdVhx899a2VcOMWg=\r\n=aH8j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"\r\n\r\n# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n* [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n* [Building your own page](#building-your-own-page)\r\n * [Include the SDK](#include-the-sdk)\r\n * [Configure the SDK](#configure-the-sdk)\r\n * [Interact with the SDK](#interact-with-the-sdk)\r\n * [Customize the UI](#customize-the-ui-optional)\r\n* [API Documentation](#api-documentation)\r\n* [System Requirements](#system-requirements)\r\n* [How to Upgrade](#how-to-upgrade)\r\n* [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n* Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/1.hello-world/1.hello-world.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.2.12&utm_source=npm)\r\n* Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/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.2.12&utm_source=npm)\r\n* React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/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.2.12&utm_source=npm)\r\n* Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/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.2.12&utm_source=npm)\r\n* PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/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.2.12&utm_source=npm)\r\n* Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-the-pdf417-barcode-on-the-drivers-license?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/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.2.12&utm_source=npm)\r\n* Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-barcodes-and-fill-form-fields?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.12/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.2.12&utm_source=npm)\r\n\r\nYou can also:\r\n\r\n* Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n* Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.2.12&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.2.12/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n* Basic Requirements\r\n * Internet connection\r\n * [A supported browser](#system-requirements)\r\n * Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n * Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 then use it to show the **actual resolution**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.2.12&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.12](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.12).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n* Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n * Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n * Dynamsoft License requires a secure context to work.\r\n\r\n* `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n* `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.2.12&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.\r\n\r\n* `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v61+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n\r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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/programming/javascript/upgrade-guide/?ver=9.2.12&utm_source=npm).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.11","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","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.0.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.2.12-beta08032351_1659596051330_0.9506370871066974","host":"s3://npm-registry-packages"}},"9.2.12":{"name":"dynamsoft-javascript-barcode","version":"9.2.12","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.2.12","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"890e2ac30826ea136f0d2552b494d31fb7cbbca0","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.2.12.tgz","fileCount":65,"integrity":"sha512-mwfgkGTcKnbLZ5gW4OYG/zKKB8kiQP+mpBjviFbmJU4mtOcJkcHVF1Wogs5ReMAFOp79PvcRM/ztLRkHbFX/cQ==","signatures":[{"sig":"MEUCIE2mXKWDlUCpenv0Fb+m+tIRrPLTg5avtb9yZfRxlKJRAiEA8Z/RrvvjM2kS6cLsEflZOhbLILTnbgivyz/01kg7+LI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9385939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi63C+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKahAAiv1/tx1oE6uvlQE0QaluAke1mEgeyhyvNuttGUUC9Cgj208e\r\nd62l+fxYvJKjDsWy6RHcz7HYc4Nv+Fx170tDVVCRVEvcgyjSpM/kPfBoIsqy\r\nqtuSuP9n29KCGCpStJF9gAtzCMe60ePNa3EfMMClsBfzaPOshVsc30Ls7VbT\r\nk0enocgODtr2smyeLCG3XC2dxenKl3tY6NvPhUB3IbR1rpuizpJ3vTqshQbK\r\nlKEbYg04tmq0hw6xGKON5zDNxozWXQkC20wxB0/AXHmNYZrtH2ScIdZl+fFu\r\nWUqQa6MoK3upxJ17y71RETeWIfnuM9WXUT22FHxGzFfgxi3p9Q6zMI4llsFZ\r\nldr3J5UoTdvTWheniMpc7exmjlEAHfmwcuwmjBHJikfwK55dqGMt4MEbg0i5\r\n92il5YQXoh55X1rco6h485NS0nqBD3G9Zn8jmV9QWnsRYrNfZzByruGeXFfE\r\nQ/BmrqRANhNcwz8btO1wdQLYgGgr0fR/HEb/aMjIVlqsJOJqrzjwQdC2j6U3\r\nD6I2eUrq4ggBY0mgRfJ6/DGZgYwp7rZjFDtMytZmo3D6EsshjjvsExrmmr6m\r\nOA5cr+NIYo23nc+Nj3rr8Jz4nxvxI3W1twjnnygiopzPo6XAgZYeM5LRw2A+\r\n17rP+MJs+YTwYs7K6LU40OzhlEiLsJ2CNdI=\r\n=DMvv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.0.1"},"_hasShrinkwrap":false,"devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.2.12_1659596990139_0.8763964875727277","host":"s3://npm-registry-packages"}},"9.2.13-beta08100131":{"name":"dynamsoft-javascript-barcode","version":"9.2.13-beta08100131","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.2.13-beta08100131","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"4b45666decf6a46ce30980d3679ea5879773f9bd","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.2.13-beta08100131.tgz","fileCount":65,"integrity":"sha512-e403zrOLeEkzfyaRKwK3ZxWD3GHv2u971jVgMQx9YkPQS2Y6uvnpJlrc/UhpIw9AqqIL7OZ7LBIVlVSYTyi/zQ==","signatures":[{"sig":"MEUCIHjrDWuEolLNpQtj98O0vavy961Sf0R4CtP6iw7vjoybAiEA9/sZUpCAxiEyloyPzP+eoR4w1tsQbusJFkx72mKCHak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9394595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi822FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo87g//Z8P+bWSGoz3NL38vFcLpYGJh8DVXMJ45X/0LnnCpP6POukmC\r\n+64VH+ypJ2ogKJV1gELzNqSPlFw95csERafgMjnTAjuCFBdtkvOEkqNmsHc3\r\nKDEwqfbUK4mnscilCCafkfhPZbIvPKPQU7KktXHzlMw2ZLjFMNkneGzB87hy\r\nT7P5UkM33Faig/+9wQvCUFl9bw/lLT1daCqcJSfCTXJZokFDMY+0pkeAhTFO\r\n3G+HTyCU2dNfRNfvh0Y/tQaEr6PpqA5W4JLclnL6xsYMzPkXCll7bXGt26vn\r\nG+VtaFENR8bMKO05lRaY2Nzh5e7PG8vJTnmrk6qxrBYmCZzf5Y3sg/C+8wHG\r\nKt/nWSH7S5910pZMJN0J2qmCeLH3QSPZvdsJTn2uK5GECZwdngsZ6LKiRsGn\r\nSq/PeYX7L1K/X7AxtdYFDKIdTqGh+DxGh2zWPFzZ6igKZvLJfLN9C6wqNNri\r\n/oV/GutbWha6i0+6LPGN0phEEAMPxW+coWByeqNeEtvxIjelhAGL38nfDM98\r\nPqMlJxbMq/7Tvom4igBfzPEwXoKI9VTSXSIAkg90aNB7vF+O4GZFTNXlsim9\r\n+GysiEEzhGHoMV4+7RbM4BEnCDg35i2ATVR/DvGfBeLOVCpAdzYNtR9z2F1v\r\nHZe65Uo9pY2tLGzNmrj4rR3ZPDxcJ6lJi6c=\r\n=5kvg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"\r\n\r\n# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a CDN](#use-a-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/1.hello-world/1.hello-world.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html?ver=9.2.13&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.2.13&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/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.2.13&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.2.13&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/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.2.13&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.2.13&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/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.2.13&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.2.13&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/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.2.13&utm_source=npm)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-the-pdf417-barcode-on-the-drivers-license?ver=9.2.13&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/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.2.13&utm_source=npm)\r\n- Fill A Form - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/use-cases.html?ver=latest#read-barcodes-and-fill-form-fields?ver=9.2.13&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.2.13/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.2.13&utm_source=npm)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.2.13&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.2.13&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.2.13/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n - Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 then use it to show the **actual resolution**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.2.13&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.13](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.2.13).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.2.13&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v61+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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/programming/javascript/upgrade-guide/?ver=9.2.13&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/camera-enhancer/docs/programming/javascript/release-note/index.html).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.11","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","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.0.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.2.13-beta08100131_1660120453189_0.8872830759737087","host":"s3://npm-registry-packages"}},"9.2.13":{"name":"dynamsoft-javascript-barcode","version":"9.2.13","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.2.13","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"cd5424383a47182766623caba888570a77319070","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.2.13.tgz","fileCount":65,"integrity":"sha512-hUI2EyFBNdmzq3+5CfT6FogmfbZ2DNOal4eHiuh1zKRYXncos6xV7YNJraXwPqZVT5RijpdzqYp5/A/PFcU7fA==","signatures":[{"sig":"MEQCIB7ENDIR8D7lVaXOgQAOolAdxkasZLUbpH0576x6yZDBAiABfh5C2A+J2EXf7m/iEbTJrJ/pHuSY0E8c1TPz991OGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9394582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9FsqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAOQ/+PcQi2JQxOZNuqowQS1It+agbqgRB/+NhyEnM2XS0jHcMqn0e\r\nVZzF6NscyVOLjJDcBHhJXyxQgetTL019Sahun6FHFlEFkY823iMJrB6mFE1K\r\nbuVGaa0+JevOa3k+Gs/E55G8BwtKDM+sk6kxFNi4ZFpSE6KWHAKioU0Q+ZTg\r\nIZmD08tsaa4ATgFb9X4gq4nXbqdfzlCzIj2lt78ktytOdHP3fFW0FpNRMcc5\r\n9PIexHRxulLIGDX+DGrdX8x02bQLkCpU+cNgLaoPqx31Dc+qY5kwYU58BJsp\r\njy7+d9u2ZC2AoqrIdG6QFkthqGhRWvw00b7HlQP3yWxLmfoQ9ztX1rP0TRMa\r\npXgKOIfo4vimxKqbihjS6+jXlfMbw0arHS/OMFL5+STs4DfinllnrGS5eTbl\r\npNkQcqeNbV6m9zKevwA9PYdC/5DzPemkhOr0cMKl4RNUeME8uLmGil/r84lx\r\nvsEqNaSS+B48ePr2Bke02HcWEct39S0ioWKOZGycw8r5HAyA0VQvB0gz1iqx\r\neEr+3I9cvdK0bUwcp0X0pMdoA+ZmIyQyG6SGCo0le80pxG9CM5XSz/5w50O3\r\nTktn1M/vO5Ne1WdFevgNO/AFs4DpRi8cb6hp70wcJ1J7qHHwlF4DvatY0cr1\r\nxFRf5w2d/UW0Qr1pQ3aMklrJKmFmaDos5MY=\r\n=S3K8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.0.1"},"_hasShrinkwrap":false,"devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.2.13_1660181290283_0.8042545167989092","host":"s3://npm-registry-packages"}},"9.3.0-beta09252239":{"name":"dynamsoft-javascript-barcode","version":"9.3.0-beta09252239","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.3.0-beta09252239","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"3216d1c85b6921abc6a8e78133f799dc8d82e8d1","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.3.0-beta09252239.tgz","fileCount":65,"integrity":"sha512-mClBJNoKpFpAybjIuPXOSbEqcEBOozJgHyZMLT7kcbDGYvPPwOAaguo8GNmADX4JTWPfKZDq9E/InLbnBpAPMw==","signatures":[{"sig":"MEUCIEXR42IKbTBFhl7RHYacp1ftch5hgS6b4IYdDG7gJTlaAiEAneax/A+cFqfAoyYOdeNq8qi/lGVpMFrJBpCwXCE1StA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9401089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMTu7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJlw/+MatnUVo457riQJ8t/Z2PPWI2/ikU0z5ZmUD1DL2jIk6LIado\r\nPInFN29bXzigJhCcmFMCppbE5ZdHdxdcR9U12frM00vyzczyoqZ+rmier4AA\r\nbPYPSiVkBAiz0XE7QNAdaN4xs+PUIFwe8WMxm1ssGLIHD9261IdsItPypyUh\r\ntX3b13IoG0ICRV5wHEDhBKbNkpX54IBls5eNvUXZSt0QY7lx5lp3OPXp0mfB\r\nBa2/kwAx5Cjl85lnbSA39pSMoFO6XY6EwaPQjJtR2r0Zs72wix9HqJ8Ud3/o\r\n8BJ9m8Smzm2cZiZaah38dmjjW2lsEW0G5Yb3BfCESKqB602atL/UKXHBlQIT\r\n64HhikEvf5lBV/D/vJbwukv4wJJqcZ3UUa3CdllbxCvOuCJNbzEEPhUKEpTW\r\nK3bC1EMWxwL91qAOZ1Ska9qkOp/EAgtNpt+vz6Qa9mSoWHTLF+EkdX2ASwcu\r\nwGMUMvdUuXlUkhDPqg9pfcUojvtDroTvHmZNT4hZlJUUbQf3wMYZD7JRN5Vr\r\nBFxWiL14uxo9bDOaAQ1jnAk7/s5ZHhHns/fmpDTeOkpabZK6AnqKAKCA4q59\r\nZqL/oxJe276L0areHI7Q3adJyfMVr8pKQLyb+cBq4b0GAr/3LUSKOz6G+Dfg\r\nKC9EquBcIJOqGnKWvqxEDek6I8Z4ZGF/5MQ=\r\n=AqZA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"\r\n\r\n# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a CDN](#use-a-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.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.3.0&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.3.0&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.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.3.0&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.3.0&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.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.3.0&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.3.0&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.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.3.0&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.3.0&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.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.3.0&utm_source=npm)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.3.0&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.3.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.3.0&utm_source=npm)\r\n- 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.3.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.3.0&utm_source=npm)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.3.0&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.3.0&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.3.0/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n - Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 then use it to show the **actual resolution**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.3.0&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.0](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.0).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.3.0&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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/programming/javascript/upgrade-guide/?ver=9.3.0&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/camera-enhancer/docs/programming/javascript/release-note/index.html).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.11","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","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.0.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.3.0-beta09252239_1664170939600_0.5828496554256637","host":"s3://npm-registry-packages"}},"9.3.0":{"name":"dynamsoft-javascript-barcode","version":"9.3.0","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.3.0","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"606700a9dbef17c692ecb2508906f6b923c5c94f","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.3.0.tgz","fileCount":65,"integrity":"sha512-v6DdY6INZALHHj77AwW6cJDSkbuPgQOeMjaaLAsxjFopRFiiqjfIg0RBelI2a2UgiLunw7pra2McCkLCxXzPzw==","signatures":[{"sig":"MEUCIQDIo085KQuhgJE3VOOxaoJJd8fYL9RlGMUHfV5SjotmdQIgQ1z+Vd+zelk1kkQe30x9VRZEmPrkMMBmXepA+B3vEBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9401076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMlPUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUSQ//dVoz1RgSb3dGvaN0wZRceO8Q3cqN1fxxfdtVN6I0dL0o+bRc\r\n0D5ReZ2eUDmQMHu7FkmLNZiezSiOBWTAzzeEDH1d/YB8l4W5kXbKlnub0Rp0\r\nhUUT/3i8rsS4qv4qiOgNvtfiLIbUA/ObzwD7DFDcNFreNL2mlaU57W5DnkFh\r\nDQTr/L2s90prp2eBI0+a4/yFjE6Jf1JlhKm+BeV4nTBAwnWk9agNq3obkltV\r\nQm1wLavP1AIrrJBPADoEKhC1eOD0xWPWqIuTrphEK5rhY1zD/3YRiqhreDzj\r\ncgv2rB73i2UO9iFYthvBTtyDvmafYn4+FBQFf3N8Pn1s0xQMbG1azhZjSbQ7\r\nXBo39hBdPd6imbuTXkNmJqbYJ5lchU1qdMyLKuXAdNfY7D9Sqj8sPTO+jmlM\r\nqqIOjhxnZyJaiuwU0LyMoZ1z65kAbTCmXoq3xkxFvHuK3j+6ErBIeIuynD3W\r\n6W1Nkp6BGPqVVoAkFhnpxrYpgqsmlSSNhfPrPHprO+6Bo4pcTwqdWxwWrYnr\r\nhy98fAGRJJ/2n1ZhHV3l0U6z7TF8IMGJFhfwwpp1fgQSGoVlk1s7l44ilmHc\r\nu3kfdmOTrciATXcSV/wAm93xLaXB3/myuoFzSL+qntVGpz2nuDuiwmKx1RJ0\r\nIPF4nLUj8eA220fWnp8JSZnbksaLGarSSnY=\r\n=NFBs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.0.1"},"_hasShrinkwrap":false,"devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.3.0_1664242644446_0.2896985500315019","host":"s3://npm-registry-packages"}},"9.3.1-beta10082243":{"name":"dynamsoft-javascript-barcode","version":"9.3.1-beta10082243","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.3.1-beta10082243","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"58d54d4ff3ac226f16e9926ed7515dc72d3aded8","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.3.1-beta10082243.tgz","fileCount":65,"integrity":"sha512-Q9f0lpCZkRy/OviuUT/1ZGwNloxyYG2THCbjB44pVfJX9r9DU3WEjqhnDm5wusa7oTgTES5Ys6y2MBAR/sZ9UA==","signatures":[{"sig":"MEUCICu44ByR0H8ILKdogBwqwOkV9asEga0GuU/Nv546w/8YAiEAkWn82tzbNGAAcQxAZlMkzJ9rwmZGLRGiFR411PvBEOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9401842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQmASACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohoQ//e2EYZbZl90pwaqKXMpHaM8l681HbGoZg12VCDYPA/WrqndHp\r\nr1LsL/YovhFKZmySTTve2uEUORnlBRwCQFkfQLxWHKCxjyqgfZeKXXwf10Jo\r\nrbKoWCwnkY3H685BIMvdie0D9XcFV772K3yUDdigsUqjjaqLv7Sp/PRC5E/y\r\nj5hRvTlBC0l8yxUOPZd4a5oHH3TFWTCnnQvzNjHlQTqpmdSSkLGwpmN2ucVI\r\nXpAb241lu/Sdfd124SG58YJTrjmgy7aCZCkksFcgfqoV6+XfK5rO8Mz9JQXB\r\nmLxpyRx45qn4kr01rfetFeAx29WprrdyS7uDeEbgY+lmaZfcfuCQVtUFsEgI\r\nP0Bvcot63eDFNrycZ0ilWOm41kq1hWjDajjdAULEDNsLOO7q1GQWYxOuzEAk\r\nbLwzBEZZb572rg2zC2BK6qtSzmqG1L3M6XjsxjQjmUZOSNbmz6sKhPBnHl3X\r\nL8qXjv1qfti0eK8KNVNnb5AEx1jfEKhaTTKGshw5L37ytsRAsi14KbSVCmFl\r\nKDdrCK2JpdGxMUnc02XQJILPE4/To+R/u1w1T5n4UEGdKR9M0hSJ+ec4GIoQ\r\niSOwX52v0zLQTwYFmbcP0BEY/U07oZS8o/N3r1kvN4tY2/xUelZ4+0t8/J8G\r\nSyQ3ntrER4tyl3MicO8Rk4vE8GBUXxmVohc=\r\n=iyt6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"\r\n\r\n# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a CDN](#use-a-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- 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=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- 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=npm&&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=npm)\r\n- 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.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=npm)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.3.1&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.3.1&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.3.1/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n - Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 then use it to show the **actual resolution**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.3.1&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.1](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.1).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.3.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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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/programming/javascript/upgrade-guide/?ver=9.3.1&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/camera-enhancer/docs/programming/javascript/release-note/index.html).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.11","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","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.0.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.3.1-beta10082243_1665294353936_0.13766454779879922","host":"s3://npm-registry-packages"}},"9.3.1-beta10092217":{"name":"dynamsoft-javascript-barcode","version":"9.3.1-beta10092217","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.3.1-beta10092217","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"a118dcf9f88f932f5a34c401301dbee7e8f7733a","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.3.1-beta10092217.tgz","fileCount":65,"integrity":"sha512-Ik5hflt8RzMgJ9CbGRCutwU/ulMWf4a8Wpr529D1ONDfHdocr8UwBR1YiqQ6JA5qZyg/MbkvJzdUZK/wYeAIbA==","signatures":[{"sig":"MEUCIGrkidenIzBJ0lTHC68bvX+4pYUiw2QN9s+jkwojUFDOAiEA5pnBTtvptjVfad+L3Mr2R0eU9JsE0jG8BcanFDCCiH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9401852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQ6uNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofPRAAo17YqVqVyvQxSnUE1MnkjMyAIetuQDMWTzAdAElyeOLyKk4e\r\nuaIgliR0rppDZBNXAS2FiCgbjGDSGyc2M94+Ej86036IDVCh8Fj10voCXGwh\r\nsxJweGQjzYmD45VRqLSkObYc/9Oxo3f1Trn/TVrm5iI8cS3oOMsFOjV9Iyx6\r\nxbO6iZukApHqOkrly+/sztMuYRqh/cJcB2mETrEzc3k25NaaUjDnGijrByUw\r\nOrXTOfFrob92G4IJ87O72ZZaqMrEFpFvkRRaWmzPkatgBPblHDQZd2axE61f\r\nJAx0F4LHO5BvI69AZ7WMB+3OCIPowA37GEDdtH4uqGqjU8W9g4tCj1KpUo5x\r\n6D3NH8DGQlCxZioXcr/KH5ZRr6mkjKVqypPxtOECdb3FoD3Swo2RUghM/cLZ\r\nK/Hfr795md4FPL3jsBz02ynaTIX06NeqX//xPWkILay6dwLSK7fDH2zrL7Tm\r\nEANOwbWYyzQfdn87jsYYgOYDTATM3uEDhlUmiZHOGIOLlpjdLhDFD246jXQM\r\nqrjNDBjUjlNENQMHQ7+QI3BZiXazkptiftSLfruI8bTIpWzTez1H0MO4NOOC\r\nDq3HFM92Wh0Q+R45/3slW1ahX5VRorgWHzV2EjYC4I5bZE+qOiN5OIknI1ar\r\npQllJvZIYhkcjd+gvu8bk3xE+0G8Q6xKuLQ=\r\n=+JYi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"\r\n\r\n# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a CDN](#use-a-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- 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=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- 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=npm&&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=npm)\r\n- 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.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=npm)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.3.1&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.3.1&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.3.1/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n - Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 then use it to show the **actual resolution**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.3.1&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.1](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.1).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.3.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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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/programming/javascript/upgrade-guide/?ver=9.3.1&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.11","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","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.0.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.3.1-beta10092217_1665379213589_0.36493018403409794","host":"s3://npm-registry-packages"}},"9.3.1":{"name":"dynamsoft-javascript-barcode","version":"9.3.1","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.3.1","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"f66d2ad52ae7b2a550e78b104e43dacfc4509e20","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.3.1.tgz","fileCount":65,"integrity":"sha512-b+38vPGlPN2vq2tTkBV03sUpg8UAQJGnMJfhctZhIK30DPVDnu28GZWVUSHPqH0pTESJR+OxcsEmSz0sJ7S3/w==","signatures":[{"sig":"MEUCIQDi/51B+n7eFtyUYghR0m0u97DegnYxFNRfCS3Pxf4iogIgOOxPG2AXrHObzVKBG+Fub3owMyhZTt2CFyfMTM8H4rE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9401839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQ7OCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpruw//egBrO6X4wQ6JfoHdft2Yk4Uy4qKGPZgtTbZJ6mIP98wMh/wf\r\niXd2u8x0tDqGuGy4nYNoDfAwCKM11z8fdUiGhQelI5uOsXBSFGEEdm5wq9LH\r\n1AkjTtST7jnlAB9F7DUBk7wElqwXRNt7nuhA1gXElJLT0ZyCM0M2l9J08NIw\r\naaibYTc7S6XXaAxZAIWjynQt/SjzXCCPL1TJImtDJTXVZRcdNMnMITZRYZvG\r\nR30TGYvQ3NU8jryCjTdC1IaoAZcvy6QbWAU2PeK6Ghdw7fQhw2xh8KpiM6Rw\r\nE/DQiQdPMmgiAxfBYXDhAKDGFINLDXVjX2lezovwzZvS8qjRHztKA1escvp+\r\nVkj2RRdY8QoEF4oThX5Qqo/qCWrj4eJuib+ydNio/a/ujrBvV6P9LC0VdCBW\r\n5UsUR088OJDJt4WT4jp0cLKAIbjbF05DDxYAIsVbX+lPJCXYXQ27w1RidYOb\r\nzUBqNkjydHXku3Yx1yI3u/iz1g47Ckxm/hbE905ZXcMwSg9pfj762PeB/ytG\r\nLmEuC6MZT61CCeb+FIfTFuzPsw/fx8t9xCtO7HH5ThSzLhFSujLOxigy38eT\r\neu7dNExYbVLLdHeC0zqdQQ2mYO9qepCd8Tz23HjqC9S/Ch7ns6jo1L9HqF/i\r\nnOwDXx/ywdcxfHTuZfLUMkJrrg8z89rTbPk=\r\n=7Fwa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.0.1"},"_hasShrinkwrap":false,"devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.3.1_1665381250128_0.6894225857814389","host":"s3://npm-registry-packages"}},"9.4.0-iv11082257":{"name":"dynamsoft-javascript-barcode","version":"9.4.0-iv11082257","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.4.0-iv11082257","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"0e577fbdd7a856af218bd3cce9a97c1c3c5db7e0","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.4.0-iv11082257.tgz","fileCount":65,"integrity":"sha512-eWNdvDrHxjcc4rt0WJ0tiElLyMSDYWivDLqOJEd4bXadMmsRNwTFQ/9oG+JsQVYsta2OLlL8DmutRTE/s5MNoA==","signatures":[{"sig":"MEYCIQC+ZH7uPpQiLUYRjF5dMojt6awizLYJ7UlN4tg/xM1qpQIhAJNqc8sHXFbvQBxvUNMoP7qe4C0CvovwmbpuSPWpLIsM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9338099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja1DDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmry1hAAmi55PJoxMWyP6cpHp516+e/rHn8Wh42f4x/mcP8PMroFe5vH\r\nZvLMu5Pus1wzPNa/2GgzANKsBO8CEH77CZBQfW9nIs+pdQLop4ri6hSXlcEQ\r\nZxPDBcyuZlv9vbjC/3euI5Wc7I4V8FcNcgc/rVg8dGC2ytiCwjeBiUs+lFpl\r\nCUlq9wMhqIzDPKoPrliv76/IY9ags42bCdpS1PhI20Kjz6cYxbuTVQmevEdD\r\nVkGLbNNPQUlDeuCbQqSzj6GiONe2U0IaDiUPtlUgD60rtkhe7V5MBMk5lRp+\r\nbJbKsX3tjj9w0nzvRdN3pJ1+hU1c1VRvx0bJAIRKjWostb8CClx6YEigvsWN\r\nBu9MwHWvdTjEkEzL39CJlF6BmrHQgQebuIeZDnIPu09RVflE1GGXF07n9/VJ\r\naA6yRYRIrGupF5FnJMMT1pReCG42/XAOEnM8neRYi9pzoKHnY2YhVgPkofG2\r\nsAqwHtwX5UiiDjLd7rDojh9z5Jyt+aT9y9v2Ip2Iv3DSzpEtgHW/rkKq36xT\r\nGxHrBCoWHKBoOkmjdX904ij84xU/WxWqtDWy3h07geaRC999RW7ZRAAggxJH\r\nlbtIpaVdw8rBTWZfUdjQATZizoctOzEr4llMd1X2InIi/+n47y+nPYqA8jTo\r\nHms5OasPqIYOXCT8mfj2IeUuLLwAkelSiyg=\r\n=1GUN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"\r\n\r\n# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a CDN](#use-a-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- 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=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- 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=npm&&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=npm)\r\n- 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.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=npm)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.3.1&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.3.1&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.3.1/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n - Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 then use it to show the **actual resolution**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.3.1&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.1](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.1).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.3.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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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/programming/javascript/upgrade-guide/?ver=9.3.1&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.0.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.4.0-iv11082257_1667977411663_0.9852322575765176","host":"s3://npm-registry-packages"}},"9.4.0-iv11082320":{"name":"dynamsoft-javascript-barcode","version":"9.4.0-iv11082320","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.4.0-iv11082320","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"9d806bbfa880da5ce26d5dd83ca776c3022c4649","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.4.0-iv11082320.tgz","fileCount":65,"integrity":"sha512-V0o1Vc+apU3fY3z5HAhsakTHS0AwT0fiTPs/tItfQJpd4HgBDwWYiVksy+6eMb4PXhgQXqHZaav0H+b/Pvvj0A==","signatures":[{"sig":"MEYCIQDLqKJLJDc8ut4Qdxn49EK6mDB4GRQvtINs4KorcjbSKAIhAOB9XkhVUQsw6tFN6fy8JBWYSta2yxpQxy4pi+DEuWWq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9338099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja1YwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6og//YHDJxUsLxgXnbbjZ1l9VJkGr+4EZ/Sm6QNRp6SXejYpfYBtn\r\n4nNlJMx9KkxX5bHul2jRRYIru3sFwqdSPUpO3CDe5xvnIUyKlrSEuy5pw0ic\r\nc04GPTkpsdZoLxXn+VmP4yjNPMJICnH2dnkdN8iOgG9P+qwbDFFu4ed2CLPP\r\nIz1DksJyyFecFfmUDQp1efOkUvUO3WLPxcJY6WfiLnkVStYJn4ReaSrX2kaJ\r\n4QXvRTDaXdcGmsKCtdUcuOp5BaUpe9XkWdnfqWjlfnv6yc7KE85okUPkqzeW\r\nnN7CwS82vKhrr+bB+jMl6VjvPinpAjshmV3/NXQCE/21voLragAoCRFj2ySk\r\njciLjwmfcVOxSvWve1yy/fQoOIbkqFQ1KCoCx5uDZYoH65YKt86y5BCbtSJQ\r\nLu0gsFzq1UIvwUDIePArNBYOkMlxsNnMntUFPEasHuNYI8tKmz2iUn0KVF8a\r\nrQ1D6zntMzl9dh4dCpZdGdCrFCcrjjrCup/ro9DZtIZgAfAZ4Stsd7AZsjxN\r\n1pEMyrtbgufXAbXF7BqFJG7YatN+spm8vtZPtJEkj+6NiOjp3S5C1vD9zKFe\r\n7CE/vHQdMiCl6PQ5c1LYwJ5oUlf64mAZUJDeo38WHYbRrWW1Ba8x0IPXlVDF\r\nengig2vcV859e3gY+MfjV28EyYxxiOpDzFw=\r\n=qDAU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"\r\n\r\n# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a CDN](#use-a-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- 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=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- 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=npm&&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=npm)\r\n- 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.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=npm)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.3.1&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.3.1&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.3.1/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n - Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 then use it to show the **actual resolution**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.3.1&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.1](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.1).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.3.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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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/programming/javascript/upgrade-guide/?ver=9.3.1&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.0.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.4.0-iv11082320_1667978800318_0.8289441144152199","host":"s3://npm-registry-packages"}},"9.4.0-iv-202211222141":{"name":"dynamsoft-javascript-barcode","version":"9.4.0-iv-202211222141","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.4.0-iv-202211222141","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"21b00e1e1c495e808a1cd65a6908e2b389ff68f9","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.4.0-iv-202211222141.tgz","fileCount":65,"integrity":"sha512-KRWQwHiwedpHD50yyCaCYV7FHU6+mphHr4836PBquJyc/kRB2kYIACtwsP0kzYubWKFAvzE4pSovP/B9lg9wig==","signatures":[{"sig":"MEUCIACy8gKj4/0/FeHnKw/gfz9CkY66ovQXp78WKSpqFl2xAiEAzI907v+Ns0x1UXFVxAt1x9wtNRJ/unCMfWUEhm3WNS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9421636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfbOiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtixAAnXPfN8AUkagEIMYxQGv6k+sbB4qLbmLKm9rk4RzEVHQXMLzX\r\ncb+0dDEen/yfIfqiPqAitHpN+MffGeJU9jjFWgADUEeqXpDykdnD+rOkC/Ei\r\nclz5POX8qF82aWGWqDheZ20csHyg9uJRe+U/GErrS13FDmQ9K/+cxmKK0JIB\r\nnpq5Pqz7BbD57Q0/c+Au8R9KcRQBXgCqlKm0pWXYyKvvasN5wLha4I3yD4wr\r\njPWWHU+tg+4N9Cp5tLu8NY/LAphuh9qnceP8ELaYiGHDRzThOB0EDcvRjXrY\r\ngZFKPcBHKQcMbIAJ50a5nWYL6JkRCzBFAEomTJgJiXHWXN4t1Dr1DMgr3T6X\r\nwVsHxC6oRB34hs9BU3D9rUnY845NcjF5UbR1BZgbgnuFadnTdDdt6HcAxkTc\r\nlNouj+tAmnWTNCL8uG2uBtVY0QDqpXc35ztrM5mJRU19Tds7rdPP9hmdqYbE\r\nBRThZUkdXFjPXlmgfijh9hrAnRMSvmrHt4LeUf1AVA5DE+qPbY8pJaopCh+C\r\nnmwUzc0pEogRcY7SvMMAPacQrPfQ/8p3sTiQv1D54l65xm1Nl/CdEmrod1YU\r\nTTYucpoPrjCwPvGbjz4cjz2yZBCDhcqUPVLsKNPJniJ3zAH1xoXPqNccUigs\r\nsvwH0Sb7tWazuSzEUFGt6BYGAh7JuWneiaI=\r\n=K4bm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"\r\n\r\n# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a CDN](#use-a-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- 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=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- 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=npm&&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=npm)\r\n- 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.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=npm)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.3.1&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.3.1&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.3.1/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n - Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 then use it to show the **actual resolution**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.3.1&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.1](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.1).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.3.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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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/programming/javascript/upgrade-guide/?ver=9.3.1&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.2.0-iv-202211222105"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"dlsjs":"http://npm.dynamsoftwebtwain.com/dlsjs/-/dlsjs-1.0.22.tgz","tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","typescript":"4.3.5","@types/node":"16.11.2","dm-browser-info":"http://npm.dynamsoftwebtwain.com/dm-browser-info/-/dm-browser-info-1.0.5.tgz","mutable-promise":"1.1.13","@types/node-fetch":"2.6.1","dm-curscript-path":"http://npm.dynamsoftwebtwain.com/dm-curscript-path/-/dm-curscript-path-1.0.3.tgz","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@rollup/plugin-node-resolve":"13.0.5","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.4.0-iv-202211222141_1669182369847_0.2396522282599054","host":"s3://npm-registry-packages"}},"9.6.0-beta-202212130059":{"name":"dynamsoft-javascript-barcode","version":"9.6.0-beta-202212130059","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.0-beta-202212130059","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"2cabd6a8537bb1b71b1afd43dbf4ff61393966c4","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.0-beta-202212130059.tgz","fileCount":70,"integrity":"sha512-Va0TTIPZxuKWgmO7hBaXgiECFEc9DQ+FBHr/AZ93+MiJc+lcztyi2DRul9tztNroWcLATdWjUcmsQRPn9YcgfA==","signatures":[{"sig":"MEUCIAYSq7I75QjoFmmfJhpQewsJsvteLUsptFFqt/MOy9T2AiEA2Vsz1UxjQRCu67p+1pQoJ/qTWbr3c1VULEvtlPSim+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19087753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmEB2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrzag//SMKH3yeMBR+J1vgG5i2nlZhzKj99YJ/k1pG7OQazOUM216DF\r\nE4mprW9ThUl5n4ob+rWR/H1VlJ7r7NhCL2A+fX7p1pS7icdJ5KR+I5vwdSVB\r\n9Dpxar9TYz6mmiH4+GJxj2vPFhCHy9A5vcMtqsE2h8DIlTCVc0FrDG7A6KcX\r\nsLYUCBP3UTLxEVJ4OngJFLxH5OQCVwcU3RRY0IyHIbSIuq7naKV6wSMWHtjS\r\n7ZePBjgqCrO8t6wCyrznmxnlMnkI3qet64cjISdu1YJpbZ0rK4D0eIChz9+w\r\nB95wNCAxn3ZwKE76mm0uRpBST+tHqEA8jtcz/ZAGd5pU7V720HwtRXXUD1KG\r\nPF9P1y1U4wmUhNBmPVAQ+7BB0CLLfDRdco+k2i9cnxIK5VmL+85hlmXH1jgb\r\nPyE0vMGjF0qXZ+7WbVUusYLDoBcYuIgXvpgpaWUryzz5elwhF3767OL/fypo\r\nYa6b0Y02v3Hc0QhuqR7Ayi9LMBnMAkhLSATCQGI3Q4QTOLFdS1j3DE9rU/qZ\r\ngaz2FmtwdwRV9bnH/DYOBPdQDA3xGhFwMoICF95BEMsCvH1RuKRs6lomJ3iO\r\nmOoapwzczcqFY8Ch8N69VB5y0X85mZYVJNgwDoO1oTGVDdRNfdMcpjYVcwqk\r\nJ/HhA1kz+RIUdCm9HIWJ1Y6BY2SI/HQObbU=\r\n=YBLF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"\r\n\r\n# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a CDN](#use-a-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- 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=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.3.1&utm_source=npm) \\| [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=npm)\r\n- 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=npm&&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=npm)\r\n- 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.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=npm)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.3.1&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.3.1&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.3.1/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n - Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 then use it to show the **actual resolution**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/ui-customization.html?ver=9.3.1&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.1](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=9.3.1).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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/programming/javascript/api-reference/BarcodeScanner.html?ver=9.3.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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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/programming/javascript/upgrade-guide/?ver=9.3.1&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.2.0-beta-202212122121"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","inline-css":"^4.0.1","typescript":"4.3.5","@types/node":"16.11.2","markdown-styles":"^3.2.0","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.1","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.0-beta-202212130059_1670922358166_0.5104297042726693","host":"s3://npm-registry-packages"}},"9.6.0-beta-202212130149":{"name":"dynamsoft-javascript-barcode","version":"9.6.0-beta-202212130149","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.0-beta-202212130149","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"d0dabdc80a2d725f6fba685c16572b72ae06a9b3","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.0-beta-202212130149.tgz","fileCount":70,"integrity":"sha512-uOIbuYoQ0Q5pOS4sld1Ratw/4obEbTm4N2eX9qPicX2mud0eZECW/RkAcNApCk7AWFh799L8tkr9dBgzaJVPQQ==","signatures":[{"sig":"MEQCIEOmsTzHS8gKvWkiXLuy8BdPrCsqEY2WX7skB1UOt5Y/AiAmIqMRgo4uW75OOUFFf/UaY+W+rfX4SOv/2v2j8iFJUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19094947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmExJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGGg/+PTpNSwZdXSvQN7SWsCCa3JfxkNQwYv+Xl/gdtgo4I3eMpPAy\r\noFRcuwDTresCEmCWtKr5PIOW2CC+Rc47OSrBWt888VdgGxveazNdYX1+pAGS\r\n6trOCrsZN2bkEB2nklzV1mj1+segSn1YvLGHPNmP9eDsK2KhyaJY3lEXca/F\r\namsOkfGjvHtdGl3LhMjm51AZaMD+t4qbag3fh4lmCidgI2DxA5d/Vhf6wfF8\r\nAowrxk1WhOgqht0G/uvbVWag8x7Y6Xur4HsrOfe4CuOK3H02xVSsWFSnmBIb\r\nAn/IcPuNUOvSU1UEdDZ6/dhFNo5aIfdx5IhKyiS/IV0H/Vozj39i75qElo/x\r\n3iGmXnAXW+sKHknha2O5rj3ofUABOxp/8m0WNs5GHgrFAUf/DcJuEL7Go7Sm\r\nPNOEb1fMBXZ2Dwfsh2q+yO3FzeMTOVYAyvG+/iodld8WPvoREpsGOjWFx5AA\r\nEX2baqiaK2XudioDor5xcNpZwJkDjkVjpphKkb1tFtJwoIoABTKftldbOBdQ\r\nqRdbQ1vre3GYN+At1SmCAIvj9+6pA3dZjIbEYjGEvzU+GylcaDIXTL3CvV5L\r\n1kw76YUilJky3neerI3MI2IXn9mMAZefFsv6hcJMyqnLczjV2Gt/SufE7mkg\r\n6bgwMvIJB30KnzVQjLf1Y9Jr2e/C9yrp+14=\r\n=s5aG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a public CDN](#use-a-public-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- 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=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.0&utm_source=npm) \\| [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=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.0&utm_source=npm) \\| [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=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.0&utm_source=npm) \\| [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=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.0&utm_source=npm) \\| [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=npm)\r\n- 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=npm&&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=npm)\r\n- 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.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=npm)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.0&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.0&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.0/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n - [Optional] Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/ui-customization.html?ver=9.6.0&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.0](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.0).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.0&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.0&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.2.0-beta-202212122121"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","inline-css":"^4.0.1","typescript":"4.3.5","@types/node":"16.11.2","markdown-styles":"^3.2.0","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.1","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.0-beta-202212130149_1670925385618_0.4851557148614756","host":"s3://npm-registry-packages"}},"9.6.0":{"name":"dynamsoft-javascript-barcode","version":"9.6.0","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.0","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"111c0f8e6bfe2e731505f1a00b084bb363fd18cf","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.0.tgz","fileCount":70,"integrity":"sha512-HmpyxFEr3kJ9Ny+UZRa1cjPefR9duyQ21e55kOmjWyaB3CRIoutK2u11w2k/PgIWSXCwBeGc5iUvgecRXB8KoA==","signatures":[{"sig":"MEQCH3odWx0vc3LDMfBN6O1SOgFQ6Bcpi0GDm6BdPZJZhVICIQDcx39EAyRkAdvCZN6MGUinNdOzboFByRWTFFkJCBrEhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19094911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmE6RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYgw/+N5UpD2rnBtauM3UVlWCVIFgjk1JKbxM5eiV5z9wRIq68f7YE\r\nceBHMmEzzAUd9uEYgwhOD+YWJrrGZNXPqOTsDgfjvSL4AtMOZ3MnX4PxBGUh\r\nGvOPSzzpN3D3E3yN/ft/5bBmLH9leiGY+s2kFRP2bI9/yorkizNaWOMSvxIL\r\nwuTSGPs/8+629cmLXTqroKYjazeVZH8JLZt6rjWTjwQoIxrxj7n+eElR/vSY\r\n4JI+SayZONTbei4LI+tiWQ3C8LPMtY6CtYEijhEMKRdEZ7lH6CAyHK4GxF4L\r\nn5kHMvJTRme0kTwgCdhGXxA2cB98StPb+SKXyt+9hz3YZqtHO3p173s9+CGi\r\naNNfUjA04Qn+WTZ+82Rd3sI4hXCQFFWEAqc3ah/CEv8VDzQCCCMDEFYMSh80\r\nJfSwCh3gD6DyrfIasOfLYRf1uucHe2JECJ4HVSI51fcK4EG+CmujWeZp83X+\r\n5+KPDsBL2+STRTitAznbKEtY+g1rl0lymcEyRotjQFV7TZ6aeRxLmag2IRb1\r\nfgSVnanWeQ60TMdAXCu4/Okg9Xz+TWQk6BnMelMZqaD+39qa70W35VgxHa41\r\nZQC1MXeiAHljsnF9N48plL3R3SJbUpDK1cnnl6lJX9OBIrLaDVcQaWKwHaI8\r\naiUFy+fIQDux0hmA9YImMYtLFRVb+3JjRKI=\r\n=mBkl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.2.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","inline-css":"^4.0.1","typescript":"4.3.5","@types/node":"16.11.2","markdown-styles":"^3.2.0","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.1","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.0_1670925969293_0.5796387749814031","host":"s3://npm-registry-packages"}},"9.6.1-iv-202212150202":{"name":"dynamsoft-javascript-barcode","version":"9.6.1-iv-202212150202","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.1-iv-202212150202","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"9b130221aa1afca549778d0d320e0812f606a3f3","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.1-iv-202212150202.tgz","fileCount":70,"integrity":"sha512-Tq8hjiETWfKgRH9DUdLIedBGQ/4HFKov5iXyTFX9+I/hCZZPbFX1e3q6LGM0f5wXz6midBVHo8c6bI+meZy5kw==","signatures":[{"sig":"MEQCIEwnfKV+zkQoSHEh5lyEOAT2aAJjeWnFbfW5YwpaCsnuAiB3B2lxPMaru9dswfdS7wK315ZSbYnS6yIF7+8R5iYLTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19032257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmvJcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxFg//X8WVFIOw6SEPnXMfT/T7IH5bLr/iPwQTECmuKwruRcqhMLCh\r\nx1r1S/+OnHejWr4pvdjPqRT4Ek1G5QV2ovc/unzZIwIy83hvWDTZBm1nxxzx\r\nm9PYxndXCofk5aa06uzQiXEGxpPD2nbBq/biVJsqvUSgBBOhq3Aa/vILYin1\r\nNlYn0+pSBDGPsP+opYwBu5miqLTh9Lk3hDrfjQppPAVNj+0tly00hc7fmBLg\r\n0P2fOsxJGNy5wfg6MLEih4S8Cn+Kjsh8iWE6PD3+VvuAFiC5sOUaU1eqsPmf\r\nNqdckmlj0z6LI0LZTihM827sFt5YvfH+AxMjU24Dhc2gXuJfDG09xQXnSFFA\r\n4notYppKDcSK+IpYI75w1wpNsy85SXSw22ZVs97mrhjhrhx60TSw31iSHzhr\r\nplSqg5FebHbjU4RNhhzVeMBNgHs050FHbgmGtrpUmK2uXNyo0EEf6AD8b1cs\r\n0CDle16vMHjTk5/JuLqf3IAO3/8u5gq/VfBf+aYHXXxJvElC8GnQiLyGZ7uO\r\n1x+W4j8bV0zA9aVG9MB+Td0Y9GMG/KAoi1c1YV4W6N40duoqVjCQhxbrgbi/\r\nV6+5IuQoaNDD2FH1ulNaChuZZyDNLJEeoWeZLuW9qQuk03bd64glimV2lViY\r\n3kW9nIqMaCN9Pr8tFjOb1ma8jupht2eph4E=\r\n=KJkm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a public CDN](#use-a-public-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- 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=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.0&utm_source=npm) \\| [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=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.0&utm_source=npm) \\| [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=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.0&utm_source=npm) \\| [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=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.0&utm_source=npm) \\| [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=npm)\r\n- 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=npm&&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=npm)\r\n- 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.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=npm)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.0&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.0&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.0/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n - [Optional] Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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**.\r\n\r\n See also [UI customization samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/ui-customization.html?ver=9.6.0&utm_source=npm).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.0](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.0).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.0&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.0&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.2.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.2","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.1-iv-202212150202_1671098972549_0.44389824444788006","host":"s3://npm-registry-packages"}},"9.6.1-beta-202212182159":{"name":"dynamsoft-javascript-barcode","version":"9.6.1-beta-202212182159","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.1-beta-202212182159","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"cfe49607c45dac72b7a5ec79246e7e485766e856","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.1-beta-202212182159.tgz","fileCount":70,"integrity":"sha512-uxK40wqKnFh4imec/ljSv2CTywBNOpPhPEX9DF6r/j3X4SFLu3guMeKBX4spm32hlij2d4dRbYHRdPvNC6h/Nw==","signatures":[{"sig":"MEQCIAa9Eneem9MXrvXMcptfYINteFJTani2pbZ8r5sdGmPIAiAHZjvoVr4IxopgCS37CFu0kVFeJv62L3MtFNv6VODGWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19032131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjn/8oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1DBAAmw86dYYCY5JbDgCS059/LVa9M9jHpIZ51gWI0NoOOoim1+OB\r\nWcO0egws4cL/otCKkE7s1DdtXa55D7iEIbAo43TfeP5/pnZ2w3TkLS2aiWpx\r\nSwNxOcpPSvo7o3DJc9iHTXVcuoKn4EuLLA99zKXZnI03dTUnZp77zaC1YlJw\r\nb+Qq5tY5mBaPtViy8F5lgcaWYZiKSTuqRWqcG3qPijtePpoNZHxFSwKRm3zP\r\naYjGGKbmadRhTyXJPwtfdOmMbAiKloBN7MgClmgg5bpK9JvL3Llpfc0tTiCU\r\nPk+0yQ7/tu5S79Ce72zKm/Hzr1a+UuxVscutKigoTSgfIP+Cm0FKtqLk7X89\r\nHQfbevTt24mdPTmviq5rmdYeiUFPpTEM7IhL3mADLP3Ad9tJrpiwnDgorJKM\r\nZYVTmJc1wcZyJ/xMRrkNHt1tEdJrgcR068k/aKjmQOLnjzla47HaAMsAL/0h\r\nyaCATt3j+14eVm0Tuzsbx9iq0tnaN3enXDSvjddf6icEucPedlz/to0cMjEw\r\n2bkBzhMxzYIqX1HhjlQGi8BLiCF2NB2VCryADfmhyWz/Uw18NSUtmUobtYvi\r\ndY2ld0ZHj7fOT04KH1OlaKxoEhhBdK/4xAd02w3/szyLfSTt/5JLRvGCYHrk\r\nSBVCMltd+KFgdc1vO9436TbLkY6EO5bNqFY=\r\n=pdZ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a public CDN](#use-a-public-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- 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)\r\n- 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)\r\n- 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)\r\n- 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)\r\n- 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)\r\n- 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)\r\n- 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)\r\n\r\nYou can also:\r\n\r\n- 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/)\r\n- 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/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n - [Optional] Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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**.\r\n\r\n 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).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[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).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.2.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.2","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.1-beta-202212182159_1671429928669_0.8978844556504899","host":"s3://npm-registry-packages"}},"9.6.1":{"name":"dynamsoft-javascript-barcode","version":"9.6.1","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.1","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"4139cc27f3593598579a2399b33df025fbc33ae2","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.1.tgz","fileCount":70,"integrity":"sha512-wAaCrihkiX7YudisJNUMy21/jo5BJUqIc+mW54iNeJ9I4qDowfYA07uQEfw3XKCNUVRE50rbg4zGQIaH4Cb06g==","signatures":[{"sig":"MEUCIGQ2zil36OLTCNc/s+kBdsSe56hCXy65V4yRBbzfT03xAiEA/sz3xt+hZH+2q1IbYwJMkkQopsHIA4SwxWSP8VL00LU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19032113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoA28ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEqg//Tf8CIvtyb9AyAi1J7iNmAXSef6hRSG4LlD1KX8az24U2aAmb\r\n7IHs9s1cdY58lgKkfZTpRxJu+4xYJcFAylkBlzcms11yofCgDP13imBUl2Xs\r\nf6nOMQLUMc0CLZDK7g0diqv4Ofs12OMXKs6X/nlVZxZeYp0YTtvNn38zFAvh\r\nY6g4bvG6CaptNyQdHxqO+V+94zmkEP+zx155uZkAoLaTDAL0up59fzeG47zn\r\nrHSryp/1tpBH68iP0/xzccWf0XVcl5jZloU4Vq+BR//n+GHCj3Ry9sh4m3Xy\r\nnCuRaj6YsYeUCdeOAuyfgSDaYHV01wPBV5iH22HL362jpPJO1b4v9VwiIzLd\r\ngYN9Py/R2OjghX2yFFm88XyJIDzVCif/ueTahEj0QlGTOWlL/VPK2v6qGO9b\r\nUyKCfZw92IyZWB4QYoEBcWqRfwjptY2s8S1qjfPD83VLDBDFjZINPccj8opt\r\nXa7KTqKVQJXSqvfxLgXpKbsKrCFnem6DNBLFb0GIkh9O6yH7f5icr4aXZqbK\r\nXAZSDVsmje3t2afYCz1IkjBpFTAdHa+wW2n6OhXtowrUMcXO/9b59Z5uX+kZ\r\nYGyiVpnpr21Kpio9Zee5MFUPVvUfhmM8dBFD9TsM6lwSKEw24nbu5aVpuVZh\r\nEgwnnSYTnfQQo9CU/r0jul16LgTakPjs6Oc=\r\n=1ioZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.2.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.2","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.1_1671433660245_0.27552104516478737","host":"s3://npm-registry-packages"}},"9.6.1-iv-202212230033":{"name":"dynamsoft-javascript-barcode","version":"9.6.1-iv-202212230033","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.1-iv-202212230033","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"9d3e557261e6dd827585be8dcdd969961c79cacd","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.1-iv-202212230033.tgz","fileCount":70,"integrity":"sha512-YFQ+2akgBnAFKuoWxYpfkgz/zHQAu3pKCHb0Fjr7h3IvZX0ik2Zi9jXbLt9zXk9r10C86ioAWwuLV70mN6mpuA==","signatures":[{"sig":"MEYCIQDv6jFDftrdmFiwBJ9yi9EXCgWj3G7F5TVvQy7OSpWKoQIhAMICsMoC6N4OWDcQIxSpvvriQnsnIo+5xk++typkvVnk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19036588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpWleACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4cg/+OPkwKVo8mbVxCKl5UkF/t6MoVc8qDjG3ieH7kiknTA8wK8ep\r\n8s+wiZ48Q3k3KPyPOsslBNtxQulRJVBnPBeIJS+NK4mCX8LflPfHaq2w53ip\r\n/VTNadRokEt/P1WMuhIDeJemiJ4gqYzOlFkqmrl6RvkPKVTZ1MD/TCcASw5l\r\nvyyJzsnAFH7ykApjjJUCv8/torh1a9dLyTGcVzX5THHKgJmRYFzZ55+wPi9L\r\nyC3FU7fjt48qE0wpnGC1lGQTqndnC/f/nn6dW3Vgn9ZbEIY5bb9hhhLBuc0R\r\nICy7X65OmLArC7beWQIF//nLjerL9fVnDzY1Nh7tzILSyn0sz6NSaLQ9nwKK\r\nADbfiNnPvri2lCLIQ1o6w5tM29LRlBlnl1Z62GmIIoMznlIW8F8xTjiD+o0J\r\nF03nMOyIkuNuKoEm6TjimebHC9MyFPfG17oPKTwSH1iFQaWe2/aSy9svHCzi\r\nQnngsxGeSgWNLhSXhq4Ln1xeNsuLkjzmVD7YFYjn/DWJM3mj4lcJmLviBxEk\r\nBicDV3G//D0hXpPn6YypEBmayKuo6BMLNZwSZL838XOxy5G30NHo0WeTRrcw\r\nAd0pVdE5K8Jsw4L9XWttSVM390ZTyVfK2KWNaKOPD6MNZo15VxGFPKSZSMfu\r\nAEfsGvd07FgmC5ndl/ArKZxP8nJsCkkVfcA=\r\n=ocFG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a public CDN](#use-a-public-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- 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)\r\n- 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)\r\n- 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)\r\n- 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)\r\n- 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)\r\n- 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)\r\n- 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)\r\n\r\nYou can also:\r\n\r\n- 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/)\r\n- 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/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n - [Optional] Add the camera list and resolution list\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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**.\r\n\r\n 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).\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[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).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.2.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.2","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.1-iv-202212230033_1671784798584_0.20736004668480956","host":"s3://npm-registry-packages"}},"9.6.2-beta-202301140102":{"name":"dynamsoft-javascript-barcode","version":"9.6.2-beta-202301140102","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.2-beta-202301140102","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"f29e5b9f0a58f167645660f4655b4dd69adf7f6b","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.2-beta-202301140102.tgz","fileCount":70,"integrity":"sha512-LTx8ewKyvn/O1XIK/uhri8bZ4g6d268ljU7wUQjY9WHPWX0o//TjnfcNXJ+/omMSlqyDwNeVyTgXHCpCotV2OA==","signatures":[{"sig":"MEUCIQCgrMo2xAtGZxBIFumON4s8E7QgvbPCrtoEPnN15I73uAIgHLBpNErbmURJQvfFd8P/qkpDEDYELh3wRcnV/QXbEcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19046690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwnD1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrivA/8D6cay3nqNL1D1xrPlgQRMft+PzCAxPA2SR7KqCBeoYQcM8tV\r\n9zoJwJtQOmn1qns9J0x27P/5u/B77Wj8adGRfyo3G1liBzsIaqxU1VaRWfly\r\nrrryUXDETT3HlCDncoGEJBQPQHjI5gTVWIxn0bcHfMLqMjNyu7N04di0vB9O\r\nZYP/mzvPoY2adxZ3gISrynzRIIYtk8n+8st6t43mo7SXFdSiYgbulRx61SiB\r\n1USAN9qo0agMCrh1fpsPSEDrYOl+V/XzlsfHGD314VBX10im1VabL/UPoAIz\r\ncgEMLdQTt0KkQIWPsPEX3HzdInAQyjTJX108E+GKMTFXTc+9e4M4Tc8+dDf6\r\nc24nyIedESZPyyeo/118YuIiYYGwlqQBy3RrlFYxV+j8AuD+hMn5Era3h9dy\r\nYd71nbLgxAkrDCXly187ZpWX+CSNL/tnHdsqsbLC7FmBOXZsYaU08AQXLlsg\r\n565glJg3gtzF/JOKscAeUh03N+LTO04aKv4zl6mnXGshl2ib9d37otBiQMJJ\r\nYJuy6tTdm9ecAviCoRZUnArE+td6CX5hJviHNQPOnuXOsAo/NHM+zk3sDGxo\r\nFlxC7c5gsixCohZiEb4Ls9dFmRNSD/PVX+tsS7r8xLfNOqA5lXT0A/+fvO3Z\r\n7ebeKULJEdnWuAgW/G/GkBc5IP0qJFo1+rc=\r\n=KNiv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a public CDN](#use-a-public-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [Modify the file `dist/dbr.ui.html` directly](#modify-the-file-distdbruihtml-directly)\r\n - [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)\r\n - [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)\r\n - [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)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- 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)\r\n- 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)\r\n- 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)\r\n- 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)\r\n- 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)\r\n- 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)\r\n- 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)\r\n\r\nYou can also:\r\n\r\n- 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/)\r\n- 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/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[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).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.2.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.5","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.2-beta-202301140102_1673687285000_0.934520382222503","host":"s3://npm-registry-packages"}},"9.6.2":{"name":"dynamsoft-javascript-barcode","version":"9.6.2","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.2","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"9ba97a6c25febdc5c77536d02469b70c5b80655b","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.2.tgz","fileCount":70,"integrity":"sha512-bvIQlzyBQYl1lvoLuwoBSqg6uCOZ3pALOGeocwUbIqzmEMpfN7Y5Oxc3KZVSSsSART0vvCPNrguzCLlbtyRcSg==","signatures":[{"sig":"MEUCIHqpPHo2RdZOGIbnsu7btHfCfBwv5OfDZAbt2Uwa9N6WAiEAk3U0YoQ5OJtR2UAmgL+shu18kOusZ6YubcEWYjzSmv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19046672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxOUSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJMg/+OyjBFNrZCpM/+XmnidwfYiVipdRJM7HWb6J8uf2SXrhZHiTH\r\nESCqkpd9r075iCVPfp0ceDOrFZhWOER0lvce0gHtSLQL3SpNuHZVH3JJpwqE\r\nicRBLYZi7alEvSacZ8kpqkFlrY6GsYzjjdNnbT3zPVD71J9h69Xw1qjnGSgb\r\nxGLfH/DVZye6RuCH1CQa6Hzbed4De+yPvqsIF1T1F4CS9hx8HbBmYfyMMTDS\r\nuOtOP+cp1IhdcdciWSbXuU//IyCaxhxvNRziG3tYPg9FOw+9ZloBZWVNgmsJ\r\nn2T+re6fiCnFYwgThJLuc1q3A0aaE9zc0Ag0Yehj5vcXGi7LrrwnbmFnMMuq\r\ncsI9t9+dtr7M7NPqGtxP+GCwZRgimAiDHs0FT/N48McB/tcKE1hPnOknLva3\r\ndwo1tQcrd4ChjS4l05j83c1jMO1ku+8GVdUY6ZD70HTEpITeDD89axe0SOp6\r\nGM3FoR8h/jfy8gH+Ih1AtcuIC7bSCVad7KDh5H0pvd8dn9d4OhujpAmCujML\r\nWBdQcnAvBoA9HwwGIMJ5aEejAl9eVEWwmaN0PsuT4fBiNRQa+NZ24sh5QpEF\r\nMOc3FD9jLxaFtjDtby80LDoe/cZT6prCEHiDG6gszwDdbL/CK4bN12LJteOR\r\n1FUMWIqu9GyFXAAlBtHyOva5/MR2cRLJP4k=\r\n=r2Zr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.2.0"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.5","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.2_1673848082072_0.3246518817404018","host":"s3://npm-registry-packages"}},"9.6.10-beta-202302201925":{"name":"dynamsoft-javascript-barcode","version":"9.6.10-beta-202302201925","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.10-beta-202302201925","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"2107ebfe3eb2331779916bf4dbfad0e596dca8be","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.10-beta-202302201925.tgz","fileCount":70,"integrity":"sha512-YYuoKPODgsQHHA3iMocFV06vjNlQv3FSUFkfaLAJlhCN0gerTQN3omQI1xyjCgwJYsrpEXoFbaKwBk664ogYAA==","signatures":[{"sig":"MEUCIQDONAR9+fjyPenz5I4fqaVLmUOhU54QczPtXyvUek9M0wIgOPpcNfqjY/ckl2r7jGDAOZrwg7ylYge8DXp7X66UWFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19068265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9DsdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPJxAAoRHFgyfPije2cJkAWoJhJUg3uePT+nX4LRsykFFl+8b2vC2i\r\nhzJ9Q0IBLfCcpQbng57hcc4EnHOK1UgWE46wBZA7yNg6RtCQoKQbTwtZxaUj\r\nmVa6SVvHTXeosgjh1TzxrK92ytR6Tq+yRtbobq6k3i1hWguE865Yq8OFmpez\r\nsOGqE/T0ZYnbvJKB9gJNIdnxF5lwlDaBu0FtuKO7Q4TX6QtcjQIropuRPXli\r\na3NtIpHZTSrJVxCuE9iCXDd7dlblLe0pTqYLncUBzHcffhbU3boZMI4je+aK\r\nMyJ3zx5Lo/5tvxLlJDYvHETvgtNc8z7SWTvbjvprRB4P4CDNsQ80yuEhJ6PK\r\nUNqnZJL1U93FPFeU6HNYVM0jgjXJ0ZWcbEv83Dvk5Va3B1A3FpLWyUyyw5SM\r\nd/t93xSMc3G0pKO2DjfIk3LPF63H1tHOGCR3RWNQSLVLf6h/bjv2tI+3hYxm\r\nNmDY/PFBnk69Q0wXGFKxhq6xKYxCTBJF95/ywVzLNeoiujolSqCP0FfZxD5V\r\nZk78dCS8oZqWwbOGedHKVqa0mBMTZKIR9OPyugfPXPCGxJPk9tBYsyWE5Gfp\r\nJTCXubnI5/PbFH/B/NuzJvQl7CEIrmN/dba7mnTK+KFokgFxucAzEEMFZeC+\r\nB4MLE4qslmW8wjTgyH1hUhpRWKxrORmr0tE=\r\n=WSNR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a public CDN](#use-a-public-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [Modify the file `dist/dbr.ui.html` directly](#modify-the-file-distdbruihtml-directly)\r\n - [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)\r\n - [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)\r\n - [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)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.10&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- 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.10/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.10&utm_source=npm)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.10/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n**Pinned Message:**\r\n\r\n- [Temporary solution for iPhone 14 Pro Max rear camera not focusing](https://github.com/Dynamsoft/barcode-reader-javascript-samples/issues/99#issuecomment-1407584605)\r\n\r\n## Building your own page\r\n\r\n### Include the SDK\r\n\r\n#### Use a public CDN\r\n\r\nThe simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The \"hello world\" example above uses **jsDelivr**.\r\n\r\n- jsDelivr\r\n\r\n ```html\r\n \r\n ```\r\n\r\n- UNPKG \r\n\r\n ```html\r\n \r\n ```\r\n\r\n#### Host the SDK yourself\r\n\r\nBesides 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.\r\n\r\nOptions to download the SDK:\r\n\r\n- From the website\r\n\r\n Download the JavaScript Package\r\n\r\n- yarn\r\n\r\n ```cmd\r\n yarn add dynamsoft-javascript-barcode\r\n ```\r\n\r\n- npm\r\n\r\n ```cmd\r\n npm install dynamsoft-javascript-barcode --save\r\n ```\r\n\r\nDepending on how you downloaded the SDK and how you intend to use it, you can typically include it like this:\r\n\r\n```html\r\n\r\n```\r\n\r\nor\r\n\r\n```html\r\n\r\n```\r\n\r\nor\r\n\r\n```ts\r\nimport { BarcodeScanner } from 'dynamsoft-javascript-barcode';\r\n```\r\n\r\n**NOTE**\r\n\r\n* Some older web application servers do not set `.wasm` mimetype as `application/wasm`. Upgrade your web application servers, or define the mimetype yourselves:\r\n * [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings)\r\n * [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)\r\n * [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)\r\n\r\n* 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.\r\n\r\n ```cmd\r\n Cache-Control: max-age=31536000\r\n ```\r\n\r\n Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).\r\n\r\n### Configure the SDK\r\n\r\nBefore using the SDK, you need to configure a few things.\r\n\r\n#### Specify the license\r\n\r\nThe SDK requires a license to work, use the API `license` to specify a license key.\r\n\r\n```javascript\r\nDynamsoft.DBR.BarcodeScanner.license = \"YOUR-LICENSE-KEY\";\r\n```\r\n\r\nTo 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.10&utm_source=npm&product=dbr&package=js).\r\n\r\n> 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.\r\n\r\n#### Specify the location of the \"engine\" files\r\n\r\nThis is usually only required with frameworks like Angular or React, etc. where dbr.js is compiled into another file.\r\n\r\nThe purpose is to tell the SDK where to find the engine files (\\*.worker.js, \\*.wasm.js and \\*.wasm, etc.). The API is called `engineResourcePath`:\r\n\r\n```javascript\r\n//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files\r\nDynamsoft.DBR.BarcodeScanner.engineResourcePath = \"https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.10/dist/\";\r\n```\r\n\r\n### Interact with the SDK\r\n\r\n#### Create a `BarcodeScanner` object\r\n\r\nYou can use one of two classes ( `BarcodeScanner` and `BarcodeReader` ) to interact with the SDK. `BarcodeReader` is a low-level class that processes images directly. `BarcodeScanner` , on the other hand, inherits from `BarcodeReader` and provides high-level APIs and a built-in GUI to allow continuous barcode scanning on video frames. We'll focus on `BarcodeScanner` in this guide.\r\n\r\nTo use the SDK, we first create a `BarcodeScanner` object.\r\n\r\n```javascript\r\nDynamsoft.DBR.BarcodeScanner.license = \"YOUR-LICENSE-KEY\";\r\nlet scanner = null;\r\ntry {\r\n scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();\r\n} catch (ex) {\r\n console.error(ex);\r\n}\r\n```\r\n\r\nTip: When creating a `BarcodeScanner` object within a function which may be called more than once, it's best to use a \"helper\" variable to avoid double creation such as `pScanner` in the following code\r\n\r\n```javascript\r\nDynamsoft.DBR.BarcodeScanner.license = \"YOUR-LICENSE-KEY\";\r\nlet pScanner = null;\r\ndocument.getElementById('btn-scan').addEventListener('click', async () => {\r\n try {\r\n const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());\r\n } catch (ex) {\r\n console.error(ex);\r\n }\r\n});\r\n```\r\n\r\n#### Customize the `BarcodeScanner` Settings (optional)\r\n\r\nLet's take a look at the following code snippets:\r\n\r\n```javascript\r\n// Sets which camera and what resolution to use\r\nlet allCameras = await scanner.getAllCameras();\r\nawait scanner.setCurrentCamera(allCameras[0].deviceId);\r\nawait scanner.setResolution(1280, 720);\r\n```\r\n\r\n```javascript\r\n// Sets up the scanner behavior\r\nlet scanSettings = await scanner.getScanSettings();\r\n// Disregards duplicated results found in a specified time period (in milliseconds).\r\nscanSettings.duplicateForgetTime = 5000; // The default is 3000\r\n// Sets a scan interval in milliseconds so the SDK may release the CPU from time to time.\r\n// (setting this value larger is a simple way to save battery power and reduce device heating).\r\nscanSettings.intervalTime = 100; // The default is 0.\r\n// Sets captureAndDecodeInParallel to false, which tells the SDK not to acquire the next frame while decoding the first.\r\n// This is another way to save battery power and is recommended on low-end phones. However, it does slow down the decoding speed.\r\nscanSettings.captureAndDecodeInParallel = false; // The default is true.\r\nawait scanner.updateScanSettings(scanSettings);\r\n```\r\n\r\n```javascript\r\n// Uses one of the built-in RuntimeSetting templates: \"single\" (decode a single barcode, the default mode), \"speed\", \"balance\", \"coverage\", \"dense\" and \"distance\"\r\nawait scanner.updateRuntimeSettings(\"speed\");\r\n\r\n// Makes changes to the template. The code below demonstrates how to specify enabled symbologies\r\nlet runtimeSettings = await scanner.getRuntimeSettings();\r\nruntimeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED | Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;\r\nawait scanner.updateRuntimeSettings(runtimeSettings);\r\n```\r\n\r\n[Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/yfkcajxz/)\r\n\r\nAs you can see from the above code snippets, there are three types of configurations:\r\n\r\n- Customize the data source: This configuration includes which camera to use, the preferred resolution, etc. Learn more here.\r\n\r\n- `get/updateScanSettings`: Configures the behavior of the scanner which includes `duplicateForgetTime` and `intervalTime`, etc.\r\n\r\n- `get/updateRuntimeSettings`: Configures the decode engine with either a built-in template or a comprehensive `RuntimeSettings` object. For example, the following uses the built-in \"speed\" settings with updated `localizationModes`.\r\n\r\n ```javascript\r\n await barcodeScanner.updateRuntimeSettings(\"speed\");\r\n //await barcodeScanner.updateRuntimeSettings(\"balance\"); //alternative\r\n //await barcodeScanner.updateRuntimeSettings(\"coverage\"); //alternative\r\n let settings = await barcodeScanner.getRuntimeSettings();\r\n settings.localizationModes = [\r\n Dynamsoft.DBR.EnumLocalizationMode.LM_CONNECTED_BLOCKS,\r\n Dynamsoft.DBR.EnumLocalizationMode.LM_SCAN_DIRECTLY,\r\n Dynamsoft.DBR.EnumLocalizationMode.LM_LINES, 0, 0, 0, 0, 0\r\n ];\r\n await barcodeScanner.updateRuntimeSettings(settings);\r\n ```\r\n\r\n Try in [JSFiddle](https://jsfiddle.net/DynamsoftTeam/f24h8c1m/).\r\n\r\n See also [settings samples](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/parameter-settings.html?ver=9.6.10&utm_source=npm).\r\n\r\n> Find the full list of the runtime settings here.\r\n\r\n### Customize the UI (optional)\r\n\r\nThe built-in UI of the `BarcodeScanner` object is defined in the file `dist/dbr.ui.html` . There are a few ways to customize it:\r\n\r\n#### Modify the file `dist/dbr.ui.html` directly\r\n\r\n This option is only possible when you [Host the SDK yourself](#host-the-sdk-yourself) instead of using a public CDN.\r\n\r\n#### 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\r\n\r\n ```javascript\r\n // This line only takes effect before the method `createInstance()` is called.\r\n Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = \"THE-URL-TO-THE-FILE\";\r\n ```\r\n\r\n#### Append the default UI element to your page, customize it before showing it\r\n\r\n ```html\r\n \r\n ```\r\n\r\n ```javascript\r\n document.getElementById('div-ui-container').appendChild(scanner.getUIElement());\r\n document.getElementsByClassName('dce-btn-close')[0].hidden = true; // Hide the close button\r\n ```\r\n\r\n#### Build the UI element from scratch and connect it to the SDK with the API `setUIElement(HTMLElement)`\r\n\r\n1. **Embed the video**\r\n \r\n ```html\r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.10](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.10).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.10&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.10&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.1"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.5","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.10-beta-202302201925_1676950300924_0.21231817364042826","host":"s3://npm-registry-packages"}},"9.6.10-beta-202302202213":{"name":"dynamsoft-javascript-barcode","version":"9.6.10-beta-202302202213","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.10-beta-202302202213","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"d7450b263956b3b75dec064076731f8c30a49d45","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.10-beta-202302202213.tgz","fileCount":70,"integrity":"sha512-Xq5LTcaCpONljTt58HRnxYqJIz1QxLeBZ9P45BoWceSrDXUEvwkWhZQrXyQp3JJ9AYfvzmVAWKYbkSwyz6ax+g==","signatures":[{"sig":"MEYCIQCTsG4kUZT/kduB+tyRGvmMDLqWF9iJw9Lj3+NUL+9yQQIhALTBtIy5lwEdbztlSPmXTiWgFRlLHEuRGBsBR+ZZ/weu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19068040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9GI+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeBw//QNiD30wkN2aCkMeyBBcFTaIt9hexvhNV+JiTXiWcig3c1KDh\r\n1VBg5OfbRVVVJh3YdVnRf38X7k0dmPamGXLtmv6JHvz2CZQ9kdL6cO9SrAry\r\nQBPStMFyq51CcOVAvTouRtJnvU5lYDv/02rr6Po6i1xb9NeTd5ozliFdXWse\r\nU2itxyQkcEoFdwXSbjKgDQkoPPb9swtkkvlNjgwpKpzHX8obL7MGY9g6Me58\r\n80LXVL7bxl9fYCKpwGMq1xxDunyQwxNhYf+ffuweZGvS8U7SrBanogjnCsNN\r\nY3gulhjT3isofpFSwwvvT42gprcQuKXiq4COiwaAgBO4Msd7eKy1z/kRNRIS\r\nnS5Zukmal+g0r4E0mBIw3StKv2c/UAiWWRp961Ma3XVffi9MK2oPop8az+DE\r\nOLZyfuj6PnBGALXHoYdX8hwNjgrvA63UqVbByMW0GBqiEui28Icx7lcezucs\r\n8SrO65yxs3wxLYIpfsy3OY6purcAstl7LN4/AFFuDd1sVuAzxIPUBcAp3frR\r\nIMPlYx2cSaNyND3YQ4w4A8+LyWR6YPU6R3XxC9qPGejRDQjFNMLHzCF+tucr\r\nmsOcZEyDV42JhJPDfe1qyxh/SOqh/80ctTPBS6X0mVdh4SCyEVoO7fXU9olH\r\n75P9DQGa+zxqkFtPYgQ/+GkoBYuSTYHFCLc=\r\n=uj5W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)\r\n - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [About the code](#about-the-code)\r\n - [Run the example](#run-the-example)\r\n - [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Use a public CDN](#use-a-public-cdn)\r\n - [Host the SDK yourself](#host-the-sdk-yourself)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Specify the license](#specify-the-license)\r\n - [Specify the location of the \"engine\" files](#specify-the-location-of-the-engine-files)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Create a `BarcodeScanner` object](#create-a-barcodescanner-object)\r\n - [Customize the `BarcodeScanner` Settings (optional)](#customize-the-barcodescanner-settings-optional)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n - [Modify the file `dist/dbr.ui.html` directly](#modify-the-file-distdbruihtml-directly)\r\n - [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)\r\n - [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)\r\n - [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)\r\n - [API Documentation](#api-documentation)\r\n - [System Requirements](#system-requirements)\r\n - [How to Upgrade](#how-to-upgrade)\r\n - [Release Notes](#release-notes)\r\n - [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.10&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- 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.10/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.10&utm_source=npm)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.10/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.10](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.10).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.10&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.10&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.1"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.5","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.10-beta-202302202213_1676960317855_0.2895619648278036","host":"s3://npm-registry-packages"}},"9.6.10":{"name":"dynamsoft-javascript-barcode","version":"9.6.10","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.10","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"f5d8058860f48d707d98dca2494d3e4ceeb21849","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.10.tgz","fileCount":70,"integrity":"sha512-kfN96rNMCYZHZiH7yW1n0PS/b0/r6WAt7DQHfVr4Z6AMECOAwXI1bgVJDbnBJ4vo2DZPHDHeIREWQTTu9jOuXQ==","signatures":[{"sig":"MEUCIQD6yz3TVGVK76L4XyDn6FB/qAbsukgpjsgCYZ766NLVFgIgfYM3xNQxjiatuzzoFP7ReAnjW2jrmMDQLXDCKGyUOsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19068022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9GeYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAvA//a+KwlE/kE/vaJMuFbX5p76gQkE8WDU6e7cgnIP46T39bUuKE\r\n2sZRUY9CiMSVx8sBax4KsVlxrEEjuefs9Ro4BZhnszqtXbfgOW4gDSMgyNTz\r\nAQnBbb2UR78F2prxe66yKI1uROleuieUvX+fIGqBa/5gW1IZ1O2Dxqn0mYER\r\n5pEPQGPFCgZBMscUiHznWFzu1+DXmi/B+Fg/tPiwKJfcZaxjzj+ed/SkI34S\r\nWEpNBQp+h2euNqYKbs1vICiKTIKwePHWu6x3hBR17ikS7Lwx8fyPCCb80ArM\r\nXR2ef7W18iz9KFDLAwU55RftD8bnfMxBh21WxwnWru49ZjC4JfkJeofhuYez\r\nUbiQyzulc3Dw1C9gFmkwMY0bNYIHOO2ChmgpSfEsUG3gDDjeJ5Zo1U2aj25D\r\ngqPaMppinOP6gKy6EMHq1ksXRMFELSA119A9yHbwxjItowPWV9tzk4majCpG\r\nz54zbvg0l6cQd+LkFK16Kcgb0kpmirVsbW42naJES9BComQSwKYEfGuWwSMO\r\n2yZXOTK11kG6V3kPcSrnUBe07h9vza81Wh8eYnKIFv/eFQH3BepFUKYwcRMu\r\nOdpCMrnIEDLtcqbkqhLuMnQQ6Qwzib9rncqTUX3Inbf5VzR5I8hAR0svsL4Q\r\nXtF8UtY7TXW3mG0g4IMA9R81CdbQ3DVBABM=\r\n=n1Cy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.1"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.5","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.10_1676961688119_0.43119142463390303","host":"s3://npm-registry-packages"}},"9.6.11-beta-202303121944":{"name":"dynamsoft-javascript-barcode","version":"9.6.11-beta-202303121944","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.11-beta-202303121944","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"4fc70f1697291556ccad002b8c97df36091e859d","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.11-beta-202303121944.tgz","fileCount":70,"integrity":"sha512-i0o6SBTDERxbagDJk7nvtcRneEhFgyD5P46YhIX29U2qoWic26qZuvBZxFgy5Pz/nmhgmwMMcRw59xHR2ZgjdQ==","signatures":[{"sig":"MEUCIDTgNu3OsG23V8nZnVXc5hXsOM+lcyfACtX8zVM1wWxAAiEA7q1QCrsqFKE3b/JgTrHmLe6e4jqFbjhJ3nRq0LphVsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19071158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDo9yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXig//T0vp7j8QJKa8kgzKrcNweaQHL+cGtZrLUMz5WqzP6TFcSsC5\r\nOhfQAiooBd6hM/8NwBrRmPe9NS4kuIyVjmgtez7oFANCwkYxphR7bwAQuypK\r\nseG2ki8L3nhQBnUUHn3zTnQXyznc875ilcMqIutSoR6KjHv0gNODKWKOM7ak\r\n2yNMaG7ijDwXtL3TJmBGj7e549yWDmrlBFk076j6UpMORr7f4fGPBtv6U/gj\r\ntY/PA2IX+eCykaO0I9/HjHsYIs8BdoZrw8iBeer4heUYETmOc/9w4sLUxFmi\r\nWf2sLycyyKefyr0jK0FjjTRmxUcAsNBNHPRtmwlSmVPFJZK7KJ8d0PiV0o1G\r\ngh1IoLMly0LZ80xFcfGVJe7MUry1FU8fsN0pKmR1e+xkDuQOLwZwPxQfL5W6\r\nv7NRshUTVY7aGw+kO10lms+S5qrxrDoSzcFx/EMRJtRjvtKoLKB1cuaOoT/f\r\nxOOauKK9zBEBtGlCvYxdhf9IJ1lbdrkoEzqv0uiSSpJEnZuTnklWWogtt5WT\r\nyiat2r60Y6qnccByovLJKZBI4+zpzaWeY3TEM4WH6rhf9rTQGZu8OW/RUrSk\r\nWXFLByGiX4NMKQ4gTM5scCURFcwI1WMy5FGGOyk4F2KG5H5asRkuZ83QzewM\r\nPpLmsH5wC8GWaLGz8Zw5jaqs6a7IkIqraiM=\r\n=4UQE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.10&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/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.10&utm_source=npm)\r\n- 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.10/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.10&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.10/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.10&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.10/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.10](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.10).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.10&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.10&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.1"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.7","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.11-beta-202303121944_1678675826064_0.019916113451251327","host":"s3://npm-registry-packages"}},"9.6.11-beta-202303122340":{"name":"dynamsoft-javascript-barcode","version":"9.6.11-beta-202303122340","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.11-beta-202303122340","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"1b89df8ed84fd2500c8bf336673e46d81f42960a","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.11-beta-202303122340.tgz","fileCount":70,"integrity":"sha512-8+znoQIjP/bXj08oEwwXAYY2smnhaqRafJz911jT4JDK2Lm89UAnKhyMAx1635PzQF2oVOLM6nmXq0js8QZ+Dg==","signatures":[{"sig":"MEQCIC3cUxx7cVU6FY3CFNStwVBAKAXyqcxpcGLrWht9MB9KAiA9TWNpv7ALZMlU/TVg6oJq3Ol8AOVLaFg0a0CeoKzLXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19071158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDsa/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/4BAAjuA4AdJztipIuCTKQnWVaWDjRbAldxESd8FAtSnGlDDMm2wH\r\nkWEgYSWjGyAPcPBrH0uugUfH6sKhlnNgJwCaw4AXdwCv16CpuJ++JjTHMuSs\r\nxE56zOXR8MApAcFpw7yA/SRo7xEuKkh7fu9ogoTKruKUS1puMHgJTOdd7rDB\r\nLs8S2EzrML9cl/sTV3vk462Tr5wyVHyML1R5LuCMnptWER4ACis7n4Ma/it6\r\nnKs4t+1bb9cD1NDLpuvlwvNTaC/k1Xo1Fs/v4NmFioAMj81VRFlUun3jpqlM\r\nA2lsP+prgE4YAH6YDO8rllcf/dQqiKQxeAP6H78sStRz01EJ8ysrnpjXhM6u\r\nnbyprkv4ai39Tv6Iu9ARDmd/5rh79ZcKVHJxzERJmUDLamCG4/9MB4mpltdQ\r\nuPqArGzt2GwV2I/JqTsCk5YHrk/rAvVwwh+M4QLB/xcyMXl2l21MvdpYVBjQ\r\n+5WL2D+762JTNSmjNTNVPvm3DCQLghw1Us3tww24Hb7YXXb+oR5PFIcE5wMz\r\ni048i1dcx7oqjVRV40PN3lwS/GQqfdKumkrW88bbewCtk2SKtXNIaPjp3+n7\r\nO8k81ArY54tXntTN8X3oY30TKzTu8DdqxxhALBNHqbhzLuJOnsmeYtdnOmJc\r\nRUusv/me4BoxVf8Iap+xYzZj9WVd3bPEPfM=\r\n=1wTL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/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.11&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/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.11&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/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.11&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/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.11&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/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.11&utm_source=npm)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.11&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/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.11&utm_source=npm)\r\n- 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.11/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.11&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.11/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.11](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.11).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.11&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.11&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.1"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.7","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.11-beta-202303122340_1678689983169_0.8805352395528221","host":"s3://npm-registry-packages"}},"9.6.11":{"name":"dynamsoft-javascript-barcode","version":"9.6.11","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.11","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"4d0c28f5b56d631fc15d1181ace3652e42811d22","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.11.tgz","fileCount":70,"integrity":"sha512-oUvzDd5maX7JfyOPQElZWy8EfJGQ1pNEOmgjWp4zfxQ2R4mNqH6CpPKTU78v6giJSO4URKQJ5xGtNTFU/jObGg==","signatures":[{"sig":"MEYCIQCeF4Om9Nm+9KBWfRhLTbONnGxrRHxLzkuBBSUooCQNVgIhAKNgVe43Yt7y4uMQTdNNUX2N3SKHmjnHwmTDCmCwq2Z5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19071140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDtCOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr65g/+InbailJ6kctDWsf4HAsFHrNIuePEsEU0uD5hxuTpRFzPHyKG\r\njPfKONODOf9G8KoVoDc8flH/MRzNev/dKBezsEUBX9iRpJ+WDVuViFjbc0zI\r\nbPHLL+GRTDqYVNWgXbCBlJ9JnajpdEv8cdrwkNxD3dC+aXEVEjfr0hJ4J9S0\r\nrItep/SfeFI74D9QmRI4s2vGRhfJt2NcCsTKFcWxewTVX/rUyH9SQhxehBDK\r\nPeMXqcM+diGXKcYgIgfUrNWsGQhOlE+/MCI3atKsECEvHOP2rV7Ajc52m2to\r\n3pbQWZCaaaOKX+OG3S6DL6p4u1QkY0gxXydkHaZ8b6fMbXK5cU1e8KALILJl\r\n/oPcObyjCOJ9RuAxL2c2RUn6OfERvPas4B4RfNiRbRBTswOnilznUP+5s74o\r\nkE2+mHJYc6rhW18Mgh1+nYE5mGK7DpxL3KyPCxCR1BsuOClcFKZnY+E/82Hs\r\n4rPhZEB8bjCd+BJj8SSTvBu1WWzXFxJ6BdaiPzjYTZTqVYupka9vkDPhiG3f\r\nonzmVpQkmjUbDanzERJiS/mP0K7BNzuNguBbDK8Av/p31ARfS4xt3h3Tx49/\r\nuLfKYgrHKF1NPODShvFdOidur03xYBaogi/Bog/TexuDk1aD55881feqC250\r\nqA6YdyK0i/ZKmSj+6yaJn66NdzwLlXWu97g=\r\n=N+ZB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.1"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.7","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.11_1678692494112_0.05197425195513916","host":"s3://npm-registry-packages"}},"9.6.20-iv-202303280023":{"name":"dynamsoft-javascript-barcode","version":"9.6.20-iv-202303280023","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.20-iv-202303280023","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"0d3874729dd015c4d15adbe282f2b22f0c1f2188","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.20-iv-202303280023.tgz","fileCount":70,"integrity":"sha512-paAKMCNF5NR2bnupT9jzjfXKwgYTNJgD0bEyanrczNlt3/8DFyxhpT3GeTPi/i8Ju8D/U+63cJ+77F4nUB+L6Q==","signatures":[{"sig":"MEYCIQCNJ0V6GEqR04PE3n1K7RDJCTXJRWBqXDhIvAsljap0QwIhAPocBZ49irgBPY7zDxhexAucI+8f/iV44mE1xjY8T3KC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19067796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIpcSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOwRAAmz1+GS3vkorgMx6rZ8T4kJj9kCu2X4EoEPdELMCE+IDJBHqh\r\n260ynZ6jZ7SIMtBNLiHc5HD0QU+fMkWIEsFZpR5c+RioCY6g0h1/ge1X/R3v\r\nHkYM9kEntsUZwG0d6g2Zk/gbNatFl7F+QVtd8Qw3MRffmkL7/Fow6LF8wR/k\r\ncQxfNfXooH+4F61uoIDe/ARau6qpYwFSl0xe4deQDSqXe+r3gBI4fFXpO7wh\r\njtk+0hQx5Dy02tytl5vgcathRufUbQoZ8LJNy7121BVNOxxbgP2ZUGPY3yWY\r\nyZX9SWx8LMIJlwVzQImf1kfw9abr3Qq7YUUrGN4obJ60xEtSjanXQBQI1dqF\r\n5XyVEBEMNt5NCOnsbugnotmTpHndJIrnVyf1WFa3mN7duSzgZ6wM7/dXkNL5\r\nFp2OkUfwAGTBDPo6kIfXyil7K/ZLEZ6Zpi12qekZt+ECFSL6XaP8qhC/bZfA\r\nLfdJ3CDU/cMqroyBv6pIiTh9fYMgEi1PHwfy9ZUMxd7Z52t4135jA891ekfE\r\nromErePxgSXB+N7m2oZyihXTzoXX3qC5b7sp04RdEym97ESZJF04qmtQRd01\r\nghtNOlw6q97uW/NV5SzNu3NBO7uhg9n9adheNB71DElPw8WBn7ZEk42SOziE\r\nk+Hdrg/3MRWi8y6VFsRKuPSiR4R8j/CED0s=\r\n=A6Ls\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/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.11&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/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.11&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/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.11&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/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.11&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/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.11&utm_source=npm)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.11&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/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.11&utm_source=npm)\r\n- 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.11/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.11&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.11/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.11&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.11/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.11](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.11).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.11&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.11&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.1"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.7","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.20-iv-202303280023_1679988497700_0.39716425539792555","host":"s3://npm-registry-packages"}},"9.6.20-beta-202304120143":{"name":"dynamsoft-javascript-barcode","version":"9.6.20-beta-202304120143","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.20-beta-202304120143","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"1b1ebbbdf0864e2378439f99535149d9e373f907","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.20-beta-202304120143.tgz","fileCount":70,"integrity":"sha512-9++Kkemg9H2xqzdYbAAw63ozR2e1Veobp4qlUZ1BIVPhpTAE5yh4ENWb8OOfPXEM1Yhd+ggBtp3FkKhVsVrf9A==","signatures":[{"sig":"MEQCIHeO3KnsDbBYTEgP4kdPyuLJiy6RIvYpN51ktd/QIUYIAiBRQ+52aHcEWSlg0EPt1pNXv2E0qafYZSbIw0FLG9sEjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17209874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNnCcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA6BAAkhNphegfWz+TfqMX5uix9tx1M9CYJRyMK5ouVtH7q8tuKEma\r\noqa7PEp1klMAyqSx17JZWoJx+lznA1EvO/pXFiWbhQl7V7p9UbVi0nv6aKa8\r\nd6sWtgopm7SAY33ap0zlR0G/0n/+b03Fw+biLBIXrtbl6G5TNyieuciu11Fw\r\nAcUOPtVjpdE/jtE2U/R8r5Ta9Wm2jAlIzu3+A5WNU3/lr40OIPQXJl3Rn1Jv\r\nPoAWkIxIASYnTwj1P4fOKq/bkc8pJWxo1v4EibnBP5Dna7RuvZTgVspPOS9a\r\nUOBB+lMKr4TIDlYYQOzfTPEQor+lyD40/JGCpd8m3tLN6b0P8tP3GNIpqEOm\r\nSshuFuiziDKfpWvXrdZdBTnvpl960IgIf9nN9TG6J1di7W+NFCRUYxMpaJ/r\r\n7QI9dIzFcxC6yZHABMBi0uQAkRVSyZPI3q8sG2dGVLm9j2W11e5hiNRbOCta\r\n+iXZErGA2t05vLaaSGyLBWaSiPNt+l3P1ZHkdppFUfG/ttrxbKSEPiuurdes\r\nFcNmha9jS2IMd1LCSLUv7U4gho9j+yiLhPTUcBR5aObDtkj7AcRKBKH5AcTp\r\n3I5U4EQUzNlyJCnBeoo7RRv0F42olqciXlW1U9K571kc5/ko1KC+f//ptHOu\r\n/JsmFUiqH5KlKO35CMcXY2GXJZ22zJDNtuw=\r\n=jFFP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.20&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- 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.20/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.20&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.20/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.20](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.20).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.20&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.20&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.3"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.7","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.20-beta-202304120143_1681289372521_0.8024437943156042","host":"s3://npm-registry-packages"}},"9.6.20-beta-202304171826":{"name":"dynamsoft-javascript-barcode","version":"9.6.20-beta-202304171826","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.20-beta-202304171826","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"770ece7299717f3581a67256ab7df8c5082856b9","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.20-beta-202304171826.tgz","fileCount":70,"integrity":"sha512-de9uHp/rE1v+r50ONdvvb7BfE2UXq+MYP+pONIVbA0yUNEBAhcwQLijrye2ogEl8Y0ykM/cb0sAeFVoKcstPfA==","signatures":[{"sig":"MEQCIFUx37Ulgc1U0NIV1haNgrsD2oOacUbsqdppHUV0+NIiAiBZb+8Vt2qG1Wvu9DgYtRjUaOuBzC0xhABJuPPXrcKUAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17209104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPfM3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqexQ/7Bo6TVQpp2fAYJ7KpemeGcu/6F91tKZaREFLvpODeHnaJDyWW\r\ntF7QEnLONKNkW8n5v0PGnAlw/3m0RRGScTOTOOaZnoe5p0qx5lDVT7wZFtcd\r\nx7kNYzJyo43fkkr1RkgBRsjq5fPaGgsxxVN+1t/gRoSN1V46pL4ewT0Bzpx0\r\nm25yniPaS6nUIvhHLV51pTo3gBi8jzUyQPhtZOdYxChquYj7ls20PzxLGPJK\r\n88jDcVCjDfZvJP3S5TNr0Sm46G31HAmQJJMjAAfz7zHEIXF7COZfZnprR9Ts\r\n31frwsHyOeD2ogTrJrEdn34gcIDwOYvQIU6jI/ccEI/7VZw691dbGWZ21Anb\r\nhyvh20UEXZkAQywKBXL26QO7n21HsjzkkHuDxHMGujz/sQLYMu5eWeqKIROt\r\nJa2uqJ7u2Qozdbb6STpUD3aPVOSJg9OuMnRJ4K33VWHGJrqjAk/Bp5AujB1I\r\njhmlDTVT2wcacxZU8DK6LRyAF1x6zOmqn2y9BxZtWcY/d2diUw116Oecugu9\r\ni47vrkU7PuUVOjULTHKyuQmsJw87KenAE/cu1zj9OiDhZWC+5BTasnn54Vt8\r\n5n4zoujcXEZ4vF81uS7NaVsJuerDHUJL3SPSGAbHZrG9xgxTmxxAtTssE7X0\r\nEjQmeVdzvr7f2tlkuSD5qb35pTFvv/VdBj0=\r\n=VOiG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.20&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- 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.20/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.20&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.20/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.20](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.20).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.20&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.20&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.3"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.7","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.20-beta-202304171826_1681781559520_0.14306323168481505","host":"s3://npm-registry-packages"}},"9.6.20-beta-202304172243":{"name":"dynamsoft-javascript-barcode","version":"9.6.20-beta-202304172243","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.20-beta-202304172243","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"c4825e90776aa79bad5647e99b853cb880551e13","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.20-beta-202304172243.tgz","fileCount":70,"integrity":"sha512-UF20+qHePGo4uI8JvMn3tTTG344uWjI3bfJf5s93W7o2Y/Xi1FCwk/zQMwyhj9AVULxyBLvvNGpuKbEw+T+P9g==","signatures":[{"sig":"MEQCIH/m2v+wvF2ap9bSnNcMaRsuMJXlUyfLjw3aLtrsrXelAiA3Y4Dp6X4LfZ/kpAhqE6e+2H2LToRVae2hmljnqRMRew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19074224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPi9KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQRw//aiejCuejFaFINq0ZVvmQDNzI1p5jqZkYeBkz2ayUQ1y4bDS2\r\nCLCVUE9pL6Q5ZD5KdkJYqFL9aGNLTq5h6uGFAmanbsB9CXx/gYlvLFodz+sK\r\npxoqyiA7iIH8zZVKZx9BBMoHncJ4LwqBncq7JsUNuli2iQIfkgP0l+GKI+wD\r\nkgT9OXJsNVgr6iZ01fSniLi8CS/FR7nrAn/X+bz/KPge7qDHAAt5oEsKCDvF\r\njmxA8pdjcVOU5POtqwWqlSw5kx0mg5a0oIPYyuVi7q7pdKuQzEKzp+0jAe4u\r\nZuLpCMS/aHXaa8IZJ4BFF6oGSCdU/3iKLL6XZk1SIZwao1VL3fHzKphY4ngj\r\nPdacpeeYWPm6ZTDls7MpfYPq92/Dey+cxfS4u9A3hVOqrsymO1bYNxQAK8iz\r\n71jwIWP/WjIl0nMHiaVqtKeForgerT78dGaWEODzcdadR47Tro+l9uMVRkQy\r\nJPamXH1OlLtaPixLnry4sjcUNwvYYWffbowWpDPnKWa5T44MW7Wr5Twlgpiy\r\nI7kBiwUVVDgRlXYWX7PBWZveT8MWODUnm3eTDYQ0bFQ5aSzbQ+2kUE2mBzni\r\nCAIISHZ4NTLd+2wLrqfJnkfjM89VmlBERSrSs7xHKvxnf5Bop80eZEsPI/SP\r\nbG+7fh7UL3E0xMpc6Q1LG6k8bvUlac/CYs8=\r\n=XZQb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.20&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/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.20&utm_source=npm)\r\n- 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.20/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.20&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.20/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.20&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.20/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.20](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.20).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.20&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.20&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.4"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.7","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.20-beta-202304172243_1681796938586_0.8677295065621669","host":"s3://npm-registry-packages"}},"9.6.20":{"name":"dynamsoft-javascript-barcode","version":"9.6.20","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.20","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"42c8f266f1fc5cdd36f314d43dc3a8a5c78ea35f","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.20.tgz","fileCount":70,"integrity":"sha512-sq3mRiqGo3H5hPSA/5of8NRcRwwQnNaNRyD6xRltXwJmQbavMm+GX0hQsOVoXYNmuxLv6i/n+lfQn29R3g67uw==","signatures":[{"sig":"MEYCIQC0ZYZa3L5OMtp3KiMSCt5c1nxmbEB4HbHXsB2frR4mOwIhANFVD5HLGNxFpw9ttwnzD3fbzu1f8J2x2jCeaFlJQR/0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19074206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPj/9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqR7A//XaHKFlVYGQ9HWiARqwNjP2ct+pUN9bG4GzufBY9xHw2uzID6\r\nsJ3DLuFr7HzIdYFgOBh5XRmzVAYhYSumj/bSxwSKLUwuAy320BJ7fFgpnBu/\r\nCdnJDif3Qk8eUo9YgSIogUCg7Kq7u6OemdJ7wzLakehJOQnkVv6o4t50CzlU\r\nRx5hIVwWChKUjx97kJxps4L0yTKTPAnBhP5PQ3qg7BHUHLUiTmqM8asbChlF\r\nVzzvv502mUYdfpQNOXF5GbMKy1sVRtsmsPNnTzSZ7LHgFW79aw0k2PIRYa9K\r\nbmznBDFAqhXS3uA47Vw62DFcJvdTa2HbdNYwBorDypkMgNAWt9eBLcYnXBKW\r\nqtPv77WkKSKRTpcpau7tnyLKwJjnzWcX+JfmUavJzO5LCcRMAU4eWoy2IPEg\r\nVA93ja0IPZx5aUl9FXRzYfVW5OsNzq73okBjfm9FRcyzu1yv7NkzLAh0CJtY\r\nNViZfrC1ejWTlAu4AvIp0X4XI47VOoga+KZ7x/yKDuROyrGPSpGy4B6rhCBX\r\nQ5b6yO+GXCGYJVTjqjjtt/PKehoVE/rsz4nEjVcaBstfPUe/w71ADHbp/URK\r\n/1+mnKUu+TXXYTymlSDRsqPjlNpi9KgTld/LBtcGXhukpiMGjEc7xJQqJ2+R\r\n+iPsX83ETk21cdKCrwdDyUC7xXfRlT3Mp6g=\r\n=Umra\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":"./dist/dbr.pure.esm.js","require":"./dist/dbr.pure.js"},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.4"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.7","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.20_1681801213251_0.3066764783657818","host":"s3://npm-registry-packages"}},"9.6.21-beta-202308022353":{"name":"dynamsoft-javascript-barcode","version":"9.6.21-beta-202308022353","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.21-beta-202308022353","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"1519eae1d1fe235dbe6d44fc9b47e928da0f88b3","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.21-beta-202308022353.tgz","fileCount":70,"integrity":"sha512-de5ClHhrZI5GFMRgfgJHRVXLxghpu1WLBH4XBuHBmypW2kiyObsY+xQ38hdfJSJ0G0i/SYe3H02qGcZPaINciA==","signatures":[{"sig":"MEUCIG58P9z9ywbRRyrTgRFxoI//jb3NYzzqh42AmeeniOoGAiEAk35Q3r2bXq6vhqhZPtYQdAFan3Po4UhXFPt6YkucoOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19104345},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/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.21&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.21&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/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.21&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.21&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/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.21&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.21&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/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.21&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.21&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/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.21&utm_source=npm)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.21/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.21&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/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.21&utm_source=npm)\r\n- 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.21/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.21&utm_source=npm)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.21&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.21/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.21&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.21&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.21/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.21](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.21).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.21&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.21&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.5"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.9","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.21-beta-202308022353_1691054167684_0.3259836071363924","host":"s3://npm-registry-packages"}},"9.6.21":{"name":"dynamsoft-javascript-barcode","version":"9.6.21","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.21","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"d46876c11f9f35db6a72056368bb944ff2624626","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.21.tgz","fileCount":70,"integrity":"sha512-b4GsfsTTTVLyqeUtek7wimgMcdi9OjLC8N2K30Z6JwFwGMMvvBfvGmvkOKvMWY/yzxOISX+4coUp/0TUEyadXw==","signatures":[{"sig":"MEUCIEuBhhWbP79XELj4KA7LIT1TxClZ7L4juRIavIDDHI+2AiEA4LMGPNkOaxrFhh+2FqSl+qpi/szCRmWRAshlKHdVpPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19104327},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.4.1","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","directories":{},"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.5"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.9","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.21_1691055543353_0.9793424294647735","host":"s3://npm-registry-packages"}},"9.6.30-beta-202309130021":{"name":"dynamsoft-javascript-barcode","version":"9.6.30-beta-202309130021","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.30-beta-202309130021","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"f5839d697292ed453f3dc1e890ca3b7932fdb029","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.30-beta-202309130021.tgz","fileCount":70,"integrity":"sha512-rwmxLhou8dp3BMZ+K897D+02S7chH5yU7/1Lh8uIucpLJVL3Lkx3DOeQbqiy3LE4kMkg5nKQwQvdsIGLU8wgHw==","signatures":[{"sig":"MEYCIQDYVYHmUXvb/43MO02XzB0Jh9sPJvm7M1/G/xaREDKENwIhAIcdxKHdSrorXvIYfNLyiuSUCcPAPcVaQhJbeMVIihUY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19120097},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.30/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.30&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- 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.30/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.30&utm_source=npm)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.30&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.30/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.30](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.30).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.30&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.30&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.6"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.9","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.30-beta-202309130021_1694590020938_0.7788887945572016","host":"s3://npm-registry-packages"}},"9.6.30":{"name":"dynamsoft-javascript-barcode","version":"9.6.30","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.30","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"176f9be18300802ca244f0dc026cbd3ea06de29d","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.30.tgz","fileCount":70,"integrity":"sha512-JjgOmCnfaCpR2+PrT+BcM0thOveK3OrWJih6b8tqPIY0Bi4h+NvbKsluTUErxABib7tazBkt1NFuNcV07jFPgA==","signatures":[{"sig":"MEUCIQDBXFcdf5mJbwzPGIIe4eL1Io3IJ4sxViz4i4i0zROhkAIgJYR+OJGpvAvk2M99iR2YhTy7t6qcGTecci650RVYOgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19120079},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.6"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.9","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.30_1694591517621_0.03108965088694471","host":"s3://npm-registry-packages"}},"9.6.30-iv-202309261832":{"name":"dynamsoft-javascript-barcode","version":"9.6.30-iv-202309261832","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.30-iv-202309261832","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"e5d80eb313f1c545a4184842ce1998833599938c","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.30-iv-202309261832.tgz","fileCount":70,"integrity":"sha512-FSnRrnS6E48pLNg4Tvx7pEHe9kWP7MlSYMFu2JoY9ytpTqIpfEsICmDRZ5i0VA7ibNlPSc4Rri5fmT8dRFKMmA==","signatures":[{"sig":"MEUCICIFdvfQJia6TyLfkS8dsb/E7swETV4l1HzEfJvK/9pQAiEAgjRxliiCezACKgWTzzyYktS6mcs0FG2snZkBFmBza3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19140647},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.30/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.30&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- 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.30/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.30&utm_source=npm)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.30&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.30/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.30](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.30).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.30&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.30&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"test":"node ./samples/node/helloworld.js","build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:readme":"node ./updateReadme.js"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.6"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.9","rollup-plugin-terser":"7.0.2","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.30-iv-202309261832_1695778705999_0.9358857850423132","host":"s3://npm-registry-packages"}},"9.6.30-iv-202310102228":{"name":"dynamsoft-javascript-barcode","version":"9.6.30-iv-202310102228","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.30-iv-202310102228","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"432df78abaefc2863f740ae6cf1ae8787528e9f1","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.30-iv-202310102228.tgz","fileCount":70,"integrity":"sha512-4ewCgzgPyOCVU+Fkxyso/0w/tHFgN7MNUyVJ1QTOVuTPoyF8qAgYIW4CZ7uLsiCPI5jVN5L0QJvEzy4Zjq6bCQ==","signatures":[{"sig":"MEYCIQCvg2/qHOYwjgO5oJoWU0gMpyH26WH8NqzVIgrsUNVKYwIhAKWnZ+FeA8pjCFtUXQIAtoS202g9Ch/3cUONmcOeBrSy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19141977},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.30/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.30&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/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.30&utm_source=npm)\r\n- 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.30/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.30&utm_source=npm)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.30&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.30/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.30&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.30/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.30](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.30).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.30&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.30&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.7"},"publishConfig":{"tag":"iv","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.9","rollup-plugin-terser":"7.0.2","@dynamsoft/rd2-scripts":"^0.0.32","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.30-iv-202310102228_1697002484435_0.8194170869840149","host":"s3://npm-registry-packages"}},"9.6.31-beta-202310112234":{"name":"dynamsoft-javascript-barcode","version":"9.6.31-beta-202310112234","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.31-beta-202310112234","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"d6719c8d0b00534577d4932d8f8174268f103c4f","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.31-beta-202310112234.tgz","fileCount":70,"integrity":"sha512-abT7OmLSLzFVQm9eGamP0YAuuoCuo6ix/gew4GXSfk1MWLK+BAV8p8Sj4upgDsXQ6rhIfswtSvbLjBe95ocXdw==","signatures":[{"sig":"MEUCID7aEFU4x31jFC1nBiblp7qw6S0oMBmSlIwtt/OLbuAnAiEA3s+BQJQs5+Ci77ismG/6px6+XBlVrhkrZGEk3sLk9u8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19142715},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.31/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.31&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\r\n- 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.31/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.31&utm_source=npm)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.31&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.31/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.31](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.31).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.31&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.31&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=v9.6.21 --path=programming/javascript/user-guide/index.md"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.8"},"publishConfig":{"tag":"beta","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.9","rollup-plugin-terser":"7.0.2","@dynamsoft/rd2-scripts":"^0.0.32","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.31-beta-202310112234_1697089295201_0.9177006674290635","host":"s3://npm-registry-packages"}},"9.6.31":{"name":"dynamsoft-javascript-barcode","version":"9.6.31","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.31","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"2d23e7e7c846671748b6fcaf434c45759b1aa7be","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.31.tgz","fileCount":70,"integrity":"sha512-32v13EefTWeRdpUr6dbcoMPC2TttCRSdKb2JCrprIQzp6jCp2UNBpxRynoSUU9cgLVZnvk+ZJAur+djLfdyH9Q==","signatures":[{"sig":"MEUCIQCRRU9B9uEPDQJBNBWBRo7qDt1vSfZFBMDhU7aVkLzDbwIgQl3uyMcrvKwLb/OyRg27BZllIMhCA31EOVOPHb/O6d8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19142699},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=v9.6.21 --path=programming/javascript/user-guide/index.md"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.8"},"publishConfig":{"tag":"latest","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.9","rollup-plugin-terser":"7.0.2","@dynamsoft/rd2-scripts":"^0.0.32","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.31_1697090693853_0.35181071394820407","host":"s3://npm-registry-packages"}},"9.6.31-beta-202310191909":{"name":"dynamsoft-javascript-barcode","version":"9.6.31-beta-202310191909","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.31-beta-202310191909","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"745c5b756128924d38afdc127d99218785ce7214","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.31-beta-202310191909.tgz","fileCount":70,"integrity":"sha512-6v4iOlxpMcZSP0wYZ+wrYA8fQRyY46jPB/6bRxN70r0Iynqz/tzmJHIJn53Id8dTmq5VuOePu56U2ZAXSqr1kA==","signatures":[{"sig":"MEQCIBqCYnYGm52rDVRdSlkYPhpHWif5wYnzpFLJGnoSqrEIAiAIwFYimrwBBZuSMMTfFiCztPEGG8IvgrBhObUvqeeRhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19142053},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\n\n[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.\n\n\n\n\n\n\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\n\n\n\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\n\nTable of Contents\n\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\n - [Understand the code](#understand-the-code)\n - [Run the example](#run-the-example)\n- [Building your own page](#building-your-own-page)\n - [Include the SDK](#include-the-sdk)\n - [Configure the SDK](#configure-the-sdk)\n - [Interact with the SDK](#interact-with-the-sdk)\n - [Customize the UI (optional)](#customize-the-ui-optional)\n- [API Documentation](#api-documentation)\n- [System Requirements](#system-requirements)\n- [How to Upgrade](#how-to-upgrade)\n- [Release Notes](#release-notes)\n- [Next Steps](#next-steps)\n\n**Popular Examples**\n\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.31/1.hello-world/14.read-video-webview)\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.31&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\n- 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.31/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.31&utm_source=npm)\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.31&utm_source=npm)\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/5.others/debug)\n\nYou can also:\n\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.31/)\n\n## Hello World - Simplest Implementation\n\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \n\n- Basic Requirements\n - Internet connection\n - [A supported browser](#system-requirements)\n - Camera access\n\n### Understand the code\n\nThe complete code of the \"Hello World\" example is shown below\n\n```html\n\n\n\n\n \n \n\n\n\n```\n\n\r\n \r\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n ```\n\n > 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` .\n\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\n\n2. **[Optional] Add the camera list and resolution list**\n\n 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.\n\n ```html\n \n
\n \n
\n ```\n\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\n\n ```html\n \n \n
\n \n \n
\n \n
\n ```\n\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\n\n > 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.\n\n ```html\n \n ```\n\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\n\n > 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 closest 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**.\n\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\n\n## API Documentation\n\nYou can check out the detailed documentation about the APIs of the SDK at\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.31](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.31).\n\n## System Requirements\n\nDBR requires the following features to work:\n\n- Secure context (HTTPS deployment)\n\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\n \n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\n \n - Dynamsoft License requires a secure context to work.\n\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\n\n The above four features are required for the SDK to work.\n\n- `MediaDevices`/`getUserMedia`\n\n 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.31&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.\n\n- `getSettings`\n\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\n\nThe following table is a list of supported browsers based on the above requirements:\n\n Browser Name | Version\n :-: | :-:\n Chrome | v59+1\n Firefox | v52+ (v55+ on Android/iOS1)\n Edge2 | v16+\n Safari3 | v11+\n\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\n\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\n \n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\n\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\n\n## How to Upgrade\n\nIf 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.31&utm_source=npm).\n\n## Release Notes\n\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\n\n## Next Steps\n\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\n\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\n","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=_dev --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=v9.6.21 --path=programming/javascript/user-guide/index.md","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev=true","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev=false","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.8"},"publishConfig":{"tag":"beta","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.9","rollup-plugin-terser":"7.0.2","@dynamsoft/rd2-scripts":"^0.0.80","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.31-beta-202310191909_1697768226208_0.8736117123761584","host":"s3://npm-registry-packages"}},"9.6.31-iv-202311010046":{"name":"dynamsoft-javascript-barcode","version":"9.6.31-iv-202311010046","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.31-iv-202311010046","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"9c313f29bc27dfdcaa129b536bd407a9c92a6bd1","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.31-iv-202311010046.tgz","fileCount":70,"integrity":"sha512-5nmOx1beEZ94hISIP/Gt0EO7+mpW+lAADxJNn4QuY0ZcH0WeZpqh6Dj8XFItfJro5CLuv+WzOq2/9YQS4yZGeQ==","signatures":[{"sig":"MEUCICbQpyQRlc01mY0IGR3NMc8Qei7ldE/nYDygj5fmhutIAiEAnjqTQBT08ogBSFR4ryNp4PKUq//Nt5hDBPgQ0qjWddo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19149553},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.31/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.31&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/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.31&utm_source=npm)\r\n- 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.31/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.31&utm_source=npm)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.31&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.31/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.31&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.31/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\n \n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.31](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.31).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.31&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.31&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=_dev --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=v9.6.21 --path=programming/javascript/user-guide/index.md","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev=true","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev=false","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.8"},"publishConfig":{"tag":"iv","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.9","rollup-plugin-terser":"7.0.2","@dynamsoft/rd2-scripts":"^0.0.80","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.31-iv-202311010046_1698826576768_0.3928196680808913","host":"s3://npm-registry-packages"}},"9.6.32-beta-202312061835":{"name":"dynamsoft-javascript-barcode","version":"9.6.32-beta-202312061835","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.32-beta-202312061835","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"cad3d1dab972b8e0f6a2097bedbda7cc3f5a7adb","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.32-beta-202312061835.tgz","fileCount":70,"integrity":"sha512-N+jvphqp5VjAEzFpAN+mdfbn+ZWL+gMKjG8hTIuDgHk6z7tgWUcvXXaZ0bzB4NtdV2u/wr7wkv5rHP9RPa1LIg==","signatures":[{"sig":"MEYCIQC9jjFgGB5vWaQ1Ez1TzrT+lyOdQ6DyFftUo/orCvusowIhAJzZ41kKI+vCDmrRwqS81hUYwE21xW0AezcUvDMaQvBg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19152221},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\nIn this guide, you will learn step by step how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/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.32&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.32&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/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.32&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.32&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/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.32&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.32&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/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.32&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.32&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/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.32&utm_source=npm)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.32/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.32&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/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.32&utm_source=npm)\r\n- 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.32/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.32&utm_source=npm)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.32&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.32/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.32&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.32&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.32/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.32](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.32).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.32&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.32&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=9.6.32 --path=programming/javascript/user-guide/index.md","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev=true","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev=false","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.9"},"publishConfig":{"tag":"beta","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.9","rollup-plugin-terser":"7.0.2","@dynamsoft/rd2-scripts":"^0.0.80","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.32-beta-202312061835_1701916939214_0.12267101502961042","host":"s3://npm-registry-packages"}},"9.6.32":{"name":"dynamsoft-javascript-barcode","version":"9.6.32","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.32","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"2655f7c134d315adfed4f5c94ada0a4c9827e0fd","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.32.tgz","fileCount":70,"integrity":"sha512-zCk2T9td8X5mdx42YiTKF6gxfjFKH3J8apMkcCYdAAqOAvy723Amv9rkgvI+Nt81/+9FcZWjT34ouzBYjQQeVA==","signatures":[{"sig":"MEUCIBauDcOlN88x7enCUN3/1tF/bXOUuS8eLmN+RKmzbHUPAiEAwljjMGPqbshPdYmA7h34F7qb1M6NlUYVC8V7tHzqvNs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19152205},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=9.6.32 --path=programming/javascript/user-guide/index.md","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev=true","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev=false","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.9"},"publishConfig":{"tag":"latest","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"2.3.1","rollup":"2.58.0","typedoc":"0.22.6","fs-extra":"8.1.0","showdown":"^1.9.0","typescript":"4.3.5","@types/node":"16.11.2","highlight.js":"^9.15.6","mutable-promise":"^1.1.13","@types/node-fetch":"2.6.1","@scannerproxy/dlsjs":"^2.0.9","rollup-plugin-terser":"7.0.2","@dynamsoft/rd2-scripts":"^0.0.80","@rollup/plugin-replace":"3.0.0","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"1.3.0","@rollup/plugin-typescript":"8.3.0","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"13.0.5","@scannerproxy/curscript-path":"^1.0.3","typedoc-plugin-missing-exports":"0.22.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.32_1701927392672_0.15176699110561231","host":"s3://npm-registry-packages"}},"9.6.33-beta-202402032314":{"name":"dynamsoft-javascript-barcode","version":"9.6.33-beta-202402032314","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.33-beta-202402032314","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"19ef70dfd2de96aec585ca95cc8b0da650306d56","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.33-beta-202402032314.tgz","fileCount":69,"integrity":"sha512-AEViU8KZzhh/7zUEzhNkRJWLQJCnLPTd8N1M83i+DujYv/glEkfd22yK7yGoDlDGV8SDlESR707um12QNnoV8g==","signatures":[{"sig":"MEYCIQChOE/BhMp/EH9EP2YKIzzv6ledh8CtigByONahjWybmQIhANhzyUFu4Yukz/bLoOJoju9oAtslQcxpMYko9l2aDrVy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19146542},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/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.33&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.33&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/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.33&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.33&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/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.33&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.33&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/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.33&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.33&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/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.33&utm_source=npm)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.33/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.33&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/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.33&utm_source=npm)\r\n- 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.33/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.33&utm_source=npm)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.33&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.33/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.33&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.33&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.33/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.33](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.33).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.33&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.33&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.10"},"publishConfig":{"tag":"beta","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"^2.6.2","rollup":"^2.58.0","fs-extra":"^8.1.0","typescript":"^4.9.5","@types/node":"^20.11.10","mutable-promise":"^1.1.13","@types/node-fetch":"^2.6.1","@scannerproxy/dlsjs":"^2.0.9","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"^0.1.15","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"^1.3.0","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"^13.3.0","@scannerproxy/curscript-path":"^1.0.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.33-beta-202402032314_1707032328981_0.15563870091048315","host":"s3://npm-registry-packages"}},"9.6.33":{"name":"dynamsoft-javascript-barcode","version":"9.6.33","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.33","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"7e0672f05f51d8ab2abc35b55dea2244c6aa66d5","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.33.tgz","fileCount":69,"integrity":"sha512-IMNfgDAuG5B5lVcVD1fs0tgWACVHERHqZVuXcKdzoCWBunLdHpHNhkJ+EDr7puKaGnFrD5CPYIPYy4cqm4Q2lg==","signatures":[{"sig":"MEUCID9frsJwZjiWUnhXbO6AeiYg6HNAbAn1Clux104sXex1AiEAzC1boX/cSqQuZN2bdajo1cJx4jeKGWd8aMxgYoYmpFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19146526},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.10"},"publishConfig":{"tag":"latest","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.2","rollup":"^2.58.0","fs-extra":"^8.1.0","typescript":"^4.9.5","@types/node":"^20.11.10","mutable-promise":"^1.1.13","@types/node-fetch":"^2.6.1","@scannerproxy/dlsjs":"^2.0.9","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"^0.1.15","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"^1.3.0","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"^13.3.0","@scannerproxy/curscript-path":"^1.0.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.33_1707033141235_0.2557364351130931","host":"s3://npm-registry-packages"}},"9.6.40-beta-202403141926":{"name":"dynamsoft-javascript-barcode","version":"9.6.40-beta-202403141926","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.40-beta-202403141926","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"f902569fd8c786f6341896dc683b43ffb91ebbe3","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.40-beta-202403141926.tgz","fileCount":69,"integrity":"sha512-fyArDLfDCGLVap1yOcWuhJrXz687Y2Pqdpa3+/Xk1q3i6iENVfDluFU5iRCZ5+TukcEoWVyg8Z/+2va+nhahLg==","signatures":[{"sig":"MEUCIDV97Jd+OYjUNY22E0UUD8sHm0fKFbTwnRXIGDxzaz/BAiEA1Wn8L8HKUurMIeOZ0uZW9FX5U9knhfgLhUsKZtQgT3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19122819},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/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.40&utm_source=npm)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/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.40&utm_source=npm)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/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.40&utm_source=npm)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/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.40&utm_source=npm)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/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.40&utm_source=npm)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.40/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.40&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/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.40&utm_source=npm)\r\n- 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.40/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.40&utm_source=npm)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html) \\| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/4.use-case/3.show-result-texts-on-the-video.html?ver=9.6.40&utm_source=npm)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.40/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.40](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.40).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.40&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.40&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.10"},"publishConfig":{"tag":"beta","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"^2.6.2","rollup":"^2.58.0","fs-extra":"^8.1.0","typescript":"^4.9.5","@types/node":"^20.11.10","mutable-promise":"^1.1.13","@types/node-fetch":"^2.6.1","@scannerproxy/dlsjs":"^2.0.9","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"^0.1.15","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"^1.3.0","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"^13.3.0","@scannerproxy/curscript-path":"^1.0.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.40-beta-202403141926_1710470568819_0.9305223087521326","host":"s3://npm-registry-packages"}},"9.6.40-beta-202403142006":{"name":"dynamsoft-javascript-barcode","version":"9.6.40-beta-202403142006","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.40-beta-202403142006","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"11010cbf8d9caf123c08c023c1099c5218b1147e","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.40-beta-202403142006.tgz","fileCount":69,"integrity":"sha512-aYHhRAVoHKsvUSY+UIKTRVZxtrBR2ClGVW2AburiOXPJrhB3IEDT7bOfyQTiesYI6uuoNe6pNkZxj9YsPzh4Kg==","signatures":[{"sig":"MEUCIQCs/9NRhnJoLkEd3Dn9clK5horCCnlbCA/hx/b69WCS6AIgOW8PjzBhIEWhPpmJZiRLhYTpO7XEpgl7eFTvnptFxrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19120610},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/1.hello-world.html)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/3.read-video-angular)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/4.read-video-react)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/6.read-video-vue3)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/10.read-video-pwa)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.40/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.40&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/4.use-case/2.read-a-drivers-license.html)\r\n- 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.40/4.use-case/1.fill-a-form-with-barcode-reading.html)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.40/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.40](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.40).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.40&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.40&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.10"},"publishConfig":{"tag":"beta","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"^2.6.2","rollup":"^2.58.0","fs-extra":"^8.1.0","typescript":"^4.9.5","@types/node":"^20.11.10","mutable-promise":"^1.1.13","@types/node-fetch":"^2.6.1","@scannerproxy/dlsjs":"^2.0.9","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"^0.1.15","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"^1.3.0","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"^13.3.0","@scannerproxy/curscript-path":"^1.0.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.40-beta-202403142006_1710472892529_0.6018655603360283","host":"s3://npm-registry-packages"}},"9.6.40":{"name":"dynamsoft-javascript-barcode","version":"9.6.40","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.40","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"5fb680abc99071c9f390e0dd0f47d6ea3d623bb5","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.40.tgz","fileCount":69,"integrity":"sha512-KZGaIqLqxEUwpcsAMS0102QAScJQ4k7RvoLUW0proli31OFzpN6ACi9t7QXAnQcqTHyW63fyNUCX9FQphQ0p9A==","signatures":[{"sig":"MEUCIQDGOkM7UTB9KsfhgHu6C2f+Y8MdLubuNhlK+NZlZXlqLQIgEkJW4QMjqVL+ISKP2Ky7QV1dmPlit4wBLxDC1VXQAkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19120795},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"^3.3.10"},"publishConfig":{"tag":"latest","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.2","rollup":"^2.58.0","fs-extra":"^8.1.0","typescript":"^4.9.5","@types/node":"^20.11.10","mutable-promise":"^1.1.13","@types/node-fetch":"^2.6.1","@scannerproxy/dlsjs":"^2.0.9","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"^0.1.15","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"^1.3.0","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"^13.3.0","@scannerproxy/curscript-path":"^1.0.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.40_1710727737400_0.5994259315601793","host":"s3://npm-registry-packages"}},"9.6.40-iv-202404120107":{"name":"dynamsoft-javascript-barcode","version":"9.6.40-iv-202404120107","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.40-iv-202404120107","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"1fac081a8e065e872bb3dc17189d07c68b6d86e3","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.40-iv-202404120107.tgz","fileCount":69,"integrity":"sha512-l2mEbmtsx7lHT4NoxpN+I+PstgIu86wkFNc7zZaaMF6VXUDmREs7M1doFthNKtGxTR3xFysEA8sjBFtRqql1Uw==","signatures":[{"sig":"MEUCICdFyGVwLsjP2gaCOlmvp20l5w/N++46oclkklGGIxSrAiEAvgyDYIxOLNtqWeZZ0ATOY8Cr+K8kdYKBBVdV3ntS3xE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18200116},"main":"./dist/dbr.pure.js","types":"./dist/types/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/1.hello-world.html)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/3.read-video-angular)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/4.read-video-react)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/6.read-video-vue3)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/10.read-video-pwa)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.40/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.40&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/4.use-case/2.read-a-drivers-license.html)\r\n- 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.40/4.use-case/1.fill-a-form-with-barcode-reading.html)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.40/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.40](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.40).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.40&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.40&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/types/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.3.10-iv-202404110311"},"publishConfig":{"tag":"iv","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"^2.6.2","rollup":"^2.58.0","fs-extra":"^8.1.0","typescript":"^4.9.5","@types/node":"^20.11.10","mutable-promise":"^1.1.13","@types/node-fetch":"^2.6.1","@scannerproxy/dlsjs":"^2.0.9","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"^0.1.15","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^2.0.0","@types/node-localstorage":"^1.3.0","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^1.0.7","@rollup/plugin-node-resolve":"^13.3.0","@scannerproxy/curscript-path":"^1.0.3"},"peerDependencies":{"node-fetch":"^2.6.5","node-localstorage":"^2.2.1"},"peerDependenciesMeta":{"node-fetch":{"optional":true},"node-localstorage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.40-iv-202404120107_1712909711730_0.2942531119896814","host":"s3://npm-registry-packages"}},"9.6.40-beta-202404242030":{"name":"dynamsoft-javascript-barcode","version":"9.6.40-beta-202404242030","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.40-beta-202404242030","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"20de31766aebf01258c3da48e198aeade6496ff8","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.40-beta-202404242030.tgz","fileCount":24,"integrity":"sha512-bSLEIyxYVud6KNnAxgZX02vWC4CDGqNzjxGMU4VUbvlTNW0QuE1lwCdBtjuIH8Q2pW3CRX+GG6KGZlEexOnMxg==","signatures":[{"sig":"MEUCIQCrzFnVxKrcnLplS/xeGt3zQl/5VO1QBH/Qto5Mim5k4gIgYs/bS2VQ9hp65i6tWQAL9/0rVaIg5D6YpDSusOdi23s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18661291},"main":"./dist/dbr.pure.js","type":"module","types":"./dist/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/1.hello-world.html)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/3.read-video-angular)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/4.read-video-react)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/6.read-video-vue3)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/10.read-video-pwa)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.40/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.40&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/4.use-case/2.read-a-drivers-license.html)\r\n- 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.40/4.use-case/1.fill-a-form-with-barcode-reading.html)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.40/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.40](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.40).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.40&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.40&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"8.19.4","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","directories":{},"sideEffects":false,"_nodeVersion":"16.20.1","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.3.10-beta-202404222209"},"publishConfig":{"tag":"beta","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"^2.6.2","rollup":"^3.29.4","fs-extra":"^8.1.0","typescript":"^4.9.5","mutable-promise":"^1.1.13","rollup-plugin-dts":"^6.1.0","@scannerproxy/dlsjs":"^3.0.20","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"^0.1.15","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^3.0.2","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^2.0.8","@rollup/plugin-node-resolve":"^15.0.1","@scannerproxy/curscript-path":"^2.0.4"},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.40-beta-202404242030_1714015915797_0.41709872702891615","host":"s3://npm-registry-packages"}},"9.6.40-beta-202404242342":{"name":"dynamsoft-javascript-barcode","version":"9.6.40-beta-202404242342","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.40-beta-202404242342","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"c5055a637d927ba6e61bea0d8db67fad1065476f","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.40-beta-202404242342.tgz","fileCount":24,"integrity":"sha512-0t2vOSGf4HHXfRYb3EYz5heki4qvWVth0LQtLnQ9JH3SgABnFFbvo2M+OA/wfA/UbxcAW8ARgop036x7wwx99A==","signatures":[{"sig":"MEYCIQDfZ9n+pHh2orAM2f/XBAZ9nnDaKf8OPgDzv9ZhfI9DQwIhAJ88NBPm5wM23ohSEKPYxoPVhD4caO+V9Jm1Yj5E50Yw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18661291},"main":"./dist/dbr.pure.js","type":"module","types":"./dist/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/1.hello-world.html)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/3.read-video-angular)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/4.read-video-react)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/6.read-video-vue3)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/1.hello-world/10.read-video-pwa)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.40/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.40&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/4.use-case/2.read-a-drivers-license.html)\r\n- 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.40/4.use-case/1.fill-a-form-with-barcode-reading.html)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.40/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.40&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.40/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.40](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.40).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.40&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.40&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"8.19.4","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","directories":{},"sideEffects":false,"_nodeVersion":"16.20.1","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.3.10-beta-202404222209"},"publishConfig":{"tag":"beta","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"^2.6.2","rollup":"^3.29.4","fs-extra":"^8.1.0","typescript":"^4.9.5","mutable-promise":"^1.1.13","rollup-plugin-dts":"^6.1.0","@scannerproxy/dlsjs":"^3.0.20","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"^0.1.15","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^3.0.2","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^2.0.8","@rollup/plugin-node-resolve":"^15.0.1","@scannerproxy/curscript-path":"^2.0.4"},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.40-beta-202404242342_1714027427951_0.23018682477265417","host":"s3://npm-registry-packages"}},"9.6.41-beta-202404250044":{"name":"dynamsoft-javascript-barcode","version":"9.6.41-beta-202404250044","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.41-beta-202404250044","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"34de14a051c07b82cb16350072cd2f77a71ae779","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.41-beta-202404250044.tgz","fileCount":24,"integrity":"sha512-hjsi1FmZ0Pi65l3SCMR1kj/lPW4eOejI7S/DXsPUn2zot2zaYeT99vyfD69xD9JPFtjy/qNR+uuD9Q+3CEIdQw==","signatures":[{"sig":"MEYCIQCwMAfNQ9dS5kqX2bkktJq1n+jaTuDVI/B+ct9taGz9mAIhAPT28gvOXore1D19JdxZJ9JB4IYpE8zumifM0eWpsbHR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18661291},"main":"./dist/dbr.pure.js","type":"module","types":"./dist/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.41/1.hello-world/1.hello-world.html)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.41&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.41/1.hello-world/3.read-video-angular)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.41&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.41/1.hello-world/4.read-video-react)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.41&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.41/1.hello-world/6.read-video-vue3)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.41&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.41/1.hello-world/10.read-video-pwa)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.41/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.41&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.41/4.use-case/2.read-a-drivers-license.html)\r\n- 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.41/4.use-case/1.fill-a-form-with-barcode-reading.html)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.41/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.41&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.41/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.41](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.41).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.41&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.41&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"8.19.4","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","directories":{},"sideEffects":false,"_nodeVersion":"16.20.1","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.3.10-beta-202404222209"},"publishConfig":{"tag":"beta","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"^2.6.2","rollup":"^3.29.4","fs-extra":"^8.1.0","typescript":"^4.9.5","mutable-promise":"^1.1.13","rollup-plugin-dts":"^6.1.0","@scannerproxy/dlsjs":"^3.0.20","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"^0.1.15","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^3.0.2","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^2.0.8","@rollup/plugin-node-resolve":"^15.0.1","@scannerproxy/curscript-path":"^2.0.4"},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.41-beta-202404250044_1714031140006_0.6494904236197256","host":"s3://npm-registry-packages"}},"9.6.41":{"name":"dynamsoft-javascript-barcode","version":"9.6.41","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.41","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"b80eec5585b50e45d549bce7adf0639f41a85ca4","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.41.tgz","fileCount":24,"integrity":"sha512-Miv2wedQroHVSFcdp59HU6tstOJY1ScHVxFpzGECIwHbP07h0aEBj8ivgh2/JGzOftU/XaFl0AMj1t++k7CceQ==","signatures":[{"sig":"MEUCIG1DrdnhZ/kkr2WODGfq/dzv6+/OfgPiZUmF3u49ow74AiEA0GGvFWLN6JThm/uWzn4cthwFVUmRjh6WUO+BdeIeOME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18661274},"main":"./dist/dbr.pure.js","type":"module","types":"./dist/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.3.10-beta-202404222209"},"publishConfig":{"tag":"latest","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.2","rollup":"^3.29.4","fs-extra":"^8.1.0","typescript":"^4.9.5","mutable-promise":"^1.1.13","rollup-plugin-dts":"^6.1.0","@scannerproxy/dlsjs":"^3.0.20","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"0.1.17","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^3.0.2","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^2.0.8","@rollup/plugin-node-resolve":"^15.0.1","@scannerproxy/curscript-path":"^2.0.4"},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.41_1714039757152_0.11258548904748267","host":"s3://npm-registry-packages"}},"9.6.42-beta-202404252029":{"name":"dynamsoft-javascript-barcode","version":"9.6.42-beta-202404252029","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.42-beta-202404252029","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"c5223545914a29aa4ce1ea71da35c3eacaffacd2","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.42-beta-202404252029.tgz","fileCount":24,"integrity":"sha512-qF5mabDAOslkRNdD5Hwjv59Tb+z4WOZYd6L3rTWwPBxmaKxVvXR1S0ToHTTi8hvzYdMA750Tq8fy/peWQXU1Qw==","signatures":[{"sig":"MEUCIGnKW6qkjvupiPBGMJaDOSEWlmJm/SSGSQHy7eMMKi4GAiEAu6l3lR8D1xvXyiEwV9xYSFbtSjrnZk2vzdtzMflJ+jA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18661290},"main":"./dist/dbr.pure.js","type":"module","types":"./dist/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/1.hello-world.html)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/3.read-video-angular)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/4.read-video-react)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/6.read-video-vue3)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/10.read-video-pwa)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.42&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/4.use-case/2.read-a-drivers-license.html)\r\n- 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.42/4.use-case/1.fill-a-form-with-barcode-reading.html)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.42](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.42).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.42&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.42&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"8.19.4","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","directories":{},"sideEffects":false,"_nodeVersion":"16.20.1","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.3.10-beta-202404222209"},"publishConfig":{"tag":"beta","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"^2.6.2","rollup":"^3.29.4","fs-extra":"^8.1.0","typescript":"^4.9.5","mutable-promise":"^1.1.13","rollup-plugin-dts":"^6.1.0","@scannerproxy/dlsjs":"^3.0.20","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"0.1.17","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^3.0.2","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^2.0.8","@rollup/plugin-node-resolve":"^15.0.1","@scannerproxy/curscript-path":"^2.0.4"},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.42-beta-202404252029_1714102209383_0.1666234228247485","host":"s3://npm-registry-packages"}},"9.6.42":{"name":"dynamsoft-javascript-barcode","version":"9.6.42","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.42","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"47538f0f0bd9c256c690c4a46106be464530df14","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.42.tgz","fileCount":24,"integrity":"sha512-aLb+zUv0l1/kZKJxCGSDU3iZTSIyxjhsK2pPBr2abGcakMGArhkCgOWZGPGDGQ5JsKvUM70MUlUs9C1H7dQbjw==","signatures":[{"sig":"MEQCIHakrG97c6QYV1YgyjA56s6D6/U1Djp4/cz6ncil+ZmcAiAaHl7c+P5shRpCSSW/lJyuDv7U6QOY2/6m9zEFN/FAfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18661274},"main":"./dist/dbr.pure.js","type":"module","types":"./dist/dbr.d.ts","module":"./dist/dbr.pure.esm.js","exports":{"import":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"6.14.16","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","directories":{},"sideEffects":false,"_nodeVersion":"12.22.12","dependencies":{"dm-howler":"^2.2.4","dynamsoft-camera-enhancer":"3.3.10-beta-202404222209"},"publishConfig":{"tag":"latest","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.2","rollup":"^3.29.4","fs-extra":"^8.1.0","typescript":"^4.9.5","mutable-promise":"^1.1.13","rollup-plugin-dts":"^6.1.0","@scannerproxy/dlsjs":"^3.0.20","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"0.1.17","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^3.0.2","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^2.0.8","@rollup/plugin-node-resolve":"^15.0.1","@scannerproxy/curscript-path":"^2.0.4"},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.42_1714108585299_0.7174447713982652","host":"s3://npm-registry-packages"}},"9.6.42-beta-202406040227":{"name":"dynamsoft-javascript-barcode","version":"9.6.42-beta-202406040227","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.42-beta-202406040227","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"fb5e9467efbeaf5aadf166c2a22277083a5e8b3b","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.42-beta-202406040227.tgz","fileCount":24,"integrity":"sha512-9wm/XYBbaxMnGIy6/ENqB6UanluGBf4mnvmDK5gojtTAXv5+m7LyAMS5gx9l2i/PjeEwuTqdCzRqIhjinB2Anw==","signatures":[{"sig":"MEUCIC2Zy6MQ7iuDsDmI98ZxScbdugUGioZdMzWJviQ9XuIWAiEA8W1Eom2h0CSl3rrHjv3k3Xrz72bIxlFlyiEMSAlmpRE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18526219},"main":"./dist/dbr.pure.js","type":"module","types":"./dist/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/1.hello-world.html)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/3.read-video-angular)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/4.read-video-react)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/6.read-video-vue3)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/10.read-video-pwa)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.42&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/4.use-case/2.read-a-drivers-license.html)\r\n- 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.42/4.use-case/1.fill-a-form-with-barcode-reading.html)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.42](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.42).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.42&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.42&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"8.19.4","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","directories":{},"sideEffects":false,"_nodeVersion":"16.20.1","dependencies":{"dynamsoft-camera-enhancer":"3.3.10-beta-202406040017"},"publishConfig":{"tag":"beta","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"^2.6.2","rollup":"^3.29.4","fs-extra":"^8.1.0","typescript":"^4.9.5","mutable-promise":"^1.1.13","rollup-plugin-dts":"^6.1.0","@scannerproxy/dlsjs":"^3.0.20","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"0.1.17","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^3.0.2","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^2.0.8","@rollup/plugin-node-resolve":"^15.0.1","@scannerproxy/curscript-path":"^2.0.4"},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.42-beta-202406040227_1717493295979_0.2340856156169393","host":"s3://npm-registry-packages"}},"9.6.42-beta-202406040303":{"name":"dynamsoft-javascript-barcode","version":"9.6.42-beta-202406040303","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.42-beta-202406040303","maintainers":[{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},{"name":"dynamsoft_jerson","email":"jerson@dynamsoft.com"},{"name":"dynamsoft_henry","email":"henry@dynamsoft.com"},{"name":"yushulx","email":"lingxiao1002@gmail.com"},{"name":"ellie-dynamsoft","email":"ellie@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"a5a23805373aadf7c8f3e7af8eba200430c598e1","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.42-beta-202406040303.tgz","fileCount":24,"integrity":"sha512-geMcWYQHBAA77WF8EPMfLDH6Zr04irCvATwZxQBVUznxdZIRBs/KITHlkrpoj2+tV+Eg9LYs9cKglyLjqj9Tjg==","signatures":[{"sig":"MEUCIGwLs7prRISzZp7FkexRZlhGkpBTYlLvJiVPkLEgLMd0AiEAgYXZcafG1r7JJ72R20bZZchgSC/pHmhkiXTDPejPgRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18526069},"main":"./dist/dbr.pure.js","type":"module","types":"./dist/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/1.hello-world.html)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/3.read-video-angular)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/4.read-video-react)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/6.read-video-vue3)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/10.read-video-pwa)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.42&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/4.use-case/2.read-a-drivers-license.html)\r\n- 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.42/4.use-case/1.fill-a-form-with-barcode-reading.html)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.42](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.42).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.42&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.42&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"8.19.4","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","directories":{},"sideEffects":false,"_nodeVersion":"16.20.1","dependencies":{"dynamsoft-camera-enhancer":"3.3.10-beta-202406040017"},"publishConfig":{"tag":"beta","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"^2.6.2","rollup":"^3.29.4","fs-extra":"^8.1.0","typescript":"^4.9.5","mutable-promise":"^1.1.13","rollup-plugin-dts":"^6.1.0","@scannerproxy/dlsjs":"^3.0.20","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"0.1.17","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^3.0.2","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^2.0.8","@rollup/plugin-node-resolve":"^15.0.1","@scannerproxy/curscript-path":"^2.0.4"},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.42-beta-202406040303_1717495481606_0.33076538485982265","host":"s3://npm-registry-packages"}},"9.6.42-beta-202406210208":{"name":"dynamsoft-javascript-barcode","version":"9.6.42-beta-202406210208","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","_id":"dynamsoft-javascript-barcode@9.6.42-beta-202406210208","maintainers":[{"name":"Dynamsoft","email":"support@dynamsoft.com"}],"homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"dist":{"shasum":"72642dd69f46856651956d222f52577a5940e4b5","tarball":"https://registry.npmjs.org/dynamsoft-javascript-barcode/-/dynamsoft-javascript-barcode-9.6.42-beta-202406210208.tgz","fileCount":24,"integrity":"sha512-yUX/dFcLHc+ZvwxMwXI1tCWtQmzRvAiYCcBh0/hm9inqx65xT00m9DKEtDYdpRluIIT2nyAQy8wMfg4o+UlFqQ==","signatures":[{"sig":"MEUCICe4DYc/jrn9WE/NrLtvfcy88jvLbON6KQoqtCbFjG4SAiEAlFxo2Ni+N6uPXhFPmROTgtnPq1FVt+aeCHQtRJmpexk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18526276},"main":"./dist/dbr.pure.js","type":"module","types":"./dist/dbr.d.ts","module":"./dist/dbr.pure.esm.js","readme":"# Barcode Reader for Your Website - User Guide\r\n\r\n[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.\r\n\r\n\r\n\r\n\r\n\r\n\r\nOnce the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.\r\n\r\n\r\n\r\nIn this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.\r\n\r\nTable of Contents\r\n\r\n- [Hello World - Simplest Implementation](#hello-world---simplest-implementation)\r\n - [Understand the code](#understand-the-code)\r\n - [Run the example](#run-the-example)\r\n- [Building your own page](#building-your-own-page)\r\n - [Include the SDK](#include-the-sdk)\r\n - [Configure the SDK](#configure-the-sdk)\r\n - [Interact with the SDK](#interact-with-the-sdk)\r\n - [Customize the UI (optional)](#customize-the-ui-optional)\r\n- [API Documentation](#api-documentation)\r\n- [System Requirements](#system-requirements)\r\n- [How to Upgrade](#how-to-upgrade)\r\n- [Release Notes](#release-notes)\r\n- [Next Steps](#next-steps)\r\n\r\n**Popular Examples**\r\n\r\n- Hello World - [Guide](#hello-world---simplest-implementation) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/1.hello-world.html)\r\n- Angular App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-angular.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/3.read-video-angular)\r\n- React App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-reactjs.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/4.read-video-react)\r\n- Vue App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-vuejsv3.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/6.read-video-vue3)\r\n- PWA App - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/helloworld-pwa.html?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/1.hello-world/10.read-video-pwa)\r\n- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/1.hello-world/14.read-video-webview)\r\n- Read Driver Licenses - [Guide](https://www.dynamsoft.com/barcode-reader/docs/core/programming/usecases/scan-and-parse-AAMVA.html?ver=9.6.42&utm_source=npm&&lang=js) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/4.use-case/2.read-a-drivers-license.html)\r\n- 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.42/4.use-case/1.fill-a-form-with-barcode-reading.html)\r\n- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/4.use-case/3.show-result-texts-on-the-video.html)\r\n- Debug Camera and Collect Video Frame - [Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/debug.html?lang=js&&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v9.6.42/5.others/debug)\r\n\r\nYou can also:\r\n\r\n- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=9.6.42&utm_source=npm) \\| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)\r\n- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v9.6.42/)\r\n\r\n## Hello World - Simplest Implementation\r\n\r\nLet's start with the \"Hello World\" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream. \r\n\r\n- Basic Requirements\r\n - Internet connection\r\n - [A supported browser](#system-requirements)\r\n - Camera access\r\n\r\n### Understand the code\r\n\r\nThe complete code of the \"Hello World\" example is shown below\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ```\r\n\r\n > 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` .\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/2jzeq1r6/)\r\n\r\n2. **[Optional] Add the camera list and resolution list**\r\n\r\n 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.\r\n\r\n ```html\r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/nbj75vxu/)\r\n\r\n ```html\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/25v08paf/)\r\n\r\n > 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.\r\n\r\n ```html\r\n \r\n ```\r\n\r\n [Try in JSFiddle](https://jsfiddle.net/DynamsoftTeam/tnfjks4q/)\r\n\r\n > 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 closest 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**.\r\n\r\n See the section of the Explore Features guide on [UI customization]({{site.features}}customize-the-ui.html?lang=js) to learn more.\r\n\r\n## API Documentation\r\n\r\nYou can check out the detailed documentation about the APIs of the SDK at\r\n[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.42](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=9.6.42).\r\n\r\n## System Requirements\r\n\r\nDBR requires the following features to work:\r\n\r\n- Secure context (HTTPS deployment)\r\n\r\n When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons\r\n \r\n - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.\r\n > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test.\r\n \r\n - Dynamsoft License requires a secure context to work.\r\n\r\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\r\n\r\n The above four features are required for the SDK to work.\r\n\r\n- `MediaDevices`/`getUserMedia`\r\n\r\n 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.42&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.\r\n\r\n- `getSettings`\r\n\r\n This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties.\r\n\r\nThe following table is a list of supported browsers based on the above requirements:\r\n\r\n Browser Name | Version\r\n :-: | :-:\r\n Chrome | v59+1\r\n Firefox | v52+ (v55+ on Android/iOS1)\r\n Edge2 | v16+\r\n Safari3 | v11+\r\n\r\n 1 iOS 14.3+ is required for camera video streaming in Chrome and Firefox or Apps using webviews.\r\n\r\n 2 On Edge, due to strict Same-origin policy, you must host the SDK files on the same domain as your web page.\r\n \r\n 3 Safari v11.x already has the required features, but it has many other issues, so we recommend v12+.\r\n\r\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above.\r\n\r\n## How to Upgrade\r\n\r\nIf 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.42&utm_source=npm).\r\n\r\n## Release Notes\r\n\r\nLearn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/?ver=latest).\r\n\r\n## Next Steps\r\n\r\nNow that you have got the SDK integrated, you can choose to move forward in the following directions\r\n\r\n1. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=latest)\r\n2. Learn how to make use of the [SDK features](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/explore-features/index.html?ver=latest)\r\n3. See how the SDK works in [Popular Use Cases](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-cases/index.html?ver=latest)\r\n","exports":{"import":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.esm.js"},"require":{"types":"./dist/dbr.d.ts","default":"./dist/dbr.pure.js"}},"private":false,"scripts":{"build":"rollup -c --environment BUILD:production","makeZip":"makeZip --package=dynamsoft-barcode-reader --version=auto --sampleBranch=9.x --structure=old","build-dev":"rollup -c --environment BUILD:development","build:doc":"typedoc","update:iv":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=internalVersion --tag=iv","update:dev":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=development --tag=latest","easyPublish":"npm run update:dev && npm run build-dev && npm publish","update:beta":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=beta --tag=beta","update:prod":"updatePackage --package=dynamsoft-javascript-barcode --version=auto --env=production --tag=latest","update:readme":"updateReadme --package=dynamsoft-barcode-reader --version=auto --branch=preview --html","updateDCE:dev":"updateImportedPkg --package=dynamsoft-camera-enhancer --dev","updateDCE:prod":"updateImportedPkg --package=dynamsoft-camera-enhancer --no-dev","updateLink:npm":"updateLink --source=npm","updateLink:zip":"updateLink --source=zip","updateLink:github":"updateLink --source=github"},"_npmUser":{"name":"dm_npm_publisher","email":"github@dynamsoft.com"},"deprecated":"This package is deprecated. Please use 'dynamsoft-barcode-reader-bundle' instead: https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle","repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"_npmVersion":"8.19.4","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","directories":{},"sideEffects":false,"_nodeVersion":"16.20.1","dependencies":{"dynamsoft-camera-enhancer":"3.3.10-beta-202406040017"},"publishConfig":{"tag":"beta","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"^2.6.2","rollup":"^3.29.4","fs-extra":"^8.1.0","typescript":"^4.9.5","mutable-promise":"^1.1.13","rollup-plugin-dts":"^6.1.0","@scannerproxy/dlsjs":"^3.0.20","@rollup/plugin-terser":"^0.4.4","@dynamsoft/rd2-scripts":"0.1.17","@rollup/plugin-replace":"^5.0.5","detect-browser-node-ssr":"^3.0.2","@rollup/plugin-typescript":"^11.1.6","@scannerproxy/browser-info":"^2.0.8","@rollup/plugin-node-resolve":"^15.0.1","@scannerproxy/curscript-path":"^2.0.4"},"_npmOperationalInternal":{"tmp":"tmp/dynamsoft-javascript-barcode_9.6.42-beta-202406210208_1718960995118_0.47970651446235424","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-12-20T05:29:56.511Z","modified":"2026-09-16T01:48:18.478Z","6.4.1":"2018-12-20T05:29:56.808Z","6.4.2":"2018-12-20T05:49:40.153Z","6.5.1":"2019-04-19T09:23:14.467Z","6.5.2":"2019-04-28T03:17:39.733Z","6.5.3":"2019-04-29T01:36:36.882Z","6.5.4":"2019-06-14T00:54:23.569Z","7.0.0":"2019-08-09T07:55:09.332Z","7.1.0-beta.1":"2019-08-27T08:55:42.420Z","7.1.0":"2019-08-30T07:36:58.304Z","7.1.1":"2019-09-12T02:07:48.482Z","7.1.2":"2019-10-21T07:42:59.354Z","7.1.3":"2019-10-24T02:45:28.006Z","7.2.2-v2":"2019-11-27T02:06:18.552Z","7.2.3-v2":"2019-12-24T01:55:50.799Z","7.3.0-v0":"2020-01-15T00:53:30.010Z","7.3.0-v1":"2020-01-20T09:00:38.441Z","7.3.0-v2":"2020-02-14T07:09:16.484Z","7.3.0-v3":"2020-04-02T02:44:47.545Z","7.3.0-v4":"2020-04-02T08:01:52.819Z","7.4.0-v0":"2020-05-12T09:24:46.471Z","7.4.0-v1":"2020-05-18T08:34:23.749Z","7.5.0-v0":"2020-08-03T05:43:55.226Z","7.5.0-v1":"2020-08-03T07:56:59.009Z","7.6.0":"2020-09-01T05:38:19.714Z","8.0.0":"2020-11-25T07:48:28.533Z","8.1.0":"2021-01-19T07:15:22.645Z","8.1.2":"2021-01-22T08:06:44.334Z","8.1.3":"2021-03-04T08:19:21.016Z","8.2.0":"2021-03-17T08:54:29.761Z","8.2.1":"2021-03-29T07:24:17.121Z","8.2.3":"2021-04-15T05:06:18.165Z","8.2.5":"2021-05-18T03:05:21.130Z","8.2.7":"2021-06-08T06:30:15.461Z","8.2.9":"2021-06-08T07:58:19.261Z","8.2.11":"2021-06-08T08:01:09.722Z","8.4.0":"2021-06-29T05:43:18.881Z","8.6.0":"2021-08-31T08:00:37.430Z","8.6.1":"2021-09-01T08:33:15.556Z","8.6.3":"2021-09-30T08:33:29.233Z","8.8.0":"2021-10-28T10:05:51.434Z","8.8.1":"2021-10-29T10:10:31.153Z","8.8.3":"2021-10-29T11:33:18.918Z","8.8.5":"2022-01-26T08:29:00.771Z","8.8.7":"2022-01-26T09:13:22.395Z","9.0.0":"2022-03-24T07:38:04.199Z","9.0.1":"2022-04-25T02:20:32.287Z","9.0.2":"2022-05-06T05:20:32.835Z","9.2.10-beta07270208":"2022-07-27T09:11:38.409Z","9.2.10-beta07271933":"2022-07-28T02:36:40.433Z","9.2.10-beta07272246":"2022-07-28T05:49:36.864Z","9.2.10":"2022-07-28T06:19:24.673Z","9.2.10-beta07280004":"2022-07-28T07:07:06.214Z","9.2.11-beta07280205":"2022-07-28T09:08:06.348Z","9.2.11":"2022-07-28T09:22:26.633Z","9.2.12-beta08032257":"2022-08-04T06:00:00.609Z","9.2.12-beta08032351":"2022-08-04T06:54:11.641Z","9.2.12":"2022-08-04T07:09:50.439Z","9.2.13-beta08100131":"2022-08-10T08:34:13.430Z","9.2.13":"2022-08-11T01:28:10.606Z","9.3.0-beta09252239":"2022-09-26T05:42:19.885Z","9.3.0":"2022-09-27T01:37:24.706Z","9.3.1-beta10082243":"2022-10-09T05:45:54.194Z","9.3.1-beta10092217":"2022-10-10T05:20:13.919Z","9.3.1":"2022-10-10T05:54:10.328Z","9.4.0-iv11082257":"2022-11-09T07:03:31.912Z","9.4.0-iv11082320":"2022-11-09T07:26:40.544Z","9.4.0-iv-202211222141":"2022-11-23T05:46:10.128Z","9.6.0-beta-202212130059":"2022-12-13T09:05:58.385Z","9.6.0-beta-202212130149":"2022-12-13T09:56:25.891Z","9.6.0":"2022-12-13T10:06:09.617Z","9.6.1-iv-202212150202":"2022-12-15T10:09:32.811Z","9.6.1-beta-202212182159":"2022-12-19T06:05:28.944Z","9.6.1":"2022-12-19T07:07:40.485Z","9.6.1-iv-202212230033":"2022-12-23T08:39:58.862Z","9.6.2-beta-202301140102":"2023-01-14T09:08:05.258Z","9.6.2":"2023-01-16T05:48:02.343Z","9.6.10-beta-202302201925":"2023-02-21T03:31:41.234Z","9.6.10-beta-202302202213":"2023-02-21T06:18:38.179Z","9.6.10":"2023-02-21T06:41:28.375Z","9.6.11-beta-202303121944":"2023-03-13T02:50:26.359Z","9.6.11-beta-202303122340":"2023-03-13T06:46:23.626Z","9.6.11":"2023-03-13T07:28:14.400Z","9.6.20-iv-202303280023":"2023-03-28T07:28:18.087Z","9.6.20-beta-202304120143":"2023-04-12T08:49:32.850Z","9.6.20-beta-202304171826":"2023-04-18T01:32:39.829Z","9.6.20-beta-202304172243":"2023-04-18T05:48:58.877Z","9.6.20":"2023-04-18T07:00:13.583Z","9.6.21-beta-202308022353":"2023-08-03T09:16:08.019Z","9.6.21":"2023-08-03T09:39:03.774Z","9.6.30-beta-202309130021":"2023-09-13T07:27:01.267Z","9.6.30":"2023-09-13T07:51:58.529Z","9.6.30-iv-202309261832":"2023-09-27T01:38:26.369Z","9.6.30-iv-202310102228":"2023-10-11T05:34:44.833Z","9.6.31-beta-202310112234":"2023-10-12T05:41:35.497Z","9.6.31":"2023-10-12T06:04:54.327Z","9.6.31-beta-202310191909":"2023-10-20T02:17:06.654Z","9.6.31-iv-202311010046":"2023-11-01T08:16:17.112Z","9.6.32-beta-202312061835":"2023-12-07T02:42:19.570Z","9.6.32":"2023-12-07T05:36:32.965Z","9.6.33-beta-202402032314":"2024-02-04T07:38:49.275Z","9.6.33":"2024-02-04T07:52:21.486Z","9.6.40-beta-202403141926":"2024-03-15T02:42:49.136Z","9.6.40-beta-202403142006":"2024-03-15T03:21:32.890Z","9.6.40":"2024-03-18T02:08:57.652Z","9.6.40-iv-202404120107":"2024-04-12T08:15:12.090Z","9.6.40-beta-202404242030":"2024-04-25T03:31:56.057Z","9.6.40-beta-202404242342":"2024-04-25T06:43:48.227Z","9.6.41-beta-202404250044":"2024-04-25T07:45:40.367Z","9.6.41":"2024-04-25T10:09:17.415Z","9.6.42-beta-202404252029":"2024-04-26T03:30:09.661Z","9.6.42":"2024-04-26T05:16:25.610Z","9.6.42-beta-202406040227":"2024-06-04T09:28:16.268Z","9.6.42-beta-202406040303":"2024-06-04T10:04:41.901Z","9.6.42-beta-202406210208":"2024-06-21T09:09:55.387Z"},"bugs":{"url":"https://github.com/dynamsoft/barcode-reader-javascript/issues"},"author":{"url":"https://www.dynamsoft.com","name":"Dynamsoft"},"license":"SEE LICENSE IN LICENSE","homepage":"https://www.dynamsoft.com/barcode-reader/sdk-javascript","keywords":["HTML5 barcode","JavaScript barcode","Web barcode","barcode","PDF417","QRCode","Aztec Code","WebAssembly","SDK","Linear barcode","1D barcode"],"repository":{"url":"git+https://github.com/dynamsoft/barcode-reader-javascript.git","type":"git"},"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","maintainers":[{"email":"lingxiao1002@gmail.com","name":"yushulx"},{"email":"jerson@dynamsoft.com","name":"dynamsoft_jerson"},{"email":"github@dynamsoft.com","name":"dm_npm_publisher"},{"email":"ellie@dynamsoft.com","name":"ellie-dynamsoft"}],"readme":"","readmeFilename":""}\r\n \r\n