@closetothe/vision-camera-color-detector

vision-camera-color-detector

React Native Vision Camera Frame Processor Plugin of the UIColors swift package.

Installation

npm install vision-camera-color-detector

make sure you correctly setup react-native-reanimated and add this to your babel.config.js

[
  'react-native-reanimated/plugin',
  {
    globals: ['__detectColors'],
  },
]

Usage

1. Detect colors from the camera preview.

   import * as React from 'react';
   import { StyleSheet, Text } from 'react-native';
   import {
     Camera,
     useCameraDevices,
     useFrameProcessor,
   } from 'react-native-vision-camera';
   import { detectColors } from 'vision-camera-color-detector';
   import * as REA from 'react-native-reanimated';
   
   export default function App() {
     const [hasPermission, setHasPermission] = React.useState(false);
     const [colors, setColors] = React.useState<null | {
       background: string; // hex code including octothorp
       detail: string;
       primary: string;
       secondary: string;
     }>(null);
     const devices = useCameraDevices();
     const device = devices.back;
     const frameProcessor = useFrameProcessor((frame) => {
       'worklet';
       const results = detectColors(frame, 'lowest');
       if (results) {
         REA.runOnJS(setColors)(results);
       }
     }, []);
   
     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}
         />
       )
     );
   }

Configuration:

Set the camera quality (use "lowest" setting for better perf):

'lowest' | 'low' | 'high' | 'highest';

Supported Platforms

• iOS

Someone else can implement the Android version.

Contributing

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

License

MIT