capacitor-card-scanner 0.0.1

package/CapacitorCardScanner.podspec

@@ -0,0 +1,17 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name = 'CapacitorCardScanner'
+  s.version = package['version']
+  s.summary = package['description']
+  s.license = package['license']
+  s.homepage = package['repository']['url']
+  s.author = package['author']
+  s.source = { :git => package['repository']['url'], :tag => s.version.to_s }
+  s.source_files = 'ios/Sources/**/*.{swift,h,m,c,cc,mm,cpp}'
+  s.ios.deployment_target = '15.0'
+  s.dependency 'Capacitor'
+  s.swift_version = '5.1'
+end

package/Package.swift

@@ -0,0 +1,28 @@
+// swift-tools-version: 5.9
+import PackageDescription
+
+let package = Package(
+    name: "CapacitorCardScanner",
+    platforms: [.iOS(.v15)],
+    products: [
+        .library(
+            name: "CapacitorCardScanner",
+            targets: ["CardScannerPlugin"])
+    ],
+    dependencies: [
+        .package(url: "https://github.com/ionic-team/capacitor-swift-pm.git", from: "8.0.0")
+    ],
+    targets: [
+        .target(
+            name: "CardScannerPlugin",
+            dependencies: [
+                .product(name: "Capacitor", package: "capacitor-swift-pm"),
+                .product(name: "Cordova", package: "capacitor-swift-pm")
+            ],
+            path: "ios/Sources/CardScannerPlugin"),
+        .testTarget(
+            name: "CardScannerPluginTests",
+            dependencies: ["CardScannerPlugin"],
+            path: "ios/Tests/CardScannerPluginTests")
+    ]
+)

package/README.md

@@ -0,0 +1,268 @@
+# capacitor-card-scanner
+
+Recognize a pokemon card with camera open in background
+
+## Install
+
+To use npm
+
+```bash
+npm install capacitor-card-scanner
+````
+
+To use yarn
+
+```bash
+yarn add capacitor-card-scanner
+```
+
+Sync native files
+
+```bash
+npx cap sync
+```
+
+## How it works
+
+The native camera preview is placed **behind** the WebView and the WebView is
+made transparent. Your HTML UI (buttons, overlays, the card frame) is drawn on
+top of the live camera feed.
+
+For the camera to be visible, **every element between the page and the camera
+must have a transparent background** (`html`, `body` and the layout containers).
+
+### iOS
+
+Add to the app's `Info.plist`:
+
+```xml
+<key>NSCameraUsageDescription</key>
+<string>The camera is used to scan cards</string>
+```
+
+### OutSystems
+
+1. Add a CSS class to the Theme / screen:
+
+   ```css
+   body.camera-active,
+   body.camera-active .layout,
+   body.camera-active .main,
+   body.camera-active .main-content,
+   body.camera-active .content,
+   body.camera-active .screen,
+   body.camera-active .active-screen {
+     background: transparent !important;
+   }
+   ```
+
+2. On the screen `OnReady` (JavaScript node):
+
+   ```js
+   const { CardScanner } = Capacitor.Plugins;
+   document.body.classList.add('camera-active');
+   await CardScanner.start({ position: 'rear' });
+   ```
+
+3. On `OnDestroy`:
+
+   ```js
+   document.body.classList.remove('camera-active');
+   await Capacitor.Plugins.CardScanner.stop();
+   ```
+
+4. Button to scan:
+
+   ```js
+   const photo = await Capacitor.Plugins.CardScanner.capture({ quality: 80 });
+   $parameters.ImageBase64 = photo.base64;
+   ```
+
+## API
+
+<docgen-index>
+
+* [`start(...)`](#start)
+* [`stop()`](#stop)
+* [`capture(...)`](#capture)
+* [`setTorch(...)`](#settorch)
+* [`setZoom(...)`](#setzoom)
+* [`flip()`](#flip)
+* [`checkPermissions()`](#checkpermissions)
+* [`requestPermissions()`](#requestpermissions)
+* [Interfaces](#interfaces)
+* [Type Aliases](#type-aliases)
+
+</docgen-index>
+
+<docgen-api>
+<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->
+
+### start(...)
+
+```typescript
+start(options?: StartOptions | undefined) => Promise<void>
+```
+
+Opens the camera **behind** the WebView. The WebView background is made
+transparent, so the HTML page must also use transparent backgrounds
+where the camera should be visible.
+
+| Param         | Type                                                  |
+| ------------- | ----------------------------------------------------- |
+| **`options`** | <code><a href="#startoptions">StartOptions</a></code> |
+
+--------------------
+
+
+### stop()
+
+```typescript
+stop() => Promise<void>
+```
+
+Stops the camera and removes the preview.
+
+--------------------
+
+
+### capture(...)
+
+```typescript
+capture(options?: CaptureOptions | undefined) => Promise<CaptureResult>
+```
+
+Takes a photo from the running camera.
+
+| Param         | Type                                                      |
+| ------------- | --------------------------------------------------------- |
+| **`options`** | <code><a href="#captureoptions">CaptureOptions</a></code> |
+
+**Returns:** <code>Promise&lt;<a href="#captureresult">CaptureResult</a>&gt;</code>
+
+--------------------
+
+
+### setTorch(...)
+
+```typescript
+setTorch(options: TorchOptions) => Promise<void>
+```
+
+Turns the flashlight on/off.
+
+| Param         | Type                                                  |
+| ------------- | ----------------------------------------------------- |
+| **`options`** | <code><a href="#torchoptions">TorchOptions</a></code> |
+
+--------------------
+
+
+### setZoom(...)
+
+```typescript
+setZoom(options: ZoomOptions) => Promise<void>
+```
+
+Sets the zoom ratio.
+
+| Param         | Type                                                |
+| ------------- | --------------------------------------------------- |
+| **`options`** | <code><a href="#zoomoptions">ZoomOptions</a></code> |
+
+--------------------
+
+
+### flip()
+
+```typescript
+flip() => Promise<void>
+```
+
+Switches between the rear and front camera.
+
+--------------------
+
+
+### checkPermissions()
+
+```typescript
+checkPermissions() => Promise<PermissionStatus>
+```
+
+**Returns:** <code>Promise&lt;<a href="#permissionstatus">PermissionStatus</a>&gt;</code>
+
+--------------------
+
+
+### requestPermissions()
+
+```typescript
+requestPermissions() => Promise<PermissionStatus>
+```
+
+**Returns:** <code>Promise&lt;<a href="#permissionstatus">PermissionStatus</a>&gt;</code>
+
+--------------------
+
+
+### Interfaces
+
+
+#### StartOptions
+
+| Prop           | Type                                                      | Description          | Default             |
+| -------------- | --------------------------------------------------------- | -------------------- | ------------------- |
+| **`position`** | <code><a href="#cameraposition">CameraPosition</a></code> | Which camera to use. | <code>'rear'</code> |
+
+
+#### CaptureResult
+
+| Prop         | Type                | Description                                       |
+| ------------ | ------------------- | ------------------------------------------------- |
+| **`base64`** | <code>string</code> | Base64 encoded JPEG (without the `data:` prefix). |
+| **`width`**  | <code>number</code> |                                                   |
+| **`height`** | <code>number</code> |                                                   |
+
+
+#### CaptureOptions
+
+| Prop          | Type                | Description           | Default         |
+| ------------- | ------------------- | --------------------- | --------------- |
+| **`quality`** | <code>number</code> | JPEG quality (0-100). | <code>85</code> |
+
+
+#### TorchOptions
+
+| Prop          | Type                 |
+| ------------- | -------------------- |
+| **`enabled`** | <code>boolean</code> |
+
+
+#### ZoomOptions
+
+| Prop        | Type                | Description                                           |
+| ----------- | ------------------- | ----------------------------------------------------- |
+| **`ratio`** | <code>number</code> | Zoom ratio, clamped between the camera's min and max. |
+
+
+#### PermissionStatus
+
+| Prop         | Type                                                        |
+| ------------ | ----------------------------------------------------------- |
+| **`camera`** | <code><a href="#permissionstate">PermissionState</a></code> |
+
+
+### Type Aliases
+
+
+#### CameraPosition
+
+<code>'rear' | 'front'</code>
+
+
+#### PermissionState
+
+<code>'prompt' | 'prompt-with-rationale' | 'granted' | 'denied'</code>
+
+</docgen-api>

package/android/build.gradle

@@ -0,0 +1,64 @@
+ext {
+    junitVersion = project.hasProperty('junitVersion') ? rootProject.ext.junitVersion : '4.13.2'
+    androidxAppCompatVersion = project.hasProperty('androidxAppCompatVersion') ? rootProject.ext.androidxAppCompatVersion : '1.7.1'
+    androidxJunitVersion = project.hasProperty('androidxJunitVersion') ? rootProject.ext.androidxJunitVersion : '1.3.0'
+    androidxEspressoCoreVersion = project.hasProperty('androidxEspressoCoreVersion') ? rootProject.ext.androidxEspressoCoreVersion : '3.7.0'
+}
+
+buildscript {
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:8.13.0'
+    }
+}
+
+apply plugin: 'com.android.library'
+
+android {
+    namespace = "pt.tcgclassifier.cardscanner"
+    compileSdk = project.hasProperty('compileSdkVersion') ? rootProject.ext.compileSdkVersion : 36
+    defaultConfig {
+        minSdkVersion project.hasProperty('minSdkVersion') ? rootProject.ext.minSdkVersion : 24
+        targetSdkVersion project.hasProperty('targetSdkVersion') ? rootProject.ext.targetSdkVersion : 36
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+        }
+    }
+    lintOptions {
+        abortOnError = false
+    }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_21
+        targetCompatibility JavaVersion.VERSION_21
+    }
+}
+
+
+repositories {
+    google()
+    mavenCentral()
+}
+
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar'])
+    implementation project(':capacitor-android')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    def camerax_version = "1.4.2"
+    implementation "androidx.camera:camera-core:$camerax_version"
+    implementation "androidx.camera:camera-camera2:$camerax_version"
+    implementation "androidx.camera:camera-lifecycle:$camerax_version"
+    implementation "androidx.camera:camera-view:$camerax_version"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <uses-permission android:name="android.permission.CAMERA" />
+</manifest>

package/android/src/main/java/pt/tcgclassifier/cardscanner/CardScanner.java

@@ -0,0 +1,195 @@
+package pt.tcgclassifier.cardscanner;
+
+import android.graphics.Bitmap;
+import android.graphics.BitmapFactory;
+import android.graphics.Color;
+import android.graphics.Matrix;
+import android.util.Base64;
+import android.view.ViewGroup;
+import android.webkit.WebView;
+import androidx.annotation.NonNull;
+import androidx.appcompat.app.AppCompatActivity;
+import androidx.camera.core.Camera;
+import androidx.camera.core.CameraSelector;
+import androidx.camera.core.ImageCapture;
+import androidx.camera.core.ImageCaptureException;
+import androidx.camera.core.ImageProxy;
+import androidx.camera.core.Preview;
+import androidx.camera.core.ZoomState;
+import androidx.camera.lifecycle.ProcessCameraProvider;
+import androidx.camera.view.PreviewView;
+import androidx.core.content.ContextCompat;
+import com.google.common.util.concurrent.ListenableFuture;
+import java.io.ByteArrayOutputStream;
+import java.nio.ByteBuffer;
+
+/**
+ * Places a CameraX preview behind the Capacitor WebView and makes the WebView
+ * transparent, so the HTML UI is drawn on top of the camera feed.
+ */
+public class CardScanner {
+
+    public interface Callback<T> {
+        void onSuccess(T result);
+        void onError(String message, Exception e);
+    }
+
+    public static class Photo {
+
+        public final String base64;
+        public final int width;
+        public final int height;
+
+        Photo(String base64, int width, int height) {
+            this.base64 = base64;
+            this.width = width;
+            this.height = height;
+        }
+    }
+
+    private final AppCompatActivity activity;
+    private final WebView webView;
+
+    private PreviewView previewView;
+    private ProcessCameraProvider cameraProvider;
+    private ImageCapture imageCapture;
+    private Camera camera;
+    private boolean useFront = false;
+
+    public CardScanner(AppCompatActivity activity, WebView webView) {
+        this.activity = activity;
+        this.webView = webView;
+    }
+
+    public boolean isRunning() {
+        return camera != null;
+    }
+
+    public boolean isFront() {
+        return useFront;
+    }
+
+    /** Must be called on the UI thread. */
+    public void start(boolean front, Callback<Void> callback) {
+        useFront = front;
+
+        if (previewView == null) {
+            previewView = new PreviewView(activity);
+            // TextureView-based mode composes correctly underneath a transparent WebView.
+            previewView.setImplementationMode(PreviewView.ImplementationMode.COMPATIBLE);
+            previewView.setScaleType(PreviewView.ScaleType.FILL_CENTER);
+            ViewGroup parent = (ViewGroup) webView.getParent();
+            parent.addView(previewView, 0, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
+        }
+
+        webView.setBackgroundColor(Color.TRANSPARENT);
+
+        ListenableFuture<ProcessCameraProvider> future = ProcessCameraProvider.getInstance(activity);
+        future.addListener(
+            () -> {
+                try {
+                    cameraProvider = future.get();
+                    bind();
+                    callback.onSuccess(null);
+                } catch (Exception e) {
+                    callback.onError("Failed to start camera: " + e.getMessage(), e);
+                }
+            },
+            ContextCompat.getMainExecutor(activity)
+        );
+    }
+
+    private void bind() {
+        cameraProvider.unbindAll();
+
+        Preview preview = new Preview.Builder().build();
+        preview.setSurfaceProvider(previewView.getSurfaceProvider());
+
+        imageCapture = new ImageCapture.Builder().setCaptureMode(ImageCapture.CAPTURE_MODE_MINIMIZE_LATENCY).build();
+
+        CameraSelector selector = useFront ? CameraSelector.DEFAULT_FRONT_CAMERA : CameraSelector.DEFAULT_BACK_CAMERA;
+        camera = cameraProvider.bindToLifecycle(activity, selector, preview, imageCapture);
+    }
+
+    /** Must be called on the UI thread. */
+    public void stop() {
+        if (cameraProvider != null) {
+            cameraProvider.unbindAll();
+        }
+        camera = null;
+        imageCapture = null;
+        if (previewView != null) {
+            ((ViewGroup) previewView.getParent()).removeView(previewView);
+            previewView = null;
+        }
+        webView.setBackgroundColor(Color.WHITE);
+    }
+
+    /** Must be called on the UI thread. */
+    public void flip(Callback<Void> callback) {
+        useFront = !useFront;
+        try {
+            bind();
+            callback.onSuccess(null);
+        } catch (Exception e) {
+            callback.onError("Failed to flip camera: " + e.getMessage(), e);
+        }
+    }
+
+    public void setTorch(boolean enabled) {
+        camera.getCameraControl().enableTorch(enabled);
+    }
+
+    public void setZoom(float ratio) {
+        ZoomState state = camera.getCameraInfo().getZoomState().getValue();
+        if (state != null) {
+            ratio = Math.max(state.getMinZoomRatio(), Math.min(state.getMaxZoomRatio(), ratio));
+        }
+        camera.getCameraControl().setZoomRatio(ratio);
+    }
+
+    public void capture(int quality, Callback<Photo> callback) {
+        imageCapture.takePicture(
+            ContextCompat.getMainExecutor(activity),
+            new ImageCapture.OnImageCapturedCallback() {
+                @Override
+                public void onCaptureSuccess(@NonNull ImageProxy image) {
+                    try {
+                        callback.onSuccess(toPhoto(image, quality));
+                    } catch (Exception e) {
+                        callback.onError("Failed to process image: " + e.getMessage(), e);
+                    } finally {
+                        image.close();
+                    }
+                }
+
+                @Override
+                public void onError(@NonNull ImageCaptureException e) {
+                    callback.onError("Capture failed: " + e.getMessage(), e);
+                }
+            }
+        );
+    }
+
+    private Photo toPhoto(ImageProxy image, int quality) {
+        ByteBuffer buffer = image.getPlanes()[0].getBuffer();
+        byte[] jpeg = new byte[buffer.remaining()];
+        buffer.get(jpeg);
+
+        Bitmap bitmap = BitmapFactory.decodeByteArray(jpeg, 0, jpeg.length);
+        int rotation = image.getImageInfo().getRotationDegrees();
+        if (rotation != 0) {
+            Matrix matrix = new Matrix();
+            matrix.postRotate(rotation);
+            Bitmap rotated = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
+            bitmap.recycle();
+            bitmap = rotated;
+        }
+
+        ByteArrayOutputStream out = new ByteArrayOutputStream();
+        bitmap.compress(Bitmap.CompressFormat.JPEG, quality, out);
+        Photo photo = new Photo(Base64.encodeToString(out.toByteArray(), Base64.NO_WRAP), bitmap.getWidth(), bitmap.getHeight());
+        bitmap.recycle();
+        return photo;
+    }
+}