feat: Add scanCodesInImage(...) to scan static Images via Barcode Scanner (#3995)

feat: scan barcodes in images

Author: mrousavy

apps/simple-camera/__tests__/visioncamera.barcode-scanner.harness.ts

@@ -0,0 +1,81 @@
+import { Image as RNImage } from 'react-native'
+import { describe, expect, it } from 'react-native-harness'
+import type { Image as NitroImage } from 'react-native-nitro-image'
+import { loadImage } from 'react-native-nitro-image'
+import {
+  type Barcode,
+  createBarcodeScanner,
+  type TargetBarcodeFormat,
+} from 'react-native-vision-camera-barcode-scanner'
+import { withTimeout } from './test-utils'
+
+const qrCodeAsset = require('../src/assets/qr-code-margelo.png')
+const code128Asset = require('../src/assets/code-128-mrousavy.png')
+
+describe('VisionCamera - Barcode Scanner', () => {
+  it('scans a QR code from a Nitro Image', async () => {
+    const barcodes = await scanCodesInAssetImage(qrCodeAsset, ['qr-code'])
+
+    expect(barcodes).toHaveLength(1)
+    expect(barcodes[0]?.format).toBe('qr-code')
+    expect(barcodes[0]?.rawValue).toBe('https://margelo.com')
+  })
+
+  it('scans a Code 128 barcode from a Nitro Image', async () => {
+    const code128Barcodes = await scanCodesInAssetImage(code128Asset, [
+      'code-128',
+    ])
+
+    expect(code128Barcodes).toHaveLength(1)
+    expect(code128Barcodes[0]?.format).toBe('code-128')
+    expect(code128Barcodes[0]?.rawValue).toBe('https://mrousavy.com')
+
+    const allFormatBarcodes = await scanCodesInAssetImage(code128Asset, [
+      'all-formats',
+    ])
+
+    expect(allFormatBarcodes).toHaveLength(1)
+    expect(allFormatBarcodes[0]?.format).toBe('code-128')
+    expect(allFormatBarcodes[0]?.rawValue).toBe('https://mrousavy.com')
+  })
+})
+
+async function scanCodesInAssetImage(
+  source: number,
+  barcodeFormats: TargetBarcodeFormat[],
+): Promise<Barcode[]> {
+  const image = await loadNitroImageFromAsset(source)
+  return await scanLoadedImage(image, barcodeFormats)
+}
+
+async function loadNitroImageFromAsset(source: number): Promise<NitroImage> {
+  const resolvedSource = RNImage.resolveAssetSource(source)
+  const response = await fetch(resolvedSource.uri)
+  const buffer = await response.arrayBuffer()
+
+  return await loadImage({
+    encodedImageData: {
+      buffer,
+      width: resolvedSource.width,
+      height: resolvedSource.height,
+      imageFormat: 'png',
+    },
+  })
+}
+
+async function scanLoadedImage(
+  image: NitroImage,
+  barcodeFormats: TargetBarcodeFormat[],
+): Promise<Barcode[]> {
+  const scanner = createBarcodeScanner({ barcodeFormats })
+  try {
+    return await withTimeout(
+      scanner.scanCodesInImageAsync(image),
+      15_000,
+      `scan ${barcodeFormats.join(', ')} from image`,
+    )
+  } finally {
+    scanner.dispose()
+    image.dispose()
+  }
+}

apps/simple-camera/ios/Podfile.lock

@@ -2350,6 +2350,7 @@ PODS:
   - VisionCameraBarcodeScanner (5.0.11):
     - GoogleMLKit/BarcodeScanning (= 9.0.0)
     - hermes-engine
+    - NitroImage
     - NitroModules
     - RCTRequired
     - RCTTypeSafety
@@ -2846,7 +2847,7 @@ SPEC CHECKSUMS:
   RNVectorIcons: 97f26211c07d69e45b189f9dd0dbbe5e2d2b0b92
   RNWorklets: 04a35c45bd72d24914cbaf24bdfa4e30e1eab2df
   VisionCamera: 204d37d39a6a59b31bc48c777094be3096594810
-  VisionCameraBarcodeScanner: 5de8b7612ba93bf3a7fa2164938898d231c386fe
+  VisionCameraBarcodeScanner: 27f6ed59ad96425067a0ff582aacb0d89484115f
   VisionCameraLocation: a0289fd95ebd3317f60f52416319c5ac182bba21
   VisionCameraResizer: a35ea21e06bfb8f1e652dc5d1b7b20cb0fddc7a4
   VisionCameraWorklets: 38e14b319413d2caa6d9fa85062a003a821cf417

apps/simple-camera/src/assets/code-128-mrousavy.png

@@ -6,7 +6,7 @@ description: Using the Barcode Scanner view, output or plugin to detect Barcodes
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
 
 The Barcode Scanner allows detecting machine readable codes (like Barcodes or QR codes) using [MLKit](https://developers.google.com/ml-kit).
-It ships a simple [`<CodeScanner />`](/api/react-native-vision-camera-barcode-scanner/views/CodeScanner) view, a Barcode Scanner Frame Processor Plugin, and a Barcode Scanner [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput) via the [react-native-vision-camera-barcode-scanner](/api/react-native-vision-camera-barcode-scanner) library.
+It ships a simple [`<CodeScanner />`](/api/react-native-vision-camera-barcode-scanner/views/CodeScanner) view, a Barcode Scanner Frame Processor Plugin, a Barcode Scanner [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput), and static image scanning for [`Image`](https://github.com/mrousavy/react-native-nitro-image) instances via the [react-native-vision-camera-barcode-scanner](/api/react-native-vision-camera-barcode-scanner) library.
 
 Unlike [the Object Output](object-output) (which is iOS-only), the Barcode Scanner works on both iOS and Android.
 
@@ -15,7 +15,7 @@ Unlike [the Object Output](object-output) (which is iOS-only), the Barcode Scann
 
 ### Using the Barcode Scanner
 
-<Tabs items={["<CodeScanner /> (view)", "CameraOutput", "Frame Processor Plugin"]} groupId="barcode-api-style" persist>
+<Tabs items={["<CodeScanner /> (view)", "CameraOutput", "Frame Processor Plugin", "Static Images"]} groupId="barcode-api-style" persist>
 <Tab value="<CodeScanner /> (view)">
 The [`<CodeScanner />`](/api/react-native-vision-camera-barcode-scanner/views/CodeScanner) view is a simple view component to scan Barcodes:
 
@@ -95,11 +95,34 @@ function App() {
 }
 ```
 </Tab>
+<Tab value="Static Images">
+For still images, load a [`react-native-nitro-image`](https://github.com/mrousavy/react-native-nitro-image) [`Image`](https://github.com/mrousavy/react-native-nitro-image) and scan it with [`BarcodeScanner.scanCodesInImageAsync(...)`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/BarcodeScanner#scancodesinimageasync):
+
+```ts
+import { loadImage } from 'react-native-nitro-image'
+import { createBarcodeScanner } from 'react-native-vision-camera-barcode-scanner'
+
+async function scanBarcodeImage() {
+  const image = await loadImage({ url: 'https://example.com/barcode.png' })
+  const barcodeScanner = createBarcodeScanner({
+    barcodeFormats: ['all-formats'],
+  })
+
+  try {
+    const barcodes = await barcodeScanner.scanCodesInImageAsync(image)
+    console.log(`Detected ${barcodes.length} barcodes!`)
+  } finally {
+    image.dispose()
+    barcodeScanner.dispose()
+  }
+}
+```
+</Tab>
 </Tabs>
 
 ### Configuring Barcode Formats
 
-The code example above are configured to detect **all** [`BarcodeFormat`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat)s.
+The examples above are configured to detect **all** [`BarcodeFormat`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat)s.
 To improve performance, you should narrow [`barcodeFormats`](/api/react-native-vision-camera-barcode-scanner/interfaces/BarcodeScannerOptions#barcodeformats) down to only the formats you need - for example [`'code-128'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat) - which is a common Barcode Format, or [`'qr-code'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat) for square QR codes.
 
 ### Test it

apps/simple-camera/src/assets/qr-code-margelo.png

@@ -22,7 +22,7 @@ Both VisionCamera and Expo Camera are popular Camera libraries for React Native
 | Capturing [Videos](video-output)                                                                                         | ✅            | ✅                       |
 | Barcode [Scanning](barcode-scanner)                                                                                      | ✅            | ✅                       |
 | System [Barcode Scanner UI](https://docs.expo.dev/versions/latest/sdk/camera/#launchscanneroptions)                      | ❌            | ✅                       |
-| Scan [Barcodes from Image URL](https://docs.expo.dev/versions/latest/sdk/camera/#camerascanfromurlasyncurl-barcodetypes) | ❌            | ✅                       |
+| Scan [Barcodes from Image URL](barcode-scanner#using-the-barcode-scanner)                                               | ✅            | ✅                       |
 | Locking [AE/AF/AWB](locking-ae-af-awb)                                                                                   | ✅            | ❌                       |
 | Configurable [`focusTo(...)`](tap-to-focus#focus-metering-options)                                                       | ✅            | ❌                       |
 | Realtime [Frame Processing](frame-output)                                                                                | ✅            | ❌                       |

bun.lock

@@ -3,15 +3,17 @@
 This is VisionCamera Barcode Scanner. Install it through npm:
 
 ```sh
-npm install react-native-vision-camera-barcode-scanner
+npm install react-native-vision-camera-barcode-scanner react-native-nitro-image
 ```
 
-VisionCamera Barcode Scanner depends on VisionCamera Core.
+VisionCamera Barcode Scanner depends on VisionCamera Core and Nitro Image.
 
 ```sh
-# Make sure VisionCamera Core is installed.
+# Make sure VisionCamera Core is installed as well.
 ```
 
+You can scan live camera frames, attach a Barcode Scanner output, or scan an existing Nitro Image with `BarcodeScanner.scanCodesInImageAsync(...)`.
+
 ## Minimum Requirements
 
 The `GoogleMLKit/BarcodeScanning` dependency (version `9.0.0`) requires a minimum iOS target version of 15.5. Adjust it in your `Podfile` if needed.

docs/content/docs/barcode-scanner.mdx

@@ -28,6 +28,7 @@ Pod::Spec.new do |s|
 
   s.dependency 'GoogleMLKit/BarcodeScanning', '9.0.0'
   s.dependency 'VisionCamera'
+  s.dependency 'NitroImage'
   s.dependency 'React-jsi'
   s.dependency 'React-callinvoker'
   install_modules_dependencies(s)

docs/content/docs/visioncamera-vs-expo-camera.mdx

@@ -21,11 +21,13 @@ include_directories(
 
 find_library(LOG_LIB log)
 find_package(react-native-vision-camera REQUIRED)   # <-- for the HybridFrameSpec and HybridCameraOutputSpec
+find_package(react-native-nitro-image REQUIRED)     # <-- for the HybridImageSpec
 
 # Link all libraries together
 target_link_libraries(
         ${PACKAGE_NAME}
         ${LOG_LIB}
         android                                   # <-- Android core
         react-native-vision-camera::VisionCamera
+        react-native-nitro-image::NitroImage
 )