Skip to content

VisionCamera Frame Processor Plugin to read barcodes using MLKit Vision QrCode Scanning

License

Notifications You must be signed in to change notification settings

DeveloperMCD/vision-camera-v3-barcode-scanner

 
 

Repository files navigation

vision-camera-code-scanner

VisionCamera Frame Processor Plugin to read barcodes using MLKit Vision Barcode Scanning

Installation

yarn add vision-camera-code-scanner

make sure you correctly setup react-native-worklets and insert as a first line of your index.tsx

import "react-native-worklets/src";

Add this to your babel.config.js

["react-native-worklets/plugin"],

Usage

Simply call the useScanBarcodes() hook or call scanBarcodes() inside of the useFrameProcessor() hook. In both cases you will need to pass an array of BarcodeFormat to specify the kind of barcode you want to detect.

Note: The underlying MLKit barcode reader is only created once meaning that changes to the array will not be reflected in the app.

import * as React from 'react';

import { StyleSheet, Text } from 'react-native';
import { useCameraDevices } from 'react-native-vision-camera';
import { Camera } from 'react-native-vision-camera';
import { useScanBarcodes, BarcodeFormat } from 'vision-camera-code-scanner';

export default function App() {
  const [hasPermission, setHasPermission] = React.useState(false);
  const devices = useCameraDevices();
  const device = devices.back;

  const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE], {
    checkInverted: true,
  });

  // Alternatively you can use the underlying function:
  //
  // const [barcodes, setBarcodes] = React.useState<Barcode[]>([]);
  // const setBarcodesJS = Worklets.createRunInJsFn(setBarcodes);
  //
  // const frameProcessor = useFrameProcessor((frame) => {
  //   'worklet';
  //   const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.ALL_FORMATS], {
  //     checkInverted: true,
  //   });
  //   setBarcodesJS(detectedBarcodes);
  // }, []);

  React.useEffect(() => {
    (async () => {
      const status = await Camera.requestCameraPermission();
      setHasPermission(status === 'authorized');
    })();
  }, []);

  return (
    device != null &&
    hasPermission && (
      <>
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive={true}
          frameProcessor={frameProcessor}
          frameProcessorFps={5}
        />
        {barcodes.map((barcode, idx) => (
          <Text key={idx} style={styles.barcodeTextURL}>
            {barcode.displayValue}
          </Text>
        ))}
      </>
    )
  );
}

const styles = StyleSheet.create({
  barcodeTextURL: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold',
  },
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

About

VisionCamera Frame Processor Plugin to read barcodes using MLKit Vision QrCode Scanning

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 47.0%
  • TypeScript 19.5%
  • Swift 19.1%
  • Ruby 5.9%
  • Objective-C 5.3%
  • JavaScript 3.0%
  • C 0.2%