# QR Scanner Javascript QR Code Scanner based on [Cosmo Wolfe's javascript port](https://github.com/cozmo/jsqr) of [Google's ZXing library](https://github.com/zxing/zxing). In this library, several improvements have been applied over the original port: - Web cam scanning support out of the box - Uses the browser's native [BarcodeDetector](https://web.dev/shape-detection/) [if available](https://github.com/WICG/shape-detection-api#overview) - Lightweight: ~59.3 kB (~16.3 kB gzipped) minified with Google's closure compiler. If the native `BarcodeDetector` is available, only ~15.3 kB (~5.6 kB gzipped) are loaded. - Improved performance and reduced memory footprint. - Runs in a WebWorker which keeps the main / UI thread responsive. - Can be configured for better performance on colored QR codes. According to [our benchmarking](https://github.com/danimoh/qr-scanner-benchmark) this project's scanner engine's detection rate is about 2-3 times (and up to 8 times) as high as the one of the most popular javascript QR scanner library [LazarSoft/jsqrcode](https://github.com/LazarSoft/jsqrcode). Also the other library oftentimes misreads the content of QR codes, while for this project no misreads occurred in the benchmarking. The library supports scanning a continuous video stream from a web cam as well as scanning of single images. The development of this library is sponsored by [nimiq](https://www.nimiq.com), world's first browser based blockchain. [

](https://nimiq.com) ## Demo See [https://nimiq.github.io/qr-scanner/demo/](https://nimiq.github.io/qr-scanner/demo/) ## Installation To install via npm: ```bash npm install --save qr-scanner ``` To install via yarn: ```bash yarn add qr-scanner ``` Or simply copy `qr-scanner.min.js` and `qr-scanner-worker.min.js` to your project. ## Setup The QR Scanner consists of two main files. `qr-scanner.min.js` is the main API file which loads the worker script `qr-scanner-worker.min.js` via a dynamic import, only if needed. If you are not using a bundler like Rollup or Webpack that handles dynamic imports automatically, you might have to copy `qr-scanner-worker.min.js` over to your dist, next to `qr-scanner.min.js` or next to the script into which you're bundling `qr-scanner.min.js`. `qr-scanner.min.js` is an es6 module and can be imported as follows: ```js import QrScanner from 'path/to/qr-scanner.min.js'; // if using plain es6 import import QrScanner from 'qr-scanner'; // if installed via package and bundling with a module bundler like webpack or rollup ``` This requires the importing script to also be an es6 module or a module script tag, e.g.: ```html ``` If your project is not based on es6 modules you can - use a [dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports) to import the es6 module: ```js import('path/to/qr-scanner.min.js').then((module) => { const QrScanner = module.default; // do something with QrScanner }); ``` - use the [UMD build](https://github.com/umdjs/umd) `qr-scanner.umd.min.js` for direct usage as non-module script ```html ``` - bundle `qr-scanner.umd.min.js` directly with your non-module code with tools like [gulp](https://gulpjs.com/) or [grunt](https://gruntjs.com/). - bundle the lib with `require` based bundlers like [browserify](https://browserify.org/): ```js const QrScanner = require('qr-scanner'); // if installed via package const QrScanner = require('path/to/qr-scanner.umd.min.js'); // if not installed via package // do something with QrScanner ``` This library uses ECMAScript 2017 features like `async` functions. If you need to support old browsers, you can use `qr-scanner.legacy.min.js`, which is ECMAScript 2015 (ES6) compatible. It's a UMD build and can be used as a replacement for `qr-scanner.umd.min.js`, see above. Note, that the legacy build is larger as it includes some polyfills and, to support browsers that don't support dynamic imports, inlines the worker script which however would be needed to be loaded in legacy browsers anyway. You will likely not need to use the legacy build though, as general browser support is already very good for the regular build. Especially if you want to scan from the device's camera, camera support by the browser is the stricter restriction. ## Usage ### Web Cam Scanning #### 1. Create HTML Create a `

パッケージ	ダウンロード数	Stars	サイズ	Issues	公開日時	ライセンス

qr-scanner	86,418	2,770	524 kB	114	-	MIT