### 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
);
}
if (device == null) {
return No device;
}
return (
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
},
});
```
--------------------------------
### Calculate Contour Area
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Calculates the area of a contour. The 'oriented' flag can be used to get a signed area based on contour orientation.
```javascript
invoke(
name: 'contourArea',
contour: Mat | MatVector | PointVector,
oriented?: boolean
): { value: number };
```
--------------------------------
### Get Default Morphological Border Value
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Retrieves a special border value used in erosion and dilation operations. This value is automatically adjusted for dilation.
```javascript
invoke(name: 'morphologyDefaultBorderValue'): Scalar;
```
--------------------------------
### Configure Info.plist for Camera Access
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/installation/visioncamera.md
Add the NSCameraUsageDescription key to your Info.plist file to request camera permissions.
```xml
NSCameraUsageDescription$(PRODUCT_NAME) needs access to your Camera.
```
--------------------------------
### Publish New Version
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/CONTRIBUTING.md
Uses release-it to automate the process of bumping versions, creating tags, and publishing new releases to npm.
```sh
yarn release
```
--------------------------------
### floodFill
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Fills a connected component with a specified color starting from a seed point. Connectivity is determined by color/brightness closeness of neighbors. It can modify the image in-place or build a mask.
```APIDOC
## floodFill
### Description
Fills a connected component with the given color. The function cv::floodFill fills a connected component starting from the seed point with the specified color. The connectivity is determined by the color/brightness closeness of the neighbor pixels.
### Parameters
- **image** (Mat) - Input/output 1- or 3-channel, 8-bit, or floating-point image. Modified by the function unless #FLOODFILL_MASK_ONLY flag is set.
- **mask** (Mat) - Operation mask that should be a single-channel 8-bit image, 2 pixels wider and 2 pixels taller than image. It is both an input and output parameter. Flood-filling cannot go across non-zero pixels in the input mask.
- **seedPoint** (Point) - Starting point.
- **newVal** (Scalar) - New value of the repainted domain pixels.
- **rect** (Rect) - Optional output parameter set by the function to the minimum bounding rectangle of the repainted domain.
- **loDiff** (Scalar) - Maximal lower brightness/color difference between the currently observed pixel and one of its neighbors belonging to the component, or a seed pixel being added to the component.
- **upDiff** (Scalar) - Maximal upper brightness/color difference between the currently observed pixel and one of its neighbors belonging to the component, or a seed pixel being added to the component.
- **flags** (FloodFillFlags | number) - Operation flags. The first 8 bits contain a connectivity value (4 or 8). The next 8 bits contain a value between 1 and 255 with which to fill the mask. Additional options can be combined using bit-wise OR.
### Method Signature
```js
invoke(
name: 'floodFill',
image: Mat,
mask: Mat,
seedPoint: Point,
newVal: Scalar,
rect: Rect,
loDiff: Scalar,
upDiff: Scalar,
flags: FloodFillFlags | number
): { value: number };
```
```
--------------------------------
### Run Unit Tests
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/CONTRIBUTING.md
Executes the unit tests for the project using Jest.
```sh
yarn test
```
--------------------------------
### Copy Object from Vector
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/usage.md
In some cases, you will need to pull a specific object from a vector, for example, a Mat object from MatVector. Use the copyObjectFromVector function with the vector and item index as arguments.
```javascript
const object = OpenCV.copyObjectFromVector(vector, 3); // vector, item index
```
--------------------------------
### Run iOS App (npm/Yarn)
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/example/README.md
Launches your React Native application on an iOS simulator or device. Ensure the Metro server is running in a separate terminal.
```bash
# using npm
npm run ios
# OR using Yarn
yarn ios
```
--------------------------------
### Find Convexity Defects of a Contour
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Identifies convexity defects in a contour relative to its convex hull. The output provides indices for start, end, and farthest points, along with defect depth.
```javascript
invoke(
name: 'convexityDefects',
contour: Mat,
convexHull: Mat,
convexityDefects: Mat
): void;
```
--------------------------------
### Run Android App (npm/Yarn)
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/example/README.md
Launches your React Native application on an Android emulator or device. Ensure the Metro server is running in a separate terminal.
```bash
# using npm
npm run android
# OR using Yarn
yarn android
```
--------------------------------
### Flood Fill Image Region
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Fills a connected component in an image with a specified color starting from a seed point. Requires an input/output mask and allows customization of connectivity and fill values.
```typescript
invoke(
name: 'floodFill',
image: Mat,
mask: Mat,
seedPoint: Point,
newVal: Scalar,
rect: Rect,
loDiff: Scalar,
upDiff: Scalar,
flags: FloodFillFlags | number
): { value: number };
```
--------------------------------
### Configure AndroidManifest.xml for Camera Permission
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/installation/visioncamera.md
Add the CAMERA permission to your AndroidManifest.xml file to allow camera access.
```xml
```
--------------------------------
### Convert OpenCV Object to JS Value
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/usage.md
Since the data is stored in memory and managed by C++, use the toJSValue function to get the OpenCV object data in the form of a JS object.
```javascript
const data = OpenCV.toJSValue(object);
```
--------------------------------
### Object Creation
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/apidetails.md
Creates a new object of the selected type and stores it in memory. The returned object contains the object identifier and type.
```APIDOC
## createObject
### Description
Creates a new object of the selected type and stores it in memory. The returned object contains the object identifier and type.
### Method Signature
```js
createObject(type: ObjectType.Mat, rows: number, cols: number, dataType: DataTypes, data?: number[]): Mat;
createObject(type: ObjectType.MatVector): MatVector;
createObject(type: ObjectType.Point, x: number, y: number): Point;
createObject(type: ObjectType.PointVector): PointVector;
createObject(type: ObjectType.PointVectorOfVectors): PointVectorOfVectors;
createObject(type: ObjectType.Rect, x: number, y: number, width: number, height: number): Rect;
createObject(type: ObjectType.RectVector): RectVector;
createObject(type: ObjectType.Size, width: number, height: number): Size;
createObject(type: ObjectType.Scalar, a: number): Scalar;
createObject(type: ObjectType.Scalar, a: number, b: number, c: number): Scalar;
createObject(type: ObjectType.Scalar, a: number, b: number, c: number, d: number): Scalar;
```
```
--------------------------------
### Restart Metro with Cache Reset
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/installation/worklets.md
After configuring the Babel plugin, restart the Metro bundler with the `--reset-cache` flag to ensure the changes are applied correctly.
```bash
yarn start --reset-cache
```
--------------------------------
### Lint Code with ESLint
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/CONTRIBUTING.md
Runs ESLint to check for code style and potential errors.
```sh
yarn lint
```
--------------------------------
### Cleanup Build Folders
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/CONTRIBUTING.md
Removes all build folders to ensure a clean build, especially when switching architectures.
```sh
yarn clean
```
--------------------------------
### trace
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Returns the trace of a matrix.
```APIDOC
## trace
### Description
Returns the trace of a matrix.
### Parameters
- mtx (Mat): Input matrix.
### Returns
- Scalar: The trace of the matrix.
### Method Signature
```js
invoke(name: 'trace', mtx: Mat): Scalar;
```
```
--------------------------------
### Apply Affine Transformation to Image
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Applies an affine transformation to an input image, producing a transformed output image. Requires a transformation matrix and the desired output size.
```javascript
invoke(
name: 'warpAffine',
src: Mat,
dst: Mat,
M: Mat,
dsize: Size
): Mat;
```
--------------------------------
### add
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Adds two arrays element-wise.
```APIDOC
## add
### Description
Adds two arrays element-wise. Supports optional mask and dtype for output array.
### Parameters
- src1 (Mat) - First input array.
- src2 (Mat) - Second input array.
- dst (Mat) - Output array that has the same size and type as input arrays.
- mask (Mat) - Optional operation mask - 8-bit single channel array, that specifies elements of the output array to be changed.
- dtype (DataTypes) - Optional depth of the output array.
### Method Signatures
```js
invoke(name: 'add', src1: Mat, src2: Mat, dst: Mat): void;
invoke(name: 'add', src1: Mat, src2: Mat, dst: Mat, mask: Mat): void;
invoke(
name: 'add',
src1: Mat,
src2: Mat,
dst: Mat,
mask: Mat,
dtype: DataTypes
): void;
```
```
--------------------------------
### Save Mat to File
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/apidetails.md
Saves a Mat to a file on disk as JPEG or PNG. Compression is calculated as a number 0-1.
```APIDOC
## saveMatToFile
### Description
Saves a Mat to a file on disk as JPEG or PNG. Compression is calculated as a number 0-1 (for JPEG: 0=low quality, 1=high quality; for PNG: 0=no compression, 1=max compression).
### Method Signature
```js
saveMatToFile(
mat: Mat,
path: string,
format: 'jpeg' | 'png',
compression: number
): void;
```
```
--------------------------------
### demosaicing
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Main function for all demosaicing processes.
```APIDOC
## demosaicing
### Description
Main function for all demosaicing processes.
### Parameters
- src (Mat): Input image: 8-bit unsigned or 16-bit unsigned.
- dst (Mat): Output image of the same size and depth as src.
- code (ColorConversionCodes): Color space conversion code (see the description below).
- dstCn (number): Number of channels in the destination image.
### Method Signature
```js
invoke(
name: 'demosaicing',
src: Mat,
dst: Mat,
code:
| ColorConversionCodes.COLOR_BayerBG2BGR
| ColorConversionCodes.COLOR_BayerGB2BGR
| ColorConversionCodes.COLOR_BayerRG2BGR
| ColorConversionCodes.COLOR_BayerGR2BGR
| ColorConversionCodes.COLOR_BayerBG2GRAY
| ColorConversionCodes.COLOR_BayerGB2GRAY
| ColorConversionCodes.COLOR_BayerRG2GRAY
| ColorConversionCodes.COLOR_BayerGR2GRAY
| ColorConversionCodes.COLOR_BayerBG2BGR_VNG
| ColorConversionCodes.COLOR_BayerGB2BGR_VNG
| ColorConversionCodes.COLOR_BayerRG2BGR_VNG
| ColorConversionCodes.COLOR_BayerGR2BGR_VNG
| ColorConversionCodes.COLOR_BayerBG2BGR_EA
| ColorConversionCodes.COLOR_BayerGB2BGR_EA
| ColorConversionCodes.COLOR_BayerRG2BGR_EA
| ColorConversionCodes.COLOR_BayerGR2BGR_EA
| ColorConversionCodes.COLOR_BayerBG2BGRA
| ColorConversionCodes.COLOR_BayerGB2BGRA
| ColorConversionCodes.COLOR_BayerRG2BGRA
| ColorConversionCodes.COLOR_BayerGR2BGRA,
dstCn?: number
): void;
```
```
--------------------------------
### getGaborKernel
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Generates a Gabor kernel. This function requires parameters for kernel size, sigma, theta, lambda, gamma, psi, and the data type of the filter coefficients.
```APIDOC
## getGaborKernel
### Description
Generates a Gabor kernel.
### Parameters
- ksize (Size) - Size of the filter returned.
- sigma (number) - Standard deviation of the gaussian envelope.
- theta (number) - Orientation of the normal to the parallel stripes of a Gabor function.
- lambd (number) - Wavelength of the sinusoidal factor.
- gamma (number) - Spatial aspect ratio.
- psi (number) - Phase offset.
- ktype (DataTypes.CV_32F | DataTypes.CV_64F) - Type of filter coefficients.
### Method Signature
```js
invoke(
name: 'getGaborKernel',
ksize: Size,
sigma: number,
theta: number,
lambd: number,
gamma: number,
psi: number,
ktype: DataTypes.CV_32F | DataTypes.CV_64F
): Mat;
```
```
--------------------------------
### Create Object
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/apidetails.md
Creates a new object of the selected type and stores it in memory. The returned object contains the object identifier and type.
```typescript
createObject(
type: ObjectType.Mat,
rows: number,
cols: number,
dataType: DataTypes,
data?: number[]
): Mat;
createObject(type: ObjectType.MatVector): MatVector;
createObject(type: ObjectType.Point, x: number, y: number): Point;
createObject(type: ObjectType.PointVector): PointVector;
createObject(type: ObjectType.PointVectorOfVectors): PointVectorOfVectors;
createObject(
type: ObjectType.Rect,
x: number,
y: number,
width: number,
height: number
): Rect;
createObject(type: ObjectType.RectVector): RectVector;
createObject(type: ObjectType.Size, width: number, height: number): Size;
createObject(type: ObjectType.Scalar, a: number): Scalar;
createObject(
type: ObjectType.Scalar,
a: number,
b: number,
c: number
): Scalar;
createObject(
type: ObjectType.Scalar,
a: number,
b: number,
c: number,
d: number
): Scalar;
```
--------------------------------
### buildPyramid Function
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Constructs a Gaussian pyramid for an image. Takes a source image, a destination vector for pyramid layers, the maximum level, and the border type.
```javascript
invoke(
name: 'buildPyramid',
src: Mat,
dst: Mat,
maxlevel: number,
borderType: BorderTypes
): void;
```
--------------------------------
### Compute Connected Components
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Computes the connected components of a binary image and returns the total number of labels. Label 0 represents the background.
```javascript
invoke(
name: 'connectedComponents',
image: Mat,
labels: Mat
): { value: number };
```
--------------------------------
### cvtColor
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Converts an image from one color space to another.
```APIDOC
## cvtColor
### Description
Converts an image from one color space to another.
### Parameters
- src (Mat): Input image: 8-bit unsigned, 16-bit unsigned ( CV_16UC... ), or single-precision floating-point.
- dst (Mat): Output image of the same size and depth as src.
- code (ColorConversionCodes): Color space conversion code.
- dstCn (number): Number of channels in the destination image; if the parameter is 0, the number of the channels is derived automatically from src and code.
### Method Signature
```js
invoke(
name: 'cvtColor',
src: Mat,
dst: Mat,
code: ColorConversionCodes,
dstCn?: number
): void;
```
```
--------------------------------
### Create Point Object
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/usage.md
To create an object, execute the createObject function, where the first argument will be the type of object (enum ObjectType) and the following parameters specific to a particular type of object.
```javascript
const point = OpenCV.createObject(ObjectType.Point, 1, 2); // x, y
```
--------------------------------
### Batch Nearest Neighbor Finder
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Implements a naive nearest neighbor finder for batched data. Requires specifying distance type, K value, and update strategy.
```javascript
invoke(
name: 'batchDistance',
src1: Mat,
src2: Mat,
dist: Mat,
dtype: number | DataTypes,
nidx: Mat,
normType: NormTypes,
K: number,
mask: Mat,
update: number,
crosscheck: boolean
): void;
```
--------------------------------
### Fit a Line to Point Set
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Fits a line to a set of 2D or 3D points using a specified distance metric. Requires parameters for accuracy and distance type.
```javascript
invoke(
name: 'fitLine',
points: Mat,
line: Mat,
disType: DistanceTypes,
param: number,
reps: number,
aeps: number
): void;
```
--------------------------------
### applyColorMap
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Applies a colormap to an image.
```APIDOC
## applyColorMap
### Description
Applies a colormap to an image.
### Parameters
- src (Mat): Input image.
- dst (Mat): Output image.
- colormap (ColormapTypes): The type of colormap to apply.
### Method Signature
```js
invoke(
name: 'applyColorMap',
src: Mat,
dst: Mat,
colormap: ColormapTypes
): void;
```
```
--------------------------------
### Base64 to Mat
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/apidetails.md
Creates an object of type Mat based on image in Base64.
```APIDOC
## base64ToMat
### Description
Creates an object of type Mat based on image in Base64.
### Method Signature
```js
base64ToMat(data: string): Mat;
```
```
--------------------------------
### Draw Bounding Boxes on Detected Objects
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/examples/realtimedetection.md
Renders the camera frame and then draws rectangles around the detected objects using the calculated bounding box information. This visually highlights the detected objects on the screen.
```javascript
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
);
}
```
--------------------------------
### buildPyramid
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Constructs the Gaussian pyramid for an image. This is useful for image analysis tasks that require processing images at different scales.
```APIDOC
## buildPyramid
### Description
Constructs the Gaussian pyramid for an image.
### Parameters
- **src** (Mat) - Source image. Check pyrDown for the list of supported types.
- **dst** (Mat) - Destination vector of maxlevel+1 images of the same type as src. dst[0] will be the same as src. dst[1] is the next pyramid layer, a smoothed and down-sized src, and so on.
- **maxlevel** (number) - 0-based index of the last (the smallest) pyramid layer. It must be non-negative.
- **borderType** (BorderTypes) - Pixel extrapolation method, see BorderTypes (BORDER_CONSTANT isn't supported).
### Method
invoke
### Signature
```js
invoke(
name: 'buildPyramid',
src: Mat,
dst: Mat,
maxlevel: number,
borderType: BorderTypes
): void;
```
```
--------------------------------
### exp
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Calculates the exponent of every array element.
```APIDOC
## exp
### Description
Calculates the exponent of every array element.
### Parameters
#### Source Array
- **src** (Mat) - Input array.
#### Destination Array
- **dst** (Mat) - Output array of the same size and type as src.
### Method Signature
```js
invoke(name: 'exp', src: Mat, dst: Mat): void;
```
```
--------------------------------
### clone
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Creates a deep copy of a matrix.
```APIDOC
## clone
### Description
Creates a full copy of the array.
### Parameters
- **src** (Mat) - The input matrix to clone.
```
--------------------------------
### Real-time Object Detection and Bounding Box Rendering
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/examples/realtimedetection.md
This snippet processes a video frame to detect objects within a specified color range (HSV), finds contours, calculates their areas, and draws scaled bounding boxes around detected objects. Ensure to call `OpenCV.clearBuffers()` to free up memory after processing.
```javascript
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 contoursMats = OpenCV.toJSValue(contours);
const rectangles: Rect[] = [];
for (let i = 0; i < contoursMats.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(); // REMEMBER TO CLEAN
```
--------------------------------
### matchTemplate
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Compares a template against overlapped image regions. Useful for object detection and pattern recognition.
```APIDOC
## matchTemplate
### Description
Compares a template against overlapped image regions.
### Parameters
- **name** (string) - Function name. Should be 'matchTemplate'.
- **image** (Mat) - Image where the search is running. It must be 8-bit or 32-bit floating-point.
- **templ** (Mat) - Searched template. It must be not greater than the source image and have the same data type.
- **result** (Mat) - Map of comparison results. It must be single-channel 32-bit floating-point. If image is W×H and templ is w×h, then result is (W−w+1)×(H−h+1).
- **method** (TemplateMatchModes) - Parameter specifying the comparison method, @see TemplateMatchModes.
- **mask** (Mat) - Mask of searched template. It must have the same datatype and size with templ. It is not set by default. Currently, only the TM_SQDIFF and TM_CCORR_NORMED methods are supported.
### Method Signature
```js
invoke(
name: 'matchTemplate',
image: Mat,
templ: Mat,
result: Mat,
method: TemplateMatchModes,
mask: Mat
): void;
```
```
--------------------------------
### goodFeaturesToTrack
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Determines strong corners on an image.
```APIDOC
## goodFeaturesToTrack
### Description
Determines strong corners on an image.
### Parameters
- **image** (Mat) - Input 8-bit or floating-point 32-bit, single-channel image.
- **corners** (Mat) - Output vector of detected corners.
- **maxCorners** (number) - Maximum number of corners to return. If <= 0, no limit is set.
- **qualityLevel** (number) - Parameter characterizing the minimal accepted quality of image corners.
- **minDistance** (number) - Minimum possible Euclidean distance between the returned corners.
```
--------------------------------
### solve
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Solves one or more linear systems or least-squares problems.
```APIDOC
## solve
### Description
Solves one or more linear systems or least-squares problems.
### Parameters
- **src1** (Mat) - Input matrix on the left-hand side of the system.
- **src2** (Mat) - Input matrix on the right-hand side of the system.
- **dst** (Mat) - Output solution.
- **flags** (DecompTypes) - Solution (matrix inversion) method.
### Returns
- **resolved** (boolean) - Indicates if the system was successfully resolved.
```
--------------------------------
### Buffer to Mat
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/apidetails.md
Creates an object of type Mat based on an array of Buffer Array.
```APIDOC
## bufferToMat
### Description
Creates an object of type Mat based on an array of Buffer Array.
### Method Signature
```js
bufferToMat(
type: T,
rows: number,
cols: number,
channels: 1 | 3 | 4,
input: ImportBufferType[T]
): Mat;
```
### Type Definitions
```ts
type ImportBufferType = {
uint8: Uint8Array;
uint16: Uint16Array;
int8: Int8Array;
int16: Int16Array;
int32: Int32Array;
float32: Float32Array;
float64: Float64Array;
};
```
```
--------------------------------
### copyTo
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Copies the matrix to another one. The destination matrix is reallocated if it does not have a proper size or type.
```APIDOC
## copyTo
### Description
Copies the matrix to another one. The destination matrix is reallocated if it does not have a proper size or type.
### Parameters
#### Source Matrix
- **src** (Mat) - The source matrix.
#### Destination Matrix
- **dst** (Mat) - The destination matrix. If it does not have a proper size or type before the operation, it is reallocated.
#### Mask
- **mask** (Mat) - Operation mask of the same size as *this. Its non-zero elements indicate which matrix elements need to be copied. The mask has to be of type CV_8U and can have 1 or multiple channels.
### Method Signature
```js
invoke(name: 'copyTo', src: Mat, dst: Mat, mask: Mat): void;
```
```
--------------------------------
### Laplacian
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Calculates the Laplacian of an image.
```APIDOC
## Laplacian
### Description
Calculates the Laplacian of an image.
### Parameters
- **src** (Mat) - Source image.
- **dst** (Mat) - Destination image of the same size and number of channels as src.
- **ddepth** (DataTypes) - Desired depth of the destination image.
- **ksize** (number) - Aperture size used to compute the second-derivative filters. Must be positive and odd.
- **scale** (number) - Optional scale factor for the computed Laplacian values.
- **delta** (number) - Optional delta value added to the results.
- **borderType** (BorderTypes) - Pixel extrapolation method. BORDER_WRAP is not supported.
### Returns
- **void**
```
--------------------------------
### integral
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Calculates the integral of an image.
```APIDOC
## integral
### Description
Calculates the integral of an image.
### Parameters
- **src** (Mat) - input image as W×H, 8-bit or floating-point (32f or 64f).
- **sum** (Mat) - integral image as (W+1)×(H+1) , 32-bit integer or floating-point (32f or 64f).
### Method Signature
```js
invoke(name: 'integral', src: Mat, sum: Mat): void;
```
```
--------------------------------
### completeSymm
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Copies the lower or upper half of a square matrix to its other half.
```APIDOC
## completeSymm
### Description
Copies the lower or the upper half of a square matrix to its another half.
### Parameters
- **m** (MatVector | Mat) - Input-output square matrix.
- **lowerToUpper** (boolean) - If true, the lower half is copied to the upper half. Otherwise, the upper half is copied to the lower half.
```
--------------------------------
### Create a Full Copy of an Array (clone)
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Creates a complete, independent copy of an input matrix (Mat).
```typescript
invoke(name: 'clone', src: Mat): Mat;
```
--------------------------------
### repeat
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Fills the output array with repeated copies of the input array along specified axes.
```APIDOC
## repeat
### Description
Fills the output array with repeated copies of the input array.
### Parameters
- **src** (Mat) - Input array to replicate.
- **ny** (number) - Flag to specify how many times the src is repeated along the vertical axis.
- **nx** (number) - Flag to specify how many times the src is repeated along the horizontal axis.
- **dst** (Mat) - Output array of the same type as src.
### Returns
void
```
--------------------------------
### copyMakeBorder
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Forms a border around a source image and places it into a destination image.
```APIDOC
## copyMakeBorder
### Description
Forms a border around an image.
### Parameters
- **src** (Mat) - Source image.
- **dst** (Mat) - Destination image of the same type as src and the calculated size.
- **top** (number) - Pixels to add to the top border.
- **bottom** (number) - Pixels to add to the bottom border.
- **left** (number) - Pixels to add to the left border.
- **right** (number) - Pixels to add to the right border.
- **borderType** (BorderTypes) - Type of border to add.
- **value** (Scalar) - Value of the border if borderType is BORDER_CONSTANT.
```
--------------------------------
### Create Destination Mat Object
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/examples/realtimedetection.md
Initializes an empty Mat object that will be used to store the processed image data. This object is created with a specified type and dimensions.
```javascript
const dst = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U);
```
--------------------------------
### Create Image Border (copyMakeBorder)
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Adds a border around a source image to create a destination image. Supports various border types and a constant border value.
```typescript
invoke(
name: 'copyMakeBorder',
src: Mat,
dst: Mat,
top: number,
bottom: number,
left: number,
right: number,
borderType: BorderTypes,
value: Scalar
): void;
```
--------------------------------
### sort
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Sorts each row or each column of a matrix.
```APIDOC
## sort
### Description
Sorts each row or each column of a matrix.
### Parameters
- **src** (Mat) - Input single-channel array.
- **dst** (Mat) - Output array of the same size and type as src.
- **flags** (SortFlags) - Operation flags, a combination of SortFlags.
### Returns
void
```
--------------------------------
### Scale, Abs, and Convert to 8-bit (convertScaleAbs)
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Scales array elements, takes their absolute values, and converts the result to an 8-bit integer format. Optional scaling and delta values can be applied.
```typescript
invoke(name: 'convertScaleAbs', src: Mat, dst: Mat, alpha?: number): void;
```
```typescript
invoke(
name: 'convertScaleAbs',
src: Mat,
dst: Mat,
alpha: number,
beta?: number
): void;
```
```typescript
invoke(
name: 'convertScaleAbs',
src: Mat,
dst: Mat,
alpha: number,
beta: number
): void;
```
--------------------------------
### Fix Linting Errors
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/CONTRIBUTING.md
Runs ESLint with the --fix flag to automatically correct formatting and style issues.
```sh
yarn lint --fix
```
--------------------------------
### Configure Babel Plugin
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/installation/worklets.md
Add the react-native-worklets-core Babel plugin to your `babel.config.js` file to enable worklet functionality.
```javascript
module.exports = {
plugins: [
["react-native-worklets-core/plugin"],
// ...
],
// ...
};
```
--------------------------------
### convertScaleAbs
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Scales, takes the absolute value, and converts the result to an 8-bit unsigned integer matrix.
```APIDOC
## convertScaleAbs
### Description
Scales, calculates absolute values, and converts the result to 8-bit.
### Parameters
- **src** (Mat) - Input matrix.
- **dst** (Mat) - Output matrix.
- **alpha** (number, optional) - Scale factor.
- **beta** (number, optional) - Delta added to scaled values.
```
--------------------------------
### Generalized Matrix Multiplication (GEMM)
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Performs generalized matrix multiplication (C = alpha*A*B + beta*C). Supports real and complex matrices, with optional delta matrix and weights.
```typescript
invoke(
name: 'gemm',
src1: Mat,
src2: Mat,
alpha: number,
src3: Mat,
beta: number,
dst: Mat,
flags: GemmFlags
): void;
```
--------------------------------
### getGaussianKernel
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Returns Gaussian filter coefficients. ksize must be odd and positive. sigma is computed from ksize if non-positive.
```APIDOC
## getGaussianKernel
### Description
Returns Gaussian filter coefficients.
### Parameters
- **ksize** (number) - Aperture size. Must be odd and positive.
- **sigma** (number) - Gaussian standard deviation. If non-positive, it's computed from ksize.
- **ktype** (DataTypes.CV_32F | DataTypes.CV_64F) - Type of filter coefficients.
### Returns
- **Mat** - Gaussian filter coefficients.
```
--------------------------------
### Invoke OpenCV Function
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/usage.md
To execute a function from OpenCV, call the invoke method. The first parameter is the name of the function, and the rest are the necessary parameters.
```javascript
OpenCV.invoke('cvtColor', srcMat, dstMat, ColorConversionCodes.COLOR_BGR2HSV);
```
--------------------------------
### solvePoly
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Finds the real or complex roots of a polynomial equation.
```APIDOC
## solvePoly
### Description
Finds the real or complex roots of a polynomial equation.
### Parameters
- **src** (Mat) - Array of polynomial coefficients.
- **dst** (Mat) - Output (complex) array of roots.
- **maxIters** (number) - Maximum number of iterations the algorithm does.
### Returns
- **value** (number) - The number of roots found.
```
--------------------------------
### gemm
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Performs generalized matrix multiplication (C = alpha*A*B + beta*D). It supports real and complex matrices and allows for scaling factors for the product and an additional matrix.
```APIDOC
## gemm
### Description
Performs generalized matrix multiplication.
### Parameters
- **src1** (Mat) - First multiplied input matrix (CV_32FC1, CV_64FC1, CV_32FC2, CV_64FC2).
- **src2** (Mat) - Second multiplied input matrix of the same type as src1.
- **alpha** (number) - Weight of the matrix product.
- **src3** (Mat) - Third optional delta matrix added to the matrix product; it should have the same type as src1 and src2.
- **beta** (number) - Weight of src3.
- **dst** (Mat) - Output matrix; it has the proper size and the same type as input matrices.
- **flags** (GemmFlags) - Operation flags.
### Method Signature
```js
invoke(
name: 'gemm',
src1: Mat,
src2: Mat,
alpha: number,
src3: Mat,
beta: number,
dst: Mat,
flags: GemmFlags
): void;
```
```
--------------------------------
### matchShapes
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Compares two shapes using a specified method.
```APIDOC
## matchShapes
### Description
Compares two shapes.
### Parameters
- contour1 (Mat) - First contour or grayscale image.
- contour2 (Mat) - Second contour or grayscale image.
- method (ShapeMatchModes) - Comparison method.
- parameter (number) - Method-specific parameter (currently not supported).
### Returns
- value (number) - The comparison result.
### Method Signature
```js
invoke(
name: 'matchShapes',
contour1: Mat,
contour2: Mat,
method: ShapeMatchModes,
parameter: number
): { value: number };
```
```
--------------------------------
### clipLine
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Clips the line against the image rectangle.
```APIDOC
## clipLine
### Description
Clips the line against the image rectangle. The function cv::clipLine calculates a part of the line segment that is entirely within the specified rectangle. it returns false if the line segment is completely outside the rectangle. Otherwise, it returns true .
### Parameters
- **imgSize** (Size) - Image size
- **pt1** (Point) - First line point.
- **pt2** (Point) - Second line point.
### Return
{ value: boolean }
```
--------------------------------
### convertTo
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Converts a matrix to a different data type with optional scaling.
```APIDOC
## convertTo
### Description
Converts an array to another data type with optional scaling.
### Parameters
- **src** (Mat) - Input matrix.
- **dst** (Mat) - Output matrix. If it does not have a proper size or type, it is reallocated.
- **rtype** (DataTypes) - Desired output matrix type or depth.
- **alpha** (number, optional) - Scale factor.
- **beta** (number, optional) - Delta added to scaled values.
```
--------------------------------
### Compute Connected Components with Statistics
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Computes connected components and provides statistics (area, bounding box, etc.) and centroids for each component. Useful for analyzing object properties.
```javascript
invoke(
name: 'connectedComponentsWithStats',
image: Mat,
labels: Mat,
stats: Mat,
centroids: Mat
): { value: number };
```
--------------------------------
### resize
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Resizes an image to a specified size or by a scale factor.
```APIDOC
## resize
### Description
The function resize resizes the image src down to or up to the specified size. Note that the initial dst type or size are not taken into account. Instead, the size and type are derived from the `src`,`dsize`,`fx`, and `fy`.
### Parameters
- **src** (Mat) - Input image.
- **dst** (Mat) - Output image; it has the size dsize (when it is non-zero) or the size computed from src.size(), fx, and fy; the type of dst is the same as of src.
- **dsize** (Size) - Output image size.
- **fx** (number) - Scale factor along the horizontal axis.
- **fy** (number) - Scale factor along the vertical axis.
- **interpolation** (InterpolationFlags) - Interpolation method.
### Returns
void
```
--------------------------------
### getOptimalDFTSize
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Calculates the optimal size for a Discrete Fourier Transform (DFT) given a vector size. This is useful for performance optimization when performing DFT operations.
```APIDOC
## getOptimalDFTSize
### Description
Calculates the optimal DFT size for a given vector size.
### Parameters
- **vecsize** (number) - Vector size.
### Returns
- **value** (number) - The optimal DFT size for the given vector size.
### Method Signature
```js
invoke(name: 'getOptimalDFTSize', vecsize: number): { value: number };
```
```
--------------------------------
### log
Source: https://github.com/lukaszkurantdev/react-native-fast-opencv/blob/main/docs/pages/availablefunctions.md
Calculates the natural logarithm for each element in an array. The result is stored in the destination array.
```APIDOC
## log
### Description
Calculates the natural logarithm of every array element.
### Parameters
- **src** (Mat) - Input array.
- **dst** (Mat) - Output array of the same size and type as src.
```