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
Post a Comment