react native cam with opencv
import React, { useState, useEffect, useRef } from 'react';
import {
View,
StyleSheet,
Dimensions,
TouchableOpacity,
Text,
Image,
} from 'react-native';
import { RNCamera } from 'react-native-camera';
import Video from 'react-native-video';
import { Mat, CvType, CvBridge } from 'react-native-opencv';
const CameraScreen = () => {
const [isCameraMode, setCameraMode] = useState(true);
const [frame, setFrame] = useState(null);
const [cvBridge, setCvBridge] = useState(null);
const toggleMode = () => {
setCameraMode(!isCameraMode);
};
useEffect(() => {
setCvBridge(new CvBridge());
}, []);
const processFrame = async (rawFrame) => {
if (isCameraMode) {
// Convert raw camera frame to OpenCV Mat format
const rgbaMat = new Mat(
rawFrame.height,
rawFrame.width,
CvType.CV_8UC4
);
cvBridge.toMat(rawFrame.data, rgbaMat);
// Perform object detection or any other processing using OpenCV
// Modify this code according to your specific object detection implementation
// Draw a rectangle on the frame as an example
const rectColor = new CvBridge.Scalar(255, 0, 0); // Red color
const rectThickness = 2;
const rectStart = new CvBridge.Point(50, 50);
const rectEnd = new CvBridge.Point(200, 200);
cvBridge.rectangle(
rgbaMat,
rectStart,
rectEnd,
rectColor,
rectThickness
);
// Convert the processed frame back to raw camera frame format
const processedFrame = await cvBridge.toBitmap(rgbaMat);
setFrame(processedFrame);
}
};
return (
<View style={styles.container}>
{isCameraMode ? (
<RNCamera
style={styles.preview}
type={RNCamera.Constants.Type.back}
captureAudio={false}
onCameraReady={() => {
// Additional initialization if required
}}
onFrameCaptured={(event) => {
processFrame(event.frame);
}}
/>
) : (
<Video
source={{ uri: 'http://192.168.16.1' }}
style={styles.video}
resizeMode="contain"
repeat
controls
/>
)}
<TouchableOpacity style={styles.toggleButton} onPress={toggleMode}>
<Text style={styles.toggleButtonText}>
{isCameraMode ? 'Switch to Video' : 'Switch to Camera'}
</Text>
</TouchableOpacity>
{frame && <Image source={{ uri: frame }} style={styles.frame} />}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
},
video: {
flex: 1,
},
toggleButton: {
position: 'absolute',
top: 16,
right: 16,
padding: 8,
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderRadius: 8,
},
toggleButtonText: {
fontSize: 16,
fontWeight: 'bold',
},
frame: {
position: 'absolute',
top: 0,
right: 0,
width: Dimensions.get('window').width / 4,
height: Dimensions.get('window').height / 4,
resizeMode: 'contain',
},
});
export default CameraScreen;
Comments
Post a Comment