react-native live camera with opencv

link: https://github.com/opencv/opencv/blob/master/data/haarcascades/haarcascade_fullbody.xml 

import React, { useEffect, useRef } from 'react';

import { View, StyleSheet, Dimensions } from 'react-native';

import { RNCamera } from 'react-native-camera';

import { Mat, CvType, CvSize, CvBridge, CvCascadeClassifier } from 'react-native-opencv';

const OpenCVObjectDetection = () => {

  const bridgeRef = useRef(null);

  const canvasRef = useRef(null);

  useEffect(() => {

    const runObjectDetection = async () => {

      const cascadeClassifier = new CvCascadeClassifier();

      await cascadeClassifier.load('path/to/haarcascade_fullbody.xml');

      const processVideo = async () => {

        try {

          if (!bridgeRef.current) return;

          const frame = await bridgeRef.current.capture(true);

          const gray = new Mat();

          const objects = new Mat();

          frame.cvtColor(CvType.CV_RGBA2GRAY, gray);

          cascadeClassifier.detectMultiScale(gray, objects);

          const ctx = canvasRef.current.getContext('2d');

          ctx.clearRect(0, 0, frame.cols, frame.rows);

          ctx.drawImage(frame.image, 0, 0, frame.cols, frame.rows);

          const { data } = objects;

          const numDetections = data.length / 4;

          for (let i = 0; i < numDetections; i++) {

            const x = data[i * 4];

            const y = data[i * 4 + 1];

            const w = data[i * 4 + 2];

            const h = data[i * 4 + 3];

            ctx.strokeStyle = 'red';

            ctx.lineWidth = 2;

            ctx.strokeRect(x, y, w, h);

          }

          gray.delete();

          objects.delete();

          requestAnimationFrame(processVideo);

        } catch (err) {

          console.error('Error processing video:', err);

        }

      };

      requestAnimationFrame(processVideo);

    };

    runObjectDetection();

  }, []);

  return (

    <View style={styles.container}>

      <Camera

        style={styles.preview}

        type={RNCamera.Constants.Type.back}

        captureAudio={false}

        ref={(ref) => {

          if (ref) {

            bridgeRef.current = new CvBridge(ref, new CvSize(640, 480));

          }

        }}

      />

      <View style={styles.overlay}>

        <canvas ref={canvasRef} style={styles.canvas} />

      </View>

    </View>

  );

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

  },

  preview: {

    flex: 1,

    justifyContent: 'flex-end',

    alignItems: 'center',

    width: Dimensions.get('window').width,

    height: Dimensions.get('window').height,

  },

  overlay: {

    ...StyleSheet.absoluteFillObject,

    justifyContent: 'flex-end',

    alignItems: 'center',

  },

  canvas: {

    width: Dimensions.get('window').width,

    height: Dimensions.get('window').height,

  },

});

export default OpenCVObjectDetection;