Skip to content
This repository has been archived by the owner on Oct 10, 2024. It is now read-only.

Commit

Permalink
Mlkit android (#171)
Browse files Browse the repository at this point in the history
* ⬆️ Bump minimist from 1.2.5 to 1.2.6 (#112)

Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6.
- [Release notes](https://github.com/substack/minimist/releases)
- [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6)

---
updated-dependencies:
- dependency-name: minimist
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Reset last scanned code when resuming scan (#116)

* Update BarcodeScanner.java

reset scanResult after calling resumeScan

* Update Plugin.swift

reset scan result after calling resumeScan

* 2.1.1

* fix IOS orientation (#131)

Steps to reproduce :
open the app in portrait/landscape mode => rotate => open the camera 

Issue
the CameraView was being loaded when the app starts not with each scan.

Somehow the cameraView doesn't recognize that the app has rotated

* Capacitor v4 (#143)

* feat(capacitor): update to capacitor v4

* fix(ios): small bugfixes

* fix(ios): added self. to savedCall in scan() (#142)

Co-authored-by: Kristof Hauser <hauser.kristof@gmail.com>

* 3.0.0

* Add more detailed troubleshooting to the README (#152)

Added more detailed troubleshooting, with a fix for the following  #151

* fix(readme): typos and other enhancements

* iOS interface orientation obsolete (#146)

On iOS the `UIApplication.shared.statusBarOrientation` is deprecated and on newer versions obsolete. It has been replaced by code suggested here:
https://askcodes.net/coding/-statusbarorientation--was-deprecated-in-ios-13-0-when-attempting-to-get-app-orientation
#129

* fix(readme): added ionic stuff

* updating definitions

* adding dependencies

* updating permisions

* feat: Adding ML-Kit Logic

* updating XML Layout

* adding base for graphic drawing

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: PaintedShepherd <painted.shepherd@gmail.com>
Co-authored-by: Yannik Ache Eicher <ache@bbit.io>
Co-authored-by: Mohamed Abdelgwad <4671486+scr2em@users.noreply.github.com>
Co-authored-by: Kristof Hauser <hauser.kristof@gmail.com>
Co-authored-by: Raphaël Balet <raphael.balet@outlook.com>
Co-authored-by: Robin <rattenval@hotmail.com>
Co-authored-by: Abdulaziz Alghamdi <a.alghamdi@juleb.com>
  • Loading branch information
9 people authored Nov 18, 2022
1 parent 434edc5 commit f37570b
Show file tree
Hide file tree
Showing 17 changed files with 1,880 additions and 496 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"java.configuration.updateBuildConfiguration": "automatic"
}
96 changes: 80 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ On **Android** this library uses [`zxing-android-embedded`](https://github.com/j

### Note on supported Capacitor versions

`v3.x` supports Capacitor `v4.x`

`v2.x` supports Capacitor `v3.x`

`v1.x` supports Capacitor `v2.x`
Expand Down Expand Up @@ -117,7 +119,13 @@ Scanning a (QR) barcode can be as simple as:
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';

const startScan = async () => {
BarcodeScanner.hideBackground(); // make background of WebView transparent
// Check camera permission
// This is just a simple example, check out the better checks below
await BarcodeScanner.checkPermission({ force: true });

// 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

Expand All @@ -130,11 +138,11 @@ const startScan = async () => {

### Opacity of the WebView

Because of the fact that the Scanner View will be rendered behind the WebView, you will have to call `hideBackground()` to make the WebView and the `<html>` element transparent. Every other element that needs transparency, you will have to handle yourself.
`hideBackground()` will make the `<html>` element transparent by adding `background: 'transparent';` to the `style` attribute.

The `<html>` element is made transparent by adding `background: 'transparent';` to the `style=""` attribute. So in theory it is possible that this is overwritten by some CSS property in your setup. Because this plugin does not aim to fix every single scenario out there, you will have to think of a workaround for this yourself, if this applies to you (probably not).
If you are using Ionic you need to set some css variables as well, check [**here**](#ionic-css-variables)

If you still cannot see the camera view, check if any other elements are blocking it. For more info on this see [here](#the-scanner-view-does-not-show-up).
If you still cannot see the camera view, check [**here**](#the-scanner-view-does-not-show-up)

### Stopping a scan

Expand Down Expand Up @@ -291,9 +299,7 @@ const didUserGrantPermission = async () => {
// 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',
);
const c = confirm('We need your permission to use your camera to be able to scan barcodes');
if (!c) {
return false;
}
Expand Down Expand Up @@ -338,9 +344,7 @@ const checkPermission = async () => {
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.',
);
const c = confirm('If you want to grant permission for using your camera, enable it in the app settings.');
if (c) {
BarcodeScanner.openAppSettings();
}
Expand All @@ -353,10 +357,7 @@ const checkPermission = async () => {
You can setup the scanner to only recognize specific types of barcodes like this:

```ts
import {
BarcodeScanner,
SupportedFormat,
} from '@capacitor-community/barcode-scanner';
import { BarcodeScanner, SupportedFormat } from '@capacitor-community/barcode-scanner';

BarcodeScanner.startScan({ targetedFormats: [SupportedFormat.QR_CODE] }); // this will now only target QR-codes
```
Expand Down Expand Up @@ -491,6 +492,30 @@ The following types are supported:

## Troubleshooting

### Ionic CSS variables

Ionic will add additional CSS variables which will prevent the scanner from showing up.
To fix this issue add the following snippet at the end of your global css.

```css
body.scanner-active {
--background: transparent;
--ion-background-color: transparent;
}
```

Once this is done, you need to add this class to the body before using the scanner.

```typescript
document.querySelector('body').classList.add('scanner-active');
```

After your done with your scanning work, you can simply remove this class.

```typescript
document.querySelector('body').classList.remove('scanner-active');
```

### I have a `Error: Plugin BarcodeScanner does not respond to method call` error message on iOS

In Xcode click on `Product` > `Clean Build Folder` and try to build again.
Expand All @@ -501,12 +526,51 @@ In Android Studio click `File` > `Sync Project with Gradle Files` and try to bui

### The scanner view does not show up

First check that the camera permission is granted. If the scanner view does still not appear it is likely that some UI element is blocking it. Check out these issues for more information on how to resolve such an issue: [#7](https://github.com/capacitor-community/barcode-scanner/issues/7#issuecomment-744441148) and [#26](https://github.com/capacitor-community/barcode-scanner/issues/26)
If you cannot see the scanner in your viewport, please follow these steps:

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
- 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

It could mean that you have missed a step by the [plugin configuration](#installation).

#### I did the configuration correctly

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 toggling the flashlight
- Support for web
25 changes: 14 additions & 11 deletions android/build.gradle
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
ext {
junitVersion = project.hasProperty('junitVersion') ? rootProject.ext.junitVersion : '4.12'
androidxAppCompatVersion = project.hasProperty('androidxAppCompatVersion') ? rootProject.ext.androidxAppCompatVersion : '1.2.0'
androidxJunitVersion = project.hasProperty('androidxJunitVersion') ? rootProject.ext.androidxJunitVersion : '1.1.1'
androidxEspressoCoreVersion = project.hasProperty('androidxEspressoCoreVersion') ? rootProject.ext.androidxEspressoCoreVersion : '3.2.0'
junitVersion = project.hasProperty('junitVersion') ? rootProject.ext.junitVersion : '4.13.2'
androidxAppCompatVersion = project.hasProperty('androidxAppCompatVersion') ? rootProject.ext.androidxAppCompatVersion : '1.4.2'
androidxJunitVersion = project.hasProperty('androidxJunitVersion') ? rootProject.ext.androidxJunitVersion : '1.1.3'
androidxEspressoCoreVersion = project.hasProperty('androidxEspressoCoreVersion') ? rootProject.ext.androidxEspressoCoreVersion : '3.4.0'
}

buildscript {
Expand All @@ -11,17 +11,17 @@ buildscript {
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:7.0.2'
classpath 'com.android.tools.build:gradle:7.2.1'
}
}

apply plugin: 'com.android.library'

android {
compileSdkVersion project.hasProperty('compileSdkVersion') ? rootProject.ext.compileSdkVersion : 29
compileSdkVersion project.hasProperty('compileSdkVersion') ? rootProject.ext.compileSdkVersion : 32
defaultConfig {
minSdkVersion project.hasProperty('minSdkVersion') ? rootProject.ext.minSdkVersion : 21
targetSdkVersion project.hasProperty('targetSdkVersion') ? rootProject.ext.targetSdkVersion : 29
minSdkVersion project.hasProperty('minSdkVersion') ? rootProject.ext.minSdkVersion : 22
targetSdkVersion project.hasProperty('targetSdkVersion') ? rootProject.ext.targetSdkVersion : 32
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
Expand All @@ -36,21 +36,24 @@ android {
abortOnError false
}
compileOptions {
sourceCompatibility = 1.8
targetCompatibility = 1.8
sourceCompatibility = JavaVersion.VERSION_11
targetCompatibility = JavaVersion.VERSION_11
}
}

repositories {
google()
jcenter()
mavenCentral()
}


dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation project(':capacitor-android')
implementation 'androidx.camera:camera-core:1.1.0'
implementation 'androidx.camera:camera-view:1.1.0'
implementation 'androidx.camera:camera-lifecycle:1.1.0'
implementation 'com.google.android.gms:play-services-mlkit-barcode-scanning:18.1.0'
testImplementation "junit:junit:$junitVersion"
implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
Expand Down
2 changes: 1 addition & 1 deletion android/gradle/wrapper/gradle-wrapper.properties
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-bin.zip
distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
1 change: 1 addition & 0 deletions android/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,5 @@
<!-- <uses-feature android:name="android.hardware.camera" android:required="false" /> -->

<uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />
<uses-permission android:name="android.permission.VIBRATE" />
</manifest>
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
package com.getcapacitor.community.barcodescanner;

import static java.lang.Math.max;
import static java.lang.Math.min;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import com.google.mlkit.vision.barcode.common.Barcode;

public class BarcodeGraphic extends GraphicOverlay.Graphic {

private static final int TEXT_COLOR = Color.BLACK;
private static final int MARKER_COLOR = Color.WHITE;
private static final float TEXT_SIZE = 54.0f;
private static final float STROKE_WIDTH = 4.0f;
private static final String TAG = "Drawing";

private final Paint rectPaint;
private final Paint barcodePaint;
private final Barcode barcode;
private final Paint labelPaint;

BarcodeGraphic(GraphicOverlay overlay, Barcode barcode) {
super(overlay);
this.barcode = barcode;

rectPaint = new Paint();
rectPaint.setColor(MARKER_COLOR);
rectPaint.setStyle(Paint.Style.STROKE);
rectPaint.setStrokeWidth(STROKE_WIDTH);

barcodePaint = new Paint();
barcodePaint.setColor(TEXT_COLOR);
barcodePaint.setTextSize(TEXT_SIZE);

labelPaint = new Paint();
labelPaint.setColor(MARKER_COLOR);
labelPaint.setStyle(Paint.Style.FILL);
}

/**
* Draws the barcode block annotations for position, size, and raw value on the supplied canvas.
*/
@Override
public void draw(Canvas canvas) {
if (barcode == null) {
throw new IllegalStateException("Attempting to draw a null barcode.");
}
// Draws the bounding box around the BarcodeBlock.
RectF rect = new RectF(barcode.getBoundingBox());
// If the image is flipped, the left will be translated to right, and the right to left.
float x0 = translateX(rect.left);
float x1 = translateX(rect.right);
rect.left = min(x0, x1);
rect.right = max(x0, x1);
rect.top = translateY(rect.top);
rect.bottom = translateY(rect.bottom);
canvas.drawRect(rect, rectPaint);

// Draws other object info.
float lineHeight = TEXT_SIZE + (2 * STROKE_WIDTH);
float textWidth = barcodePaint.measureText(barcode.getDisplayValue());
canvas.drawRect(rect.left - STROKE_WIDTH, rect.top - lineHeight, rect.left + textWidth + (2 * STROKE_WIDTH), rect.top, labelPaint);
// Renders the barcode at the bottom of the box.
canvas.drawText(barcode.getDisplayValue(), rect.left, rect.top - STROKE_WIDTH, barcodePaint);
}
}
Loading

0 comments on commit f37570b

Please sign in to comment.