@closetothe/vision-camera-color-detector
v0.6.0
Published
A React Native Vision Camera Frame Processor Plugin for detecting colors in the camera stream.
Downloads
8
Maintainers
Readme
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
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