【Expo】expo-cameraのバーコード読み取りで枠外の誤検出と多重発火を防ぐ

import { CameraView, useCameraPermissions } from "expo-camera"
import { StyleSheet, Text } from "react-native"
 
export default function ScanScreen() {
  const [permission] = useCameraPermissions({ request: true })
 
  if (!permission?.granted) {
    return <Text>カメラの使用許可が必要です</Text>
  }
 
  return (
    <CameraView
      style={StyleSheet.absoluteFill}
      barcodeScannerSettings={{ barcodeTypes: ["ean13", "ean8", "upc_a", "upc_e"] }}
      onBarcodeScanned={(result) => {
        console.log(result.data)
      }}
    />
  )
}

{
  "expo": {
    "plugins": [
      [
        "expo-camera",
        {
          "cameraPermission": "バーコードを読み取るためにカメラへのアクセスを許可してください",
          "recordAudioAndroid": false
        }
      ]
    ]
  }
}

export const normalizeJanCode = (data: string) => (data.length === 12 ? `0${data}` : data)

import { Pressable, StyleSheet, Text } from "react-native"
 
type Props = {
  isPressed: boolean
  onPressIn: () => void
  onPressOut: () => void
}
 
export function ScanButton({ isPressed, onPressIn, onPressOut }: Props) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={isPressed ? "スキャン中" : "スキャンボタン"}
      onPressIn={onPressIn}
      onPressOut={onPressOut}
      style={isPressed && styles.pressed}
    >
      <Text>読み取り</Text>
    </Pressable>
  )
}
 
const styles = StyleSheet.create({
  pressed: { opacity: 0.6 },
})

import { CameraView, useCameraPermissions } from "expo-camera"
import { useState } from "react"
import { StyleSheet, Text, View } from "react-native"
 
import { ScanButton } from "@/components/ScanButton"
 
export default function ScanScreen() {
  const [permission] = useCameraPermissions({ request: true })
  const [isButtonPressed, setIsButtonPressed] = useState(false)
 
  if (!permission?.granted) {
    return <Text>カメラの使用許可が必要です</Text>
  }
 
  return (
    <View style={styles.container}>
      <CameraView
        style={StyleSheet.absoluteFill}
        barcodeScannerSettings={{ barcodeTypes: ["ean13", "ean8", "upc_a", "upc_e"] }}
        onBarcodeScanned={(result) => {
          if (!isButtonPressed) return
          console.log(result.data)
        }}
      />
      <View style={styles.footer}>
        <ScanButton
          isPressed={isButtonPressed}
          onPressIn={() => setIsButtonPressed(true)}
          onPressOut={() => setIsButtonPressed(false)}
        />
      </View>
    </View>
  )
}
 
const styles = StyleSheet.create({
  container: { flex: 1 },
  footer: { position: "absolute", right: 32, bottom: 48, left: 32 },
})

import type { BarcodeScanningResult } from "expo-camera"
import { useRef, useState } from "react"
 
import { normalizeJanCode } from "@/libs/normalizeJanCode"
 
export function useScanner() {
  const isButtonPressedRef = useRef(false)
  const hasScannedRef = useRef(false)
  const [isButtonPressed, setIsButtonPressed] = useState(false)
  const [scannedJan, setScannedJan] = useState("")
 
  const handleBarcodeScanned = (result: BarcodeScanningResult) => {
    if (!isButtonPressedRef.current || hasScannedRef.current) return
    hasScannedRef.current = true
    setScannedJan(normalizeJanCode(result.data))
  }
 
  const startScanning = () => {
    if (hasScannedRef.current) return
    isButtonPressedRef.current = true
    setIsButtonPressed(true)
  }
 
  const stopScanning = () => {
    isButtonPressedRef.current = false
    setIsButtonPressed(false)
  }
 
  const reset = () => {
    isButtonPressedRef.current = false
    hasScannedRef.current = false
    setIsButtonPressed(false)
    setScannedJan("")
  }
 
  return {
    isButtonPressed,
    scannedJan,
    startScanning,
    stopScanning,
    reset,
    handleBarcodeScanned,
  }
}

import { useRef } from "react"
import type { LayoutChangeEvent, LayoutRectangle } from "react-native"
import { StyleSheet, View } from "react-native"
 
import type { ScanArea } from "@/types/scan"
 
type Props = {
  onScanAreaChange: (scanArea: ScanArea) => void
}
 
export function ScanFrame({ onScanAreaChange }: Props) {
  const rowLayoutRef = useRef<LayoutRectangle | null>(null)
  const holeLayoutRef = useRef<LayoutRectangle | null>(null)
 
  const emitScanArea = () => {
    const rowLayout = rowLayoutRef.current
    const holeLayout = holeLayoutRef.current
    if (rowLayout === null || holeLayout === null) return
 
    onScanAreaChange({
      x: rowLayout.x + holeLayout.x,
      y: rowLayout.y + holeLayout.y,
      width: holeLayout.width,
      height: holeLayout.height,
    })
  }
 
  const handleRowLayout = (event: LayoutChangeEvent) => {
    rowLayoutRef.current = event.nativeEvent.layout
    emitScanArea()
  }
 
  const handleHoleLayout = (event: LayoutChangeEvent) => {
    holeLayoutRef.current = event.nativeEvent.layout
    emitScanArea()
  }
 
  return (
    <View style={StyleSheet.absoluteFill} pointerEvents="none">
      <View style={styles.mask} />
      <View style={styles.row} onLayout={handleRowLayout}>
        <View style={styles.sideMask} />
        <View style={styles.hole} onLayout={handleHoleLayout} />
        <View style={styles.sideMask} />
      </View>
      <View style={styles.mask} />
    </View>
  )
}
 
const styles = StyleSheet.create({
  mask: { flex: 1, backgroundColor: "rgba(0, 0, 0, 0.8)" },
  row: { flexDirection: "row", height: 200 },
  sideMask: { width: "12.5%", backgroundColor: "rgba(0, 0, 0, 0.8)" },
  hole: { flex: 1 },
})

export type ScanArea = {
  x: number
  y: number
  width: number
  height: number
}

import type { BarcodeScanningResult } from "expo-camera"
 
import type { ScanArea } from "@/types/scan"
 
export function isBarcodeInScanArea(bounds: BarcodeScanningResult["bounds"], scanArea: ScanArea | null) {
  if (scanArea === null) return true
 
  const { origin, size } = bounds
  if (size.width === 0 || size.height === 0) return true
 
  const centerX = origin.x + size.width / 2
  const centerY = origin.y + size.height / 2
 
  return (
    centerX >= scanArea.x
    && centerX <= scanArea.x + scanArea.width
    && centerY >= scanArea.y
    && centerY <= scanArea.y + scanArea.height
  )
}

const scanAreaRef = useRef<ScanArea | null>(null) 
 
const setScanArea = (scanArea: ScanArea) => {
  scanAreaRef.current = scanArea
}
 
const handleBarcodeScanned = (result: BarcodeScanningResult) => {
  if (!isButtonPressedRef.current || hasScannedRef.current) return
  if (!isBarcodeInScanArea(result.bounds, scanAreaRef.current)) return
  hasScannedRef.current = true
  setScannedJan(normalizeJanCode(result.data))
}

import type { BarcodeScanningResult } from "expo-camera"
import * as Haptics from "expo-haptics"
import { useRef, useState } from "react"
 
import { isBarcodeInScanArea } from "@/libs/isBarcodeInScanArea"
import { normalizeJanCode } from "@/libs/normalizeJanCode"
import type { ScanArea } from "@/types/scan"
 
export function useScanner() {
  const isButtonPressedRef = useRef(false)
  const hasScannedRef = useRef(false)
  const scanAreaRef = useRef<ScanArea | null>(null)
  const [isButtonPressed, setIsButtonPressed] = useState(false)
  const [scannedJan, setScannedJan] = useState("")
 
  const setScanArea = (scanArea: ScanArea) => {
    scanAreaRef.current = scanArea
  }
 
  const handleBarcodeScanned = (result: BarcodeScanningResult) => {
    if (!isButtonPressedRef.current || hasScannedRef.current) return
    if (!isBarcodeInScanArea(result.bounds, scanAreaRef.current)) return
    hasScannedRef.current = true
    void Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
    setScannedJan(normalizeJanCode(result.data))
  }
 
  const startScanning = () => {
    if (hasScannedRef.current) return
    isButtonPressedRef.current = true
    setIsButtonPressed(true)
  }
 
  const stopScanning = () => {
    isButtonPressedRef.current = false
    setIsButtonPressed(false)
  }
 
  const reset = () => {
    isButtonPressedRef.current = false
    hasScannedRef.current = false
    setIsButtonPressed(false)
    setScannedJan("")
  }
 
  return {
    isButtonPressed,
    scannedJan,
    startScanning,
    stopScanning,
    reset,
    setScanArea,
    handleBarcodeScanned,
  }
}

import { CameraView, useCameraPermissions } from "expo-camera"
import { Pressable, StyleSheet, Text, View } from "react-native"
 
import { ScanButton } from "@/components/ScanButton"
import { ScanFrame } from "@/components/ScanFrame"
import { useScanner } from "@/hooks/useScanner"
 
export default function ScanScreen() {
  const [permission] = useCameraPermissions({ request: true })
  const { isButtonPressed, scannedJan, startScanning, stopScanning, reset, setScanArea, handleBarcodeScanned } =
    useScanner()
 
  if (!permission?.granted) {
    return <Text>カメラの使用許可が必要です</Text>
  }
 
  return (
    <View style={styles.container}>
      <CameraView
        style={StyleSheet.absoluteFill}
        barcodeScannerSettings={{ barcodeTypes: ["ean13", "ean8", "upc_a", "upc_e"] }}
        onBarcodeScanned={handleBarcodeScanned}
      />
      <ScanFrame onScanAreaChange={setScanArea} />
      <View style={styles.footer}>
        <ScanButton isPressed={isButtonPressed} onPressIn={startScanning} onPressOut={stopScanning} />
      </View>
      {scannedJan === "" ? null : (
        <View>
          <Text>JAN : {scannedJan}</Text>
          <Pressable accessibilityRole="button" onPress={reset}>
            <Text>閉じる</Text>
          </Pressable>
        </View>
      )}
    </View>
  )
}
 
const styles = StyleSheet.create({
  container: { flex: 1 },
  footer: { position: "absolute", right: 32, bottom: 48, left: 32 },
})