{"_id":"@aalzehla/barcode-scanner","_rev":"1-1c92743a09efb4c0103471202e2eeafe","name":"@aalzehla/barcode-scanner","dist-tags":{"latest":"4.0.3"},"versions":{"4.0.2":{"name":"@aalzehla/barcode-scanner","version":"4.0.2","keywords":["capacitor","plugin","native"],"author":{"name":"tafelnl"},"license":"MIT","_id":"@aalzehla/barcode-scanner@4.0.2","maintainers":[{"name":"aalzehla","email":"aalzehla@gmail.com"}],"homepage":"https://github.com/capacitor-community/barcode-scanner#readme","bugs":{"url":"https://github.com/aalzehla/barcode-scanner/issues"},"dist":{"shasum":"32fb1a3b7577d102e3a035b53157397214a31e49","tarball":"https://registry.npmjs.org/@aalzehla/barcode-scanner/-/barcode-scanner-4.0.2.tgz","fileCount":28,"integrity":"sha512-rBv5fDpHVvfsnVL5+48gKsF0dk9ByAiGda7OTNp2A7+bWj2YC/3gA3cfdtecmAPYqrTEA/zwaG944WtzlUBQmg==","signatures":[{"sig":"MEYCIQCjhnNiX2FumSZf8R27U6HnRttluQJ3P+irYHHaqemtbQIhAPmKPWsmDpWUBNLPpktmUIPJ7KyZM5eg89Xy9r4pokTJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176328},"main":"dist/plugin.cjs.js","types":"dist/esm/index.d.ts","unpkg":"dist/plugin.js","module":"dist/esm/index.js","gitHead":"ec289b59d0eaa46bc9afa1ed3e43f44733798913","scripts":{"lint":"npm run eslint && npm run prettier -- --check && npm run swiftlint -- lint","build":"npm run clean && tsc && rollup -c rollup.config.js --bundleConfigAsCjs","clean":"rimraf ./dist","watch":"tsc --watch","docgen":"docgen --api BarcodeScannerPlugin --output-readme API_REFERENCE.md","eslint":"eslint . --ext ts","verify":"npm run verify:ios && npm run verify:android && npm run verify:web","prettier":"prettier \"**/*.{css,html,ts,js,java}\"","swiftlint":"node-swiftlint","verify:ios":"cd ios && pod install && xcodebuild -workspace Plugin.xcworkspace -scheme Plugin -destination \"platform=iOS Simulator,name=iPhone 12\" && cd ..","verify:web":"npm run build","prepublishOnly":"npm run build","verify:android":"cd android && ./gradlew clean build test && cd .."},"_npmUser":{"name":"aalzehla","email":"aalzehla@gmail.com"},"prettier":"@ionic/prettier-config","capacitor":{"ios":{"src":"ios"},"android":{"src":"android"}},"swiftlint":"@ionic/swiftlint-config","repository":{"url":"git+https://github.com/aalzehla/barcode-scanner.git","type":"git"},"_npmVersion":"10.2.3","description":"A fast and efficient (QR) barcode scanner for Capacitor","directories":{"example":"examples"},"_nodeVersion":"18.19.0","dependencies":{"@zxing/browser":"^0.1.3","@zxing/library":"^0.20.0"},"eslintConfig":{"extends":"@ionic/eslint-config/recommended","ignorePatterns":["dist/**/*"]},"_hasShrinkwrap":false,"devDependencies":{"husky":"^8.0.3","eslint":"^8.40.0","rimraf":"^5.0.0","rollup":"^3.21.5","prettier":"~2.8.8","swiftlint":"^1.0.2","typescript":"~5.0.4","pretty-quick":"^3.1.3","@capacitor/ios":"^6.0.0","@capacitor/core":"^6.0.0","@capacitor/docgen":"0.2.1","@capacitor/android":"^6.0.0","@ionic/eslint-config":"^0.3.0","prettier-plugin-java":"~2.1.0","@ionic/prettier-config":"^3.0.0","@ionic/swiftlint-config":"^1.1.2"},"peerDependencies":{"@capacitor/core":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/barcode-scanner_4.0.2_1723906975461_0.1794688971448659","host":"s3://npm-registry-packages"}},"4.0.3":{"name":"@aalzehla/barcode-scanner","version":"4.0.3","description":"A fast and efficient (QR) barcode scanner for Capacitor","main":"dist/plugin.cjs.js","module":"dist/esm/index.js","types":"dist/esm/index.d.ts","unpkg":"dist/plugin.js","author":{"name":"tafelnl"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aalzehla/barcode-scanner.git"},"bugs":{"url":"https://github.com/aalzehla/barcode-scanner/issues"},"keywords":["capacitor","plugin","native"],"scripts":{"docgen":"docgen --api BarcodeScannerPlugin --output-readme API_REFERENCE.md","lint":"npm run eslint && npm run prettier -- --check && npm run swiftlint -- lint","eslint":"eslint . --ext ts","prettier":"prettier \"**/*.{css,html,ts,js,java}\"","swiftlint":"node-swiftlint","build":"npm run clean && tsc && rollup -c rollup.config.js --bundleConfigAsCjs","clean":"rimraf ./dist","watch":"tsc --watch","prepublishOnly":"npm run build","verify":"npm run verify:ios && npm run verify:android && npm run verify:web","verify:ios":"cd ios && pod install && xcodebuild -workspace Plugin.xcworkspace -scheme Plugin -destination \"platform=iOS Simulator,name=iPhone 12\" && cd ..","verify:android":"cd android && ./gradlew clean build test && cd ..","verify:web":"npm run build"},"devDependencies":{"@capacitor/android":"^6.0.0","@capacitor/core":"^6.0.0","@capacitor/docgen":"0.2.1","@capacitor/ios":"^6.0.0","@ionic/eslint-config":"^0.3.0","@ionic/prettier-config":"^3.0.0","@ionic/swiftlint-config":"^1.1.2","eslint":"^8.40.0","husky":"^8.0.3","prettier":"~2.8.8","prettier-plugin-java":"~2.1.0","pretty-quick":"^3.1.3","rimraf":"^5.0.0","rollup":"^3.21.5","swiftlint":"^1.0.2","typescript":"~5.0.4"},"peerDependencies":{"@capacitor/core":"^6.0.0"},"capacitor":{"ios":{"src":"ios"},"android":{"src":"android"}},"prettier":"@ionic/prettier-config","swiftlint":"@ionic/swiftlint-config","eslintConfig":{"extends":"@ionic/eslint-config/recommended","ignorePatterns":["dist/**/*"]},"homepage":"https://github.com/capacitor-community/barcode-scanner#readme","directories":{"example":"examples"},"dependencies":{"@zxing/browser":"^0.1.3","@zxing/library":"^0.20.0"},"_id":"@aalzehla/barcode-scanner@4.0.3","gitHead":"ec289b59d0eaa46bc9afa1ed3e43f44733798913","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-+DYNXf8GCjJQcQ/sRbZ16K+tz2eIalAKimVoUG5czwtItR6yYozGwNNTV1IZPKTraAhQ55bXy0LkAmJOFwkEFQ==","shasum":"705c687a2e398a01e8eeab89501adeed39892c81","tarball":"https://registry.npmjs.org/@aalzehla/barcode-scanner/-/barcode-scanner-4.0.3.tgz","fileCount":28,"unpackedSize":176314,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDEhm5GhHGQoisacnA4rycTYwlwMSellICr9nIftomogIgZjEbJzzS2X96NNOxsmzV3syRkJUVPzf0Sd5M7Kfw/LY="}]},"_npmUser":{"name":"aalzehla","email":"aalzehla@gmail.com"},"maintainers":[{"name":"aalzehla","email":"aalzehla@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/barcode-scanner_4.0.3_1723912926905_0.0325517096496859"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-17T15:02:55.351Z","modified":"2024-08-17T16:42:07.344Z","4.0.2":"2024-08-17T15:02:55.678Z","4.0.3":"2024-08-17T16:42:07.156Z"},"bugs":{"url":"https://github.com/aalzehla/barcode-scanner/issues"},"author":{"name":"tafelnl"},"license":"MIT","homepage":"https://github.com/capacitor-community/barcode-scanner#readme","keywords":["capacitor","plugin","native"],"repository":{"type":"git","url":"git+https://github.com/aalzehla/barcode-scanner.git"},"description":"A fast and efficient (QR) barcode scanner for Capacitor","maintainers":[{"name":"aalzehla","email":"aalzehla@gmail.com"}],"readme":"# DEPRECATED\n\nThis package is deprecated in favor of [`@capacitor-mlkit/barcode-scanning`](https://github.com/capawesome-team/capacitor-mlkit/tree/main/packages/barcode-scanning).\n`@capacitor-mlkit/barcode-scanning` has multiple features that are missing in this project, especially a prebuilt UI. \nNot having an out of the box solution was confusing for most users and caused a lot of issues.\nAdditionally, v5 of this plugin intended to switch to `ml-kit` and this brings additional problems if you want to use multiple parts of `ml-kit` in the same application, which is solved by `@capacitor-mlkit/barcode-scanning` as well.\n\n\n


\n

Barcode Scanner

\n

@capacitor-community/barcode-scanner

\n

\n A fast and efficient (QR) barcode scanner for Capacitor.\n

\n\n

\n \n \n
\n \n \n\n\n\n

\n\n## Table of Contents\n\n- [Maintainers](#maintainers)\n- [About](#about)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Troubleshooting](#troubleshooting)\n\n## Maintainers\n\n| Maintainer | GitHub | Active |\n| ---------- | ------------------------------------- | ------ |\n| thegnuu | [thegnuu](https://github.com/thegnuu) | no |\n| tafelnl | [tafelnl](https://github.com/tafelnl) | no |\n\n## About\n\n### Supported barcodes\n\nOn **iOS** this library makes use of Apple's own `AVFoundation`. This means **[this list of barcodes](https://developer.apple.com/documentation/avfoundation/avmetadatamachinereadablecodeobject/machine-readable_object_types)** should be supported.\n\nOn **Android** this library uses [`zxing-android-embedded`](https://github.com/journeyapps/zxing-android-embedded) which uses [`zxing`](https://github.com/zxing/zxing) under the hood. That means **[this list of barcodes](https://github.com/zxing/zxing/#supported-formats)** is supported.\n\nOn **Web** this library uses [`zxing/browser`](https://github.com/zxing-js/browser). That means **[this list of barcodes](https://github.com/zxing/zxing/#supported-formats)** is supported. The web implementation is currently in development, there might be issues and not all features are currently supported!\n\n### Note on supported Capacitor versions\n\n`v5.x.x-beta.x` pre-release based on ML-Kit that supports Capacitor `v5.x`\n\n`v4.x` supports Capacitor `v5.x`\n\n`v3.x` supports Capacitor `v4.x`\n\n`v2.x` supports Capacitor `v3.x`\n\n`v1.x` supports Capacitor `v2.x`\n\nAll releases of this package can be found on [npm](https://www.npmjs.com/package/@capacitor-community/barcode-scanner?activeTab=versions) and on [GitHub Releases](https://github.com/capacitor-community/barcode-scanner/releases)\n\n## Installation\n\n```bash\nnpm install @capacitor-community/barcode-scanner\nnpx cap sync\n```\n\n### iOS\n\nFor iOS you need to set a usage description in your info.plist file.\n\nThis can be done by either adding it to the Source Code directly or by using Xcode Property List inspector.\n\n**Adding it to the source code directly**\n\n1. Open up the Info.plist (in Xcode right-click > Open As > Source Code)\n2. With `` change the following\n\n```diff\n\n+ NSCameraUsageDescription\n+ To be able to scan barcodes\n\n```\n\n_NOTE:_ \"To be able to scan barcodes\" can be substituted for anything you like.\n\n**Adding it by using Xcode Property List inspector**\n\n1. Open up the Info.plist **in Xcode** (right-click > Open As > Property List)\n2. Next to \"Information Property List\" click on the tiny `+` button.\n3. Under `key`, type \"Privacy - Camera Usage Description\"\n4. Under `value`, type \"To be able to scan barcodes\"\n\n_NOTE:_ \"To be able to scan barcodes\" can be substituted for anything you like.\n\nMore info here: https://developer.apple.com/documentation/bundleresources/information_property_list/nscamerausagedescription\n\n### Android\n\nWithin your `AndroidManifest.xml` file, change the following:\n\n```diff\n\n\n\n \n \n\n+ \n\n+ \n\n```\n\n## Usage\n\nThe complete API reference can be found [here](./src/definitions.ts).\n\nScanning a (QR) barcode can be as simple as:\n\n```js\nimport { BarcodeScanner } from '@capacitor-community/barcode-scanner';\n\nconst startScan = async () => {\n // Check camera permission\n // This is just a simple example, check out the better checks below\n await BarcodeScanner.checkPermission({ force: true });\n\n // make background of WebView transparent\n // note: if you are using ionic this might not be enough, check below\n BarcodeScanner.hideBackground();\n\n const result = await BarcodeScanner.startScan(); // start scanning and wait for a result\n\n // if the result has content\n if (result.hasContent) {\n console.log(result.content); // log the raw scanned content\n }\n};\n```\n\n### Opacity of the WebView\n\n`hideBackground()` will make the `` element transparent by adding `background: 'transparent';` to the `style` attribute.\n\nIf you are using Ionic you need to set some css variables as well, check [**here**](#ionic-css-variables)\n\nIf you still cannot see the camera view, check [**here**](#the-scanner-view-does-not-show-up)\n\n### Stopping a scan\n\nAfter `startScan()` is resolved, the Scanner View will be automatically destroyed to save battery. But if you want to cancel the scan before `startScan()` is resolved (AKA no code has been recognized yet), you will have to call `stopScan()` manually. Example:\n\n```js\nimport { BarcodeScanner } from '@capacitor-community/barcode-scanner';\n\nconst stopScan = () => {\n BarcodeScanner.showBackground();\n BarcodeScanner.stopScan();\n};\n```\n\nIt is also important to think about cases where a users hits some sort of a back button (either hardware or software). It is advised to call `stopScan()` in these types of situations as well.\n\nIn Vue.js you could do something like this in a specific view where you use the scanner:\n\n```vue\n\n```\n\n### Preparing a scan\n\nTo boost performance and responsiveness (by just a bit), a `prepare()` method is available. If you know your script will call `startScan()` sometime very soon, you can call `prepare()` to make `startScan()` work even faster.\n\nFor example:\n\n```js\nimport { BarcodeScanner } from '@capacitor-community/barcode-scanner';\n\nconst prepare = () => {\n BarcodeScanner.prepare();\n};\n\nconst startScan = async () => {\n BarcodeScanner.hideBackground();\n const result = await BarcodeScanner.startScan();\n if (result.hasContent) {\n console.log(result.content);\n }\n};\n\nconst stopScan = () => {\n BarcodeScanner.showBackground();\n BarcodeScanner.stopScan();\n};\n\nconst askUser = () => {\n prepare();\n\n const c = confirm('Do you want to scan a barcode?');\n\n if (c) {\n startScan();\n } else {\n stopScan();\n }\n};\n\naskUser();\n```\n\nThis is fully optional and would work the same as:\n\n```js\nimport { BarcodeScanner } from '@capacitor-community/barcode-scanner';\n\nconst startScan = async () => {\n BarcodeScanner.hideBackground();\n const result = await BarcodeScanner.startScan();\n if (result.hasContent) {\n console.log(result.content);\n }\n};\n\nconst askUser = () => {\n const c = confirm('Do you want to scan a barcode?');\n\n if (c) {\n startScan();\n }\n};\n\naskUser();\n```\n\nThe latter will just appear a little slower to the user.\n\n### Permissions\n\nThis plugin does not automatically handle permissions. But the plugin _does_ have a utility method to check and request the permission. You will have to request the permission from JavaScript. A simple example follows:\n\n```js\nimport { BarcodeScanner } from '@capacitor-community/barcode-scanner';\n\nconst checkPermission = async () => {\n // check or request permission\n const status = await BarcodeScanner.checkPermission({ force: true });\n\n if (status.granted) {\n // the user granted permission\n return true;\n }\n\n return false;\n};\n```\n\nA more detailed and more UX-optimized example:\n\n```js\nimport { BarcodeScanner } from '@capacitor-community/barcode-scanner';\n\nconst didUserGrantPermission = async () => {\n // check if user already granted permission\n const status = await BarcodeScanner.checkPermission({ force: false });\n\n if (status.granted) {\n // user granted permission\n return true;\n }\n\n if (status.denied) {\n // user denied permission\n return false;\n }\n\n if (status.asked) {\n // system requested the user for permission during this call\n // only possible when force set to true\n }\n\n if (status.neverAsked) {\n // user has not been requested this permission before\n // it is advised to show the user some sort of prompt\n // this way you will not waste your only chance to ask for the permission\n const c = confirm('We need your permission to use your camera to be able to scan barcodes');\n if (!c) {\n return false;\n }\n }\n\n if (status.restricted || status.unknown) {\n // ios only\n // probably means the permission has been denied\n return false;\n }\n\n // user has not denied permission\n // but the user also has not yet granted the permission\n // so request it\n const statusRequest = await BarcodeScanner.checkPermission({ force: true });\n\n if (statusRequest.asked) {\n // system requested the user for permission during this call\n // only possible when force set to true\n }\n\n if (statusRequest.granted) {\n // the user did grant the permission now\n return true;\n }\n\n // user did not grant the permission, so he must have declined the request\n return false;\n};\n\ndidUserGrantPermission();\n```\n\nIf a user denied the permission for good, `status.denied` will be set to true. On Android this will happen only when the user checks the box `never ask again`. To get the permission anyway you will have to redirect the user to the settings of the app. This can be done simply be doing the following:\n\n```js\nimport { BarcodeScanner } from '@capacitor-community/barcode-scanner';\n\nconst checkPermission = async () => {\n const status = await BarcodeScanner.checkPermission();\n\n if (status.denied) {\n // the user denied permission for good\n // redirect user to app settings if they want to grant it anyway\n const c = confirm('If you want to grant permission for using your camera, enable it in the app settings.');\n if (c) {\n BarcodeScanner.openAppSettings();\n }\n }\n};\n```\n\n### Target only specific barcodes\n\nYou can setup the scanner to only recognize specific types of barcodes like this:\n\n```ts\nimport { BarcodeScanner, SupportedFormat } from '@capacitor-community/barcode-scanner';\n\nBarcodeScanner.startScan({ targetedFormats: [SupportedFormat.QR_CODE] }); // this will now only target QR-codes\n```\n\nIf `targetedFormats` is _not specified_ or _left empty_, _all types_ of barcodes will be targeted.\n\nTargeting only specific types can have the following benefits:\n\n- Improved performance (since the decoder only has to look for the specified barcodes)\n- Improved User Experience (since scanning a barcode that is not supported by your case, will not work)\n\nThe following types are supported:\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
CategoryTypeAndroidiOS
1D Product
UPC_A✔✔**
UPC_E✔✔
UPC_EAN_EXTENSION✔✖
EAN_8✔✔
EAN_13✔✔
1D Industrial
CODE_39✔✔
CODE_39_MOD_43✖✔
CODE_93✔✔
CODE_128✔✔
CODABAR✔✖
ITF✔✔
ITF_14✖✔
2D
AZTEC✔✔
DATA_MATRIX✔✔
MAXICODE✔✖
PDF_417✔✔
QR_CODE✔✔
RSS_14✔✖
RSS_EXPANDED✔✖
\n\n\\*\\* `UPC_A` is supported on iOS, but according to the offical [Apple docs](https://developer.apple.com/documentation/avfoundation/avmetadataobject/objecttype/1618807-ean13) it is part of `EAN_13`. So you should specify `EAN_13` to be able to scan this. If you want to distinguish them from one another, you should manually do so after getting the result.\n\n## Troubleshooting\n\n### Ionic CSS variables\n\nIonic will add additional CSS variables which will prevent the scanner from showing up.\nTo fix this issue add the following snippet at the end of your global css.\n\n```css\nbody.scanner-active {\n --background: transparent;\n --ion-background-color: transparent;\n}\n```\n\nOnce this is done, you need to add this class to the body before using the scanner.\n\n```typescript\ndocument.querySelector('body').classList.add('scanner-active');\n```\n\nAfter your done with your scanning work, you can simply remove this class.\n\n```typescript\ndocument.querySelector('body').classList.remove('scanner-active');\n```\n\n### I have a `Error: Plugin BarcodeScanner does not respond to method call` error message on iOS\n\nIn Xcode click on `Product` > `Clean Build Folder` and try to build again.\n\n### I have a `Cannot resolve symbol BarcodeScanner` error message in Android Studio\n\nIn Android Studio click `File` > `Sync Project with Gradle Files` and try to build again.\n\n### The scanner view does not show up\n\nIf you cannot see the scanner in your viewport, please follow these steps:\n\n1. Check if camera permissions are granted properly\n2. Check if the scanner element does appear inside the DOM, somewhere within the `body` tag\n - [It's not there](#i-do-not-find-the-scanner-in-the-dom)\n3. Check if some DOM elements are rendered on top of the scanner\n - Search which element is causing the issue [#7](https://github.com/capacitor-community/barcode-scanner/issues/7#issuecomment-744441148)\n - Play with javascript [#26](https://github.com/capacitor-community/barcode-scanner/issues/26)\n\n### I do not find the scanner in the DOM\n\nThis should appear in the DOM when running the `BarcodeScanner.startScan()` method.\n\n```html\n\n \n
\n BESbswy\n
\n \n\n```\n\nIf it does not, it may be a bug due to the component being loaded to deep inside the DOM tree.\nYou can try to see if the plugin is working properly by adding the following in your `app.component.ts` file.\n\n```typescript\nBarcodeScanner.hideBackground();\nconst result = await BarcodeScanner.startScan();\n```\n\n#### It doesn't appear\n\nIt could mean that you have missed a step by the [plugin configuration](#installation).\n\n#### I did the configuration correctly\n\nplease [open an issue](https://github.com/capacitor-community/barcode-scanner/issues/new/choose)\n\n## TODO\n\nA non-exhaustive list of todos:\n\n- Support for switching between cameras\n- Support for web\n","readmeFilename":"README.md"}