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;


Comments

Popular posts from this blog

WR3D wwe 2k19 MOD apk direct download link for Android

Download wwe2k17 wr3d

How to make resizeable window in pygame and make content adjustable according to window size