Socket
Socket
Sign inDemoInstall

@capacitor-community/barcode-scanner

Package Overview
Dependencies
2
Maintainers
42
Versions
17
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 5.0.0-beta.0 to 5.0.0-beta.1

2

package.json
{
"name": "@capacitor-community/barcode-scanner",
"version": "5.0.0-beta.0",
"version": "5.0.0-beta.1",
"description": "A fast and efficient (QR) barcode scanner for Capacitor",

@@ -5,0 +5,0 @@ "main": "dist/plugin.cjs.js",

435

README.md

@@ -5,3 +5,3 @@ <p align="center"><br><img src="https://user-images.githubusercontent.com/236501/85893648-1c92e880-b7a8-11ea-926d-95355b8175c7.png" width="128" height="128" /></p>

<p align="center">
A fast and efficient (QR) barcode scanner for Capacitor.
A fast and efficient (QR) barcode scanner for Capacitor based on ML-Kit.
</p>

@@ -39,14 +39,17 @@

On **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.
This libaray makes use of ML-Kit. This means **[this list of barcodes](https://developers.google.com/ml-kit/vision/barcode-scanning)** should be supported.
On **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.
### Note on supported Capacitor versions
`v3.x` supports Capacitor `v4.x`
`v5.x` supports Capacitor `v5.x` (not based on ML-Kit)
`v2.x` supports Capacitor `v3.x`
`v4.x` supports Capacitor `v4.x` (not based on ML-Kit)
`v1.x` supports Capacitor `v2.x`
`v3.x` supports Capacitor `v4.x` (not based on ML-Kit)
`v2.x` supports Capacitor `v3.x` (not based on ML-Kit)
`v1.x` supports Capacitor `v2.x` (not based on ML-Kit)
All 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)

@@ -98,15 +101,7 @@

<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
+ xmlns:tools="http://schemas.android.com/tools"
package="com.example">
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application
+ android:hardwareAccelerated="true"
>
</application>
+ <uses-permission android:name="android.permission.CAMERA" />
+ <uses-permission android:name="android.permission.VIBRATE" />
+ <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />
</manifest>

@@ -117,3 +112,3 @@ ```

The complete API reference can be found [here](./API_REFERENCE.md).
The complete API can be found [here](./src/definitions.ts).

@@ -125,18 +120,12 @@ Scanning a (QR) barcode can be as simple as:

const startScan = async () => {
// Check camera permission
// This is just a simple example, check out the better checks below
await BarcodeScanner.checkPermission({ force: true });
export class BarcodeExample {
public async startScan() {
await BarcodeScanner.requestPermission();
BarcodeScanner.start({}, (result) => {
console.log('barcode scanned', result);
});
};
}
// make background of WebView transparent
// note: if you are using ionic this might not be enough, check below
BarcodeScanner.hideBackground();
const result = await BarcodeScanner.startScan(); // start scanning and wait for a result
// if the result has content
if (result.hasContent) {
console.log(result.content); // log the raw scanned content
}
};
```

@@ -146,3 +135,3 @@

`hideBackground()` will make the `<html>` element transparent by adding `background: 'transparent';` to the `style` attribute.
The camera view will always be rendered behind the webview. You need to make sure that your viewport is transparent to see the camera.

@@ -153,348 +142,6 @@ If you are using Ionic you need to set some css variables as well, check [**here**](#ionic-css-variables)

### Stopping a scan
After `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:
```js
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
const stopScan = () => {
BarcodeScanner.showBackground();
BarcodeScanner.stopScan();
};
```
It 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.
In Vue.js you could do something like this in a specific view where you use the scanner:
```vue
<script>
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
export default {
methods: {
stopScan() {
BarcodeScanner.showBackground();
BarcodeScanner.stopScan();
},
},
deactivated() {
this.stopScan();
},
beforeDestroy() {
this.stopScan();
},
};
</script>
```
### Preparing a scan
To 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.
For example:
```js
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
const prepare = () => {
BarcodeScanner.prepare();
};
const startScan = async () => {
BarcodeScanner.hideBackground();
const result = await BarcodeScanner.startScan();
if (result.hasContent) {
console.log(result.content);
}
};
const stopScan = () => {
BarcodeScanner.showBackground();
BarcodeScanner.stopScan();
};
const askUser = () => {
prepare();
const c = confirm('Do you want to scan a barcode?');
if (c) {
startScan();
} else {
stopScan();
}
};
askUser();
```
This is fully optional and would work the same as:
```js
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
const startScan = async () => {
BarcodeScanner.hideBackground();
const result = await BarcodeScanner.startScan();
if (result.hasContent) {
console.log(result.content);
}
};
const askUser = () => {
const c = confirm('Do you want to scan a barcode?');
if (c) {
startScan();
}
};
askUser();
```
The latter will just appear a little slower to the user.
### Permissions
This 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:
This part of the readme will soon be updated.
```js
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
const checkPermission = async () => {
// check or request permission
const status = await BarcodeScanner.checkPermission({ force: true });
if (status.granted) {
// the user granted permission
return true;
}
return false;
};
```
A more detailed and more UX-optimized example:
```js
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
const didUserGrantPermission = async () => {
// check if user already granted permission
const status = await BarcodeScanner.checkPermission({ force: false });
if (status.granted) {
// user granted permission
return true;
}
if (status.denied) {
// user denied permission
return false;
}
if (status.asked) {
// system requested the user for permission during this call
// only possible when force set to true
}
if (status.neverAsked) {
// user has not been requested this permission before
// it is advised to show the user some sort of prompt
// this way you will not waste your only chance to ask for the permission
const c = confirm('We need your permission to use your camera to be able to scan barcodes');
if (!c) {
return false;
}
}
if (status.restricted || status.unknown) {
// ios only
// probably means the permission has been denied
return false;
}
// user has not denied permission
// but the user also has not yet granted the permission
// so request it
const statusRequest = await BarcodeScanner.checkPermission({ force: true });
if (statusRequest.asked) {
// system requested the user for permission during this call
// only possible when force set to true
}
if (statusRequest.granted) {
// the user did grant the permission now
return true;
}
// user did not grant the permission, so he must have declined the request
return false;
};
didUserGrantPermission();
```
If 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:
```js
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
const checkPermission = async () => {
const status = await BarcodeScanner.checkPermission();
if (status.denied) {
// the user denied permission for good
// redirect user to app settings if they want to grant it anyway
const c = confirm('If you want to grant permission for using your camera, enable it in the app settings.');
if (c) {
BarcodeScanner.openAppSettings();
}
}
};
```
### Target only specific barcodes
You can setup the scanner to only recognize specific types of barcodes like this:
```ts
import { BarcodeScanner, SupportedFormat } from '@capacitor-community/barcode-scanner';
BarcodeScanner.startScan({ targetedFormats: [SupportedFormat.QR_CODE] }); // this will now only target QR-codes
```
If `targetedFormats` is _not specified_ or _left empty_, _all types_ of barcodes will be targeted.
Targeting only specific types can have the following benefits:
- Improved performance (since the decoder only has to look for the specified barcodes)
- Improved User Experience (since scanning a barcode that is not supported by your case, will not work)
The following types are supported:
<table>
<thead>
<tr>
<th>Category</th>
<th>Type</th>
<th>Android</th>
<th>iOS</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="6">1D Product</td>
</tr>
<tr>
<td>UPC_A</td>
<td>✔</td>
<td>✔**</td>
</tr>
<tr>
<td>UPC_E</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td>UPC_EAN_EXTENSION</td>
<td>✔</td>
<td>✖</td>
</tr>
<tr>
<td>EAN_8</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td>EAN_13</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td rowspan="8">1D Industrial</td>
</tr>
<tr>
<td>CODE_39</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td>CODE_39_MOD_43</td>
<td>✖</td>
<td>✔</td>
</tr>
<tr>
<td>CODE_93</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td>CODE_128</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td>CODABAR</td>
<td>✔</td>
<td>✖</td>
</tr>
<tr>
<td>ITF</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td>ITF_14</td>
<td>✖</td>
<td>✔</td>
</tr>
<tr>
<td rowspan="8">2D</td>
</tr>
<tr>
<td>AZTEC</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td>DATA_MATRIX</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td>MAXICODE</td>
<td>✔</td>
<td>✖</td>
</tr>
<tr>
<td>PDF_417</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td>QR_CODE</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td>RSS_14</td>
<td>✔</td>
<td>✖</td>
</tr>
<tr>
<td>RSS_EXPANDED</td>
<td>✔</td>
<td>✖</td>
</tr>
</tbody>
</table>
\*\* `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.
## Troubleshooting

@@ -539,33 +186,6 @@

1. Check if camera permissions are granted properly
2. Check if the scanner element does appear inside the DOM, somewhere within the `body` tag
- [It's not there](#i-do-not-find-the-scanner-in-the-dom)
3. Check if some DOM elements are rendered on top of the scanner
2. Check if some DOM elements are rendered on top of the scanner
- Search which element is causing the issue [#7](https://github.com/capacitor-community/barcode-scanner/issues/7#issuecomment-744441148)
- Play with javascript [#26](https://github.com/capacitor-community/barcode-scanner/issues/26)
### I do not find the scanner in the DOM
This should appear in the DOM when running the `BarcodeScanner.startScan()` method.
```html
<body>
<!-- ... -->
<div style="position: absolute; left: 0px; top: -2px; height: 1px; overflow: hidden; visibility: hidden; width: 1px;">
<span
style="position: absolute; font-size: 300px; width: auto; height: auto; margin: 0px; padding: 0px; font-family: Roboto, Arial, sans-serif;"
>BESbswy</span
>
</div>
<!-- ... -->
</body>
```
If it does not, it may be a bug due to the component being loaded to deep inside the DOM tree.
You can try to see if the plugin is working properly by adding the following in your `app.component.ts` file.
```typescript
BarcodeScanner.hideBackground();
const result = await BarcodeScanner.startScan();
```
#### It doesn't appear

@@ -577,9 +197,2 @@

please [open an issue](https://github.com/capacitor-community/barcode-scanner/issues/new/choose)
## TODO
A non-exhaustive list of todos:
- Support for switching between cameras
- Support for web
please [open an issue](https://github.com/capacitor-community/barcode-scanner/issues/new/choose)
dist/esm/definitions.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc