### Setup iOS New Architecture Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/CONTRIBUTING.md Installs pods with the new architecture enabled for the iOS example app. Requires navigating to the ios directory and then returning to the root. ```sh cd example/ios RCT_NEW_ARCH_ENABLED=1 pod install cd - ``` -------------------------------- ### Start Example App Packager Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/CONTRIBUTING.md Starts the Metro server for the example application. This is necessary to run the example app. ```sh yarn example start ``` -------------------------------- ### Run Example App on Android Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/CONTRIBUTING.md Builds and runs the example application on an Android device or emulator. ```sh yarn example android ``` -------------------------------- ### Run Example App on iOS Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/CONTRIBUTING.md Builds and runs the example application on an iOS device or simulator. ```sh yarn example ios ``` -------------------------------- ### Run Android Example with New Architecture Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/CONTRIBUTING.md Enables the new architecture for the Android example app by setting the ORG_GRADLE_PROJECT_newArchEnabled environment variable. ```sh ORG_GRADLE_PROJECT_newArchEnabled=true yarn example android ``` -------------------------------- ### Add react-native-worklets-core Library Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/installation/worklets.md Install the core library using Yarn. After installation, navigate to the `ios` directory and install the pods. ```bash yarn add react-native-worklets-core ``` ```bash cd ios && pod install ``` -------------------------------- ### Install iOS Dependencies with Pod Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/installation.md After adding the library, navigate to the ios directory and run pod install to link native dependencies. ```bash cd ios && pod install ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/CONTRIBUTING.md Run this command in the root directory to install all project dependencies using Yarn workspaces. ```sh yarn ``` -------------------------------- ### Start Metro Server (npm/Yarn) Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/example/README.md Initiates the Metro JavaScript bundler required for React Native development. Run this command from the root of your project. ```bash # using npm npm start # OR using Yarn yarn start ``` -------------------------------- ### Install react-native-fast-opencv with Yarn Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/installation.md Use this command to add the library to your project dependencies. ```bash yarn add react-native-fast-opencv ``` -------------------------------- ### Add Libraries for Vision Camera Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/installation/visioncamera.md Install react-native-vision-camera and react-native-worklets-core using yarn. ```bash yarn add react-native-vision-camera react-native-worklets-core ``` -------------------------------- ### Initialize Vision Camera and Frame Processor Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/examples/realtimedetection.md Sets up the VisionCamera component, requests camera permissions, and initializes a Skia frame processor. It resizes frames for faster processing and prepares the initial setup for object detection. ```javascript import { PaintStyle, Skia, } from '@shopify/react-native-skia'; import { useEffect, useState, } from 'react'; import { StyleSheet, Text, View, Button, } from 'react-native'; import { Camera, useCameraDevice, useCameraPermission, useSkiaFrameProcessor, } from 'react-native-vision-camera'; import { useResizePlugin, // @ts-ignore } from 'vision-camera-resize-plugin'; import OpenCVProvider, { OpenCV, ObjectType, DataTypes, ColorConversionCodes, RetrievalModes, ContourApproximationModes, } from 'react-native-fast-opencv'; const paint = Skia.Paint(); paint.setStyle(PaintStyle.Stroke); paint.setStrokeWidth(5); paint.setColor(Skia.Color('red')); export function VisionCameraExample() { const device = useCameraDevice('back'); const { hasPermission, requestPermission } = useCameraPermission(); const [isCameraActive, setIsCameraActive] = useState(false); const { resize } = useResizePlugin(); useEffect(() => { requestPermission(); }, [requestPermission]); const frameProcessor = useSkiaFrameProcessor((frame) => { 'worklet'; const height = frame.height / 4; const width = frame.width / 4; const resized = resize(frame, { scale: { width: width, height: height, }, pixelFormat: 'bgr', dataType: 'uint8', }); const src = OpenCV.frameBufferToMat(height, width, resized); const dst = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U); const lowerBound = OpenCV.createObject(ObjectType.Scalar, 30, 60, 60); const upperBound = OpenCV.createObject(ObjectType.Scalar, 50, 255, 255); OpenCV.invoke('cvtColor', src, dst, ColorConversionCodes.COLOR_BGR2HSV); OpenCV.invoke('inRange', dst, lowerBound, upperBound, dst); const channels = OpenCV.createObject(ObjectType.MatVector); OpenCV.invoke('split', dst, channels); const grayChannel = OpenCV.copyObjectFromVector(channels, 0); const contours = OpenCV.createObject(ObjectType.MatVector); OpenCV.invoke( 'findContours', grayChannel, contours, RetrievalModes.RETR_TREE, ContourApproximationModes.CHAIN_APPROX_SIMPLE ); const rectangles = []; for (let i = 0; i < contours.array.length; i++) { const contour = OpenCV.copyObjectFromVector(contours, i); const { value: area } = OpenCV.invoke('contourArea', contour, false); if (area > 3000) { const rect = OpenCV.invoke('boundingRect', contour); rectangles.push(rect); } } frame.render(); for (const rect of rectangles) { const rectangle = OpenCV.toJSValue(rect); frame.drawRect( { height: rectangle.height * 4, width: rectangle.width * 4, x: rectangle.x * 4, y: rectangle.y * 4, }, paint ); } OpenCV.clearBuffers(); }, []); if (!hasPermission) { return ( No permission