@mleonard9/vin-scanner 0.1.1

package/package.json

@@ -0,0 +1,168 @@
+{
+  "name": "@mleonard9/vin-scanner",
+  "version": "0.1.1",
+  "description": "High-performance VIN scanner for React Native Vision Camera powered by Google ML Kit barcode + text recognition.",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace vin-scanner-example",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "vision-camera",
+    "vin",
+    "barcode",
+    "text-recognition",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mleonard9/vin-scanner.git"
+  },
+  "author": "mleonard9",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mleonard9/vin-scanner/issues"
+  },
+  "homepage": "https://github.com/mleonard9/vin-scanner#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.73.1",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "18.2.0",
+    "react-native": "0.73.6",
+    "react-native-builder-bob": "^0.20.0",
+    "react-native-vision-camera": "^4.0.1",
+    "react-native-worklets-core": "^1.2.0",
+    "release-it": "^15.0.0",
+    "turbo": "^1.10.7",
+    "typescript": "^5.2.2"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-vision-camera": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/index.tsx

@@ -0,0 +1,131 @@
+import React, { forwardRef, useMemo, useRef } from 'react';
+import {
+  Camera as VisionCamera,
+  type ReadonlyFrameProcessor,
+  useFrameProcessor,
+} from 'react-native-vision-camera';
+import { useRunOnJS } from 'react-native-worklets-core';
+import { createBarcodeScannerPlugin } from './scanBarcodes';
+import { createTextRecognitionPlugin } from './scanText';
+import type {
+  BarcodeScannerPlugin,
+  CameraTypes,
+  ForwardedRef,
+  TextRecognitionPlugin,
+  WorkletPayload,
+} from './types';
+import {
+  buildVinCandidates,
+  pickBestCandidate,
+  resolveOptions,
+  type ResolvedVinScannerOptions,
+} from './vinUtils';
+
+export const Camera = forwardRef(function Camera(
+  props: CameraTypes,
+  ref: ForwardedRef<any>
+) {
+  const { device, callback, options, ...rest } = props;
+
+  const resolvedOptions = useMemo<ResolvedVinScannerOptions>(
+    () => resolveOptions(options),
+    [options]
+  );
+
+  const barcodeScanner = useBarcodeScanner(resolvedOptions.barcode);
+  const textScanner = useTextScanner(resolvedOptions.text);
+  const lastEmissionRef = useRef<string | null | undefined>(undefined);
+
+  const handleDetections = useRunOnJS(
+    (payload: WorkletPayload) => {
+      const candidates = buildVinCandidates(payload, resolvedOptions);
+      const best = pickBestCandidate(candidates, resolvedOptions);
+      const mode = resolvedOptions.detection.resultMode;
+      const filteredCandidates =
+        mode === 'all' ? candidates : best ? [best] : [];
+      const fingerprint =
+        mode === 'all'
+          ? filteredCandidates.map((candidate) => candidate.value).join('|') ||
+            null
+          : (best?.value ?? null);
+
+      if (!resolvedOptions.detection.emitDuplicates) {
+        if (
+          lastEmissionRef.current !== undefined &&
+          fingerprint === lastEmissionRef.current
+        ) {
+          return;
+        }
+        lastEmissionRef.current = fingerprint;
+      }
+
+      callback({
+        mode,
+        timestamp: payload.timestamp,
+        candidates: filteredCandidates,
+        best: best ?? null,
+        raw: {
+          barcodes: payload.barcodes ?? [],
+          textBlocks: payload.textBlocks ?? [],
+        },
+      });
+    },
+    [callback, resolvedOptions]
+  );
+
+  const scanBarcodes = barcodeScanner?.scanBarcodes;
+  const scanText = textScanner?.scanText;
+
+  const frameProcessor: ReadonlyFrameProcessor = useFrameProcessor(
+    (frame) => {
+      'worklet';
+      const barcodes = scanBarcodes ? scanBarcodes(frame) : [];
+      const textBlocks = scanText ? scanText(frame) : [];
+      handleDetections({
+        barcodes: barcodes ?? [],
+        textBlocks: textBlocks ?? [],
+        timestamp:
+          typeof frame?.timestamp === 'number' ? frame.timestamp : Date.now(),
+      });
+    },
+    [scanBarcodes, scanText, handleDetections]
+  );
+
+  return (
+    <>
+      {!!device && (
+        <VisionCamera
+          pixelFormat="yuv"
+          ref={ref}
+          frameProcessor={frameProcessor}
+          device={device}
+          {...rest}
+        />
+      )}
+    </>
+  );
+});
+
+function useBarcodeScanner(
+  options: ResolvedVinScannerOptions['barcode']
+): BarcodeScannerPlugin | null {
+  return useMemo(() => {
+    if (!options.enabled) {
+      return null;
+    }
+    return createBarcodeScannerPlugin(options.formats);
+  }, [options.enabled, options.formats]);
+}
+
+function useTextScanner(
+  options: ResolvedVinScannerOptions['text']
+): TextRecognitionPlugin | null {
+  return useMemo(() => {
+    if (!options.enabled) {
+      return null;
+    }
+    return createTextRecognitionPlugin({
+      language: options.language,
+    });
+  }, [options.enabled, options.language]);
+}

package/src/scanBarcodes.ts

@@ -0,0 +1,76 @@
+import { Platform } from 'react-native';
+import {
+  type FrameProcessorPlugin,
+  VisionCameraProxy,
+} from 'react-native-vision-camera';
+import type {
+  BarcodeDetection,
+  BarcodeFormat,
+  BarcodeScannerPlugin,
+  Frame,
+  ScanBarcodeOptions,
+} from './types';
+
+const LINKING_ERROR: string =
+  `The package '@mleonard9/vin-scanner' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n';
+
+const DEFAULT_FORMATS: ScanBarcodeOptions = ['all'];
+
+const KNOWN_FORMATS: BarcodeFormat[] = [
+  'all',
+  'aztec',
+  'code-128',
+  'code-39',
+  'code-93',
+  'codabar',
+  'data-matrix',
+  'ean-13',
+  'ean-8',
+  'itf',
+  'pdf-417',
+  'qr',
+  'upc-a',
+  'upc-e',
+];
+
+type NativeBarcodeOptionMap = Partial<Record<BarcodeFormat, boolean>>;
+
+const toNativeBarcodeOptions = (
+  formats?: ScanBarcodeOptions
+): NativeBarcodeOptionMap => {
+  const sanitized = formats && formats.length > 0 ? formats : DEFAULT_FORMATS;
+  if (sanitized.includes('all')) {
+    return { all: true };
+  }
+  return sanitized.reduce<NativeBarcodeOptionMap>((acc, format) => {
+    if ((KNOWN_FORMATS as string[]).includes(format)) {
+      acc[format as BarcodeFormat] = true;
+    }
+    return acc;
+  }, {});
+};
+
+export function createBarcodeScannerPlugin(
+  formats: ScanBarcodeOptions
+): BarcodeScannerPlugin {
+  const pluginOptions = toNativeBarcodeOptions(formats);
+  const plugin: FrameProcessorPlugin | undefined =
+    VisionCameraProxy.initFrameProcessorPlugin('scanBarcodes', {
+      ...pluginOptions,
+    });
+  if (!plugin) {
+    throw new Error(LINKING_ERROR);
+  }
+  return {
+    scanBarcodes: (frame: Frame): BarcodeDetection[] => {
+      'worklet';
+      const result = plugin.call(frame);
+      return (Array.isArray(result)
+        ? result
+        : []) as unknown as BarcodeDetection[];
+    },
+  };
+}

package/src/scanText.ts

@@ -0,0 +1,36 @@
+import { Platform } from 'react-native';
+import {
+  type FrameProcessorPlugin,
+  VisionCameraProxy,
+} from 'react-native-vision-camera';
+import type {
+  Frame,
+  TextDetection,
+  TextRecognitionOptions,
+  TextRecognitionPlugin,
+} from './types';
+
+const LINKING_ERROR: string =
+  `The package '@mleonard9/vin-scanner' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n';
+
+export function createTextRecognitionPlugin(
+  options: TextRecognitionOptions
+): TextRecognitionPlugin {
+  const plugin: FrameProcessorPlugin | undefined =
+    VisionCameraProxy.initFrameProcessorPlugin('scanText', {
+      ...options,
+    });
+  if (!plugin) {
+    throw new Error(LINKING_ERROR);
+  }
+  return {
+    scanText: (frame: Frame): TextDetection[] => {
+      'worklet';
+      const result = plugin.call(frame);
+      return (Array.isArray(result) ? result : []) as TextDetection[];
+    },
+  };
+}

package/src/types.ts

@@ -0,0 +1,145 @@
+import type { CameraProps } from 'react-native-vision-camera';
+export type {
+  Frame,
+  ReadonlyFrameProcessor,
+  FrameProcessorPlugin,
+} from 'react-native-vision-camera';
+import type { Frame } from 'react-native-vision-camera';
+export type { ForwardedRef } from 'react';
+
+export type BarcodeFormat =
+  | 'all'
+  | 'aztec'
+  | 'code-128'
+  | 'code-39'
+  | 'code-93'
+  | 'codabar'
+  | 'data-matrix'
+  | 'ean-13'
+  | 'ean-8'
+  | 'itf'
+  | 'pdf-417'
+  | 'qr'
+  | 'upc-a'
+  | 'upc-e';
+
+export type ScanBarcodeOptions = BarcodeFormat[];
+
+export type BarcodeDetection = {
+  width?: number;
+  height?: number;
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+  rawValue?: string;
+  displayValue?: string;
+  format?: string;
+  [key: string]: number | string | undefined;
+};
+
+export type TextRecognitionLanguage =
+  | 'latin'
+  | 'chinese'
+  | 'devanagari'
+  | 'japanese'
+  | 'korean';
+
+export type TextDetection = {
+  blockFrameBottom?: number;
+  blockFrameLeft?: number;
+  blockFrameRight?: number;
+  blockFrameTop?: number;
+  blockText?: string;
+  elementFrameBottom?: number;
+  elementFrameLeft?: number;
+  elementFrameRight?: number;
+  elementFrameTop?: number;
+  elementText?: string;
+  lineFrameBottom?: number;
+  lineFrameLeft?: number;
+  lineFrameRight?: number;
+  lineFrameTop?: number;
+  lineText?: string;
+  resultText?: string;
+  size?: number;
+};
+
+export type TextRecognitionOptions = {
+  language?: TextRecognitionLanguage;
+};
+
+export type VinResultMode = 'best' | 'all';
+
+export type BoundingBox = {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+  width?: number;
+  height?: number;
+};
+
+export type VinCandidateSource = 'barcode' | 'text';
+
+export type VinCandidate = {
+  value: string;
+  source: VinCandidateSource;
+  confidence: number;
+  boundingBox?: BoundingBox;
+  origin?: 'rawValue' | 'displayValue' | 'block' | 'line' | 'element';
+  rawPayload?: BarcodeDetection | TextDetection;
+};
+
+export type VinScannerEvent = {
+  mode: VinResultMode;
+  timestamp: number;
+  candidates: VinCandidate[];
+  best?: VinCandidate | null;
+  raw: {
+    barcodes: BarcodeDetection[];
+    textBlocks: TextDetection[];
+  };
+};
+
+export type BarcodeScannerOptions = {
+  enabled?: boolean;
+  formats?: ScanBarcodeOptions;
+};
+
+export type TextScannerOptions = {
+  enabled?: boolean;
+  language?: TextRecognitionLanguage;
+};
+
+export type DetectionOptions = {
+  resultMode?: VinResultMode;
+  preferBarcode?: boolean;
+  validateChecksum?: boolean;
+  emitDuplicates?: boolean;
+};
+
+export type VinScannerOptions = {
+  barcode?: BarcodeScannerOptions;
+  text?: TextScannerOptions;
+  detection?: DetectionOptions;
+};
+
+export type CameraTypes = {
+  callback: (event: VinScannerEvent) => void;
+  options?: VinScannerOptions;
+} & CameraProps;
+
+export type BarcodeScannerPlugin = {
+  scanBarcodes: (frame: Frame) => BarcodeDetection[] | undefined;
+};
+
+export type TextRecognitionPlugin = {
+  scanText: (frame: Frame) => TextDetection[] | undefined;
+};
+
+export type WorkletPayload = {
+  barcodes?: BarcodeDetection[];
+  textBlocks?: TextDetection[];
+  timestamp: number;
+};