Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(barcode-scanning): add web support #211

Closed
wants to merge 8 commits into from
Closed

feat(barcode-scanning): add web support #211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
310451d
feat: add web support
robingenz Jun 21, 2023
160ec59
Merge branch 'main' into feat/issue-20
iBobik Jun 18, 2024
9fb88f9
Added docs for the videoElementId option.
iBobik Oct 21, 2024
d35d53e
Merge remote-tracking branch 'origin/main' into feat/issue-20
iBobik Oct 21, 2024
3fee6c9
Updated docs for barcode-scanning.
iBobik Nov 24, 2024
6f9cabc
Updated web plugin to support updated API and auto create video element.
iBobik Nov 24, 2024
576aaa8
Updated changeset.
iBobik Nov 24, 2024
016e89a
Added web to the README features list.
iBobik Nov 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/breezy-buckets-develop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@capacitor-mlkit/barcode-scanning': minor
---

Added web plugin
46 changes: 25 additions & 21 deletions packages/barcode-scanning/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Unofficial Capacitor plugin for [ML Kit Barcode Scanning](https://developers.goo
- ⏺️ Define detection area
- 🏞️ Reading barcodes from images
- 🔦 Torch and Autofocus support
- 🔋 Supports Android and iOS
- 🔋 Supports Android, iOS and web

For a complete list of **supported barcodes**, see [BarcodeFormat](#barcodeformat).

Expand Down Expand Up @@ -273,6 +273,12 @@ body.barcode-scanner-active {

If you can't see the camera view, make sure all elements in the DOM are not visible or have a transparent background to debug the issue.

### Web specifics

You can customize the camera view by using the `videoElementId` option.

Some browsers does not implement BarcodeDetector API ([see which](https://caniuse.com/mdn-api_barcodedetector)). If you need to support them you can use the [polyfill](https://www.npmjs.com/package/barcode-detector), the "Side Effects" approach.

## API

<docgen-index>
Expand Down Expand Up @@ -318,8 +324,6 @@ startScan(options?: StartScanOptions | undefined) => Promise<void>

Start scanning for barcodes.

Only available on Android and iOS.

| Param | Type |
| ------------- | ------------------------------------------------------------- |
| **`options`** | <code><a href="#startscanoptions">StartScanOptions</a></code> |
Expand All @@ -337,8 +341,6 @@ stopScan() => Promise<void>

Stop scanning for barcodes.

Only available on Android and iOS.

**Since:** 0.0.1

--------------------
Expand Down Expand Up @@ -400,8 +402,6 @@ isSupported() => Promise<IsSupportedResult>

Returns whether or not the barcode scanner is supported.

Available on Android and iOS.

**Returns:** <code>Promise&lt;<a href="#issupportedresult">IsSupportedResult</a>&gt;</code>

**Since:** 0.0.1
Expand All @@ -417,8 +417,6 @@ enableTorch() => Promise<void>

Enable camera's torch (flash) during a scan session.

Only available on Android and iOS.

**Since:** 0.0.1

--------------------
Expand Down Expand Up @@ -653,7 +651,7 @@ addListener(eventName: 'barcodeScanned', listenerFunc: (event: BarcodeScannedEve

Called when a barcode is scanned.

Available on Android and iOS.
Only available on Android and iOS.

| Param | Type |
| ------------------ | --------------------------------------------------------------------------------------- |
Expand All @@ -675,8 +673,6 @@ addListener(eventName: 'barcodesScanned', listenerFunc: (event: BarcodesScannedE

Called when barcodes are scanned.

Available on Android and iOS.

| Param | Type |
| ------------------ | ----------------------------------------------------------------------------------------- |
| **`eventName`** | <code>'barcodesScanned'</code> |
Expand All @@ -697,8 +693,6 @@ addListener(eventName: 'scanError', listenerFunc: (event: ScanErrorEvent) => voi

Called when an error occurs during the scan.

Available on Android and iOS.

| Param | Type |
| ------------------ | ----------------------------------------------------------------------------- |
| **`eventName`** | <code>'scanError'</code> |
Expand Down Expand Up @@ -751,10 +745,11 @@ Remove all listeners for this plugin.

#### StartScanOptions

| Prop | Type | Description | Since |
| ---------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----- |
| **`formats`** | <code>BarcodeFormat[]</code> | Improve the speed of the barcode scanner by configuring the barcode formats to scan for. | 0.0.1 |
| **`lensFacing`** | <code><a href="#lensfacing">LensFacing</a></code> | Configure the camera (front or back) to use. | 0.0.1 |
| Prop | Type | Description | Since |
| -------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
| **`formats`** | <code>BarcodeFormat[]</code> | Improve the speed of the barcode scanner by configuring the barcode formats to scan for. | 0.0.1 |
| **`lensFacing`** | <code><a href="#lensfacing">LensFacing</a></code> | Configure the camera (front or back) to use. | 0.0.1 |
| **`videoElementId`** | <code>string</code> | Element ID to set on the video element to use for the camera preview. Element will be crreated, but you can customize it with your own styles. Only available on Web. | 5.1.0 |


#### ReadBarcodesFromImageResult
Expand All @@ -768,12 +763,12 @@ Remove all listeners for this plugin.

| Prop | Type | Description | Since |
| ------------------ | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
| **`bytes`** | <code>number[]</code> | Raw bytes as it was encoded in the barcode. | 0.0.1 |
| **`bytes`** | <code>number[]</code> | Raw bytes as it was encoded in the barcode. Only available on Android and iOS. | 0.0.1 |
| **`cornerPoints`** | <code>[[number, number], [number, number], [number, number], [number, number]]</code> | The four corner points of the barcode in clockwise order starting with top-left. This property is currently only supported by the `startScan(...)` method. | 0.0.1 |
| **`displayValue`** | <code>string</code> | The barcode value in a human readable format. | 0.0.1 |
| **`displayValue`** | <code>string</code> | The barcode value in a human readable format. Only available on Android and iOS. | 0.0.1 |
| **`format`** | <code><a href="#barcodeformat">BarcodeFormat</a></code> | The barcode format. | 0.0.1 |
| **`rawValue`** | <code>string</code> | The barcode value in a machine readable format. | 0.0.1 |
| **`valueType`** | <code><a href="#barcodevaluetype">BarcodeValueType</a></code> | The barcode value type. | 0.0.1 |
| **`valueType`** | <code><a href="#barcodevaluetype">BarcodeValueType</a></code> | The barcode value type. Only available on Android and iOS. On web this property is always <a href="#barcodevaluetype">`BarcodeValueType.Unknown`</a>. | 0.0.1 |


#### ReadBarcodesFromImageOptions
Expand Down Expand Up @@ -900,6 +895,15 @@ Remove all listeners for this plugin.
### Type Aliases


#### BarcodeFormat

The possible types of barcode format that can be detected using the
Barcode Detection API. This list may change in the future.
Adapted from: https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API

<code>'aztec' | 'code_128' | 'code_39' | 'code_93' | 'codabar' | 'data_matrix' | 'ean_13' | 'ean_8' | 'itf' | 'pdf417' | 'qr_code' | 'upc_a' | 'upc_e' | 'unknown'</code>


#### CameraPermissionState

<code><a href="#permissionstate">PermissionState</a> | 'limited'</code>
Expand Down
85 changes: 85 additions & 0 deletions packages/barcode-scanning/src/barcode-detector.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@

/**
* The possible types of barcode format that can be detected using the
* Barcode Detection API. This list may change in the future.
* Adapted from: https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API
*/
export type BarcodeFormat = 'aztec'
| 'code_128'
| 'code_39'
| 'code_93'
| 'codabar'
| 'data_matrix'
| 'ean_13'
| 'ean_8'
| 'itf'
| 'pdf417'
| 'qr_code'
| 'upc_a'
| 'upc_e'
| 'unknown';

/**
* The return type of the Barcode Detect API `detect` function that
* describes a barcode that has been recognized by the API.
*/
export interface DetectedBarcode {
/**
* A DOMRectReadOnly, which returns the dimensions of a rectangle
* representing the extent of a detected barcode, aligned with the
* image
*/
boundingBox: DOMRectReadOnly;
/**
* The x and y co-ordinates of the four corner points of the detected
* barcode relative to the image, starting with the top left and working
* clockwise. This may not be square due to perspective distortions
* within the image.
*/
cornerPoints: [
{ x: number, y: number },
{ x: number, y: number },
{ x: number, y: number },
{ x: number, y: number },
];
/**
* The detected barcode format
*/
format: BarcodeFormat;

/**
* A string decoded from the barcode data
*/
rawValue: string;
}

/**
* Options for describing how a BarcodeDetector should be initialised
*/
export interface BarcodeDetectorOptions {
/**
* Which formats the barcode detector should detect
*/
formats?: BarcodeFormat[];
}

/**
* The BarcodeDetector interface of the Barcode Detection API allows
* detection of linear and two dimensional barcodes in images.
*/
export class BarcodeDetector {
/**
* Initialize a Barcode Detector instance
*/
constructor(options?: BarcodeDetectorOptions);

/**
* Retrieve the formats that are supported by the detector
*/
static getSupportedFormats(): Promise<BarcodeFormat[]>;

/**
* Attempt to detect barcodes from an image source
*/
public detect(source: ImageBitmapSource): Promise<DetectedBarcode[]>;
}
33 changes: 19 additions & 14 deletions packages/barcode-scanning/src/definitions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,12 @@ export interface BarcodeScannerPlugin {
/**
* Start scanning for barcodes.
*
* Only available on Android and iOS.
*
* @since 0.0.1
*/
startScan(options?: StartScanOptions): Promise<void>;
/**
* Stop scanning for barcodes.
*
* Only available on Android and iOS.
*
* @since 0.0.1
*/
stopScan(): Promise<void>;
Expand Down Expand Up @@ -45,16 +41,12 @@ export interface BarcodeScannerPlugin {
/**
* Returns whether or not the barcode scanner is supported.
*
* Available on Android and iOS.
*
* @since 0.0.1
*/
isSupported(): Promise<IsSupportedResult>;
/**
* Enable camera's torch (flash) during a scan session.
*
* Only available on Android and iOS.
*
* @since 0.0.1
* @deprecated Use the [Capacitor Torch](https://capawesome.io/plugins/torch/) plugin instead.
*/
Expand Down Expand Up @@ -176,7 +168,7 @@ export interface BarcodeScannerPlugin {
/**
* Called when a barcode is scanned.
*
* Available on Android and iOS.
* Only available on Android and iOS.
*
* @since 0.0.1
* @deprecated Use the `barcodesScanned` event listener instead.
Expand All @@ -188,8 +180,6 @@ export interface BarcodeScannerPlugin {
/**
* Called when barcodes are scanned.
*
* Available on Android and iOS.
*
* @since 6.2.0
*/
addListener(
Expand All @@ -199,8 +189,6 @@ export interface BarcodeScannerPlugin {
/**
* Called when an error occurs during the scan.
*
* Available on Android and iOS.
*
* @since 0.0.1
*/
addListener(
Expand Down Expand Up @@ -245,6 +233,16 @@ export interface StartScanOptions {
* @since 0.0.1
*/
lensFacing?: LensFacing;
/**
* Element ID to set on the video element to use for the
* camera preview. Element will be crreated, but you can
* customize it with your own styles.
*
* Only available on Web.
*
* @since 5.1.0
*/
videoElementId?: string;
}

/**
Expand Down Expand Up @@ -478,6 +476,8 @@ export interface Barcode {
/**
* Raw bytes as it was encoded in the barcode.
*
* Only available on Android and iOS.
*
* @since 0.0.1
* @example [67, 97, 112, 97, 99, 105, 116, 111, 114, 74, 83]
*/
Expand All @@ -501,10 +501,12 @@ export interface Barcode {
/**
* The barcode value in a human readable format.
*
* Only available on Android and iOS.
*
* @since 0.0.1
* @example "CapacitorJS"
*/
displayValue: string;
displayValue?: string;
/**
* The barcode format.
*
Expand All @@ -522,6 +524,9 @@ export interface Barcode {
/**
* The barcode value type.
*
* Only available on Android and iOS.
* On web this property is always `BarcodeValueType.Unknown`.
*
* @since 0.0.1
* @example "TEXT"
*/
Expand Down
Loading