detection with tenserflow
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import Video from 'react-native-video';
import * as tf from '@tensorflow/tfjs';
import '@tensorflow/tfjs-react-native';
// Constants for object detection
const MODEL_URL = 'https://tfhub.dev/tensorflow/tfjs-model/ssd_mobilenet_v1/1/default/1/model.json';
const INPUT_SIZE = 224; // Input size required by the model
const OBJECT_THRESHOLD = 0.5; // Minimum confidence threshold for detected objects
class VideoScreen extends Component {
constructor(props) {
super(props);
this.state = {
isModelReady: false,
objects: [],
};
// Load the TensorFlow.js model
this.loadModel();
}
async loadModel() {
try {
await tf.ready();
const model = await tf.loadGraphModel(MODEL_URL);
this.setState({ isModelReady: true, model });
this.processVideoFrames();
} catch (error) {
console.error('Error loading the model:', error);
}
}
processVideoFrames() {
if (!this.state.isModelReady) return;
const videoStream = { uri: 'http://192.168.1.16/' }; // Replace with the video stream URL
this.videoRef.seek(0);
const loop = async () => {
const frame = await this.videoRef.getCurrentFrame();
if (!frame) return;
const { width, height } = frame;
const imageData = frame.data;
const imageTensor = tf.browser.fromPixels({ data: new Uint8Array(imageData), width, height });
const resizedTensor = tf.image.resizeBilinear(imageTensor, [INPUT_SIZE, INPUT_SIZE]);
const batchedTensor = resizedTensor.expandDims(0);
const scaledTensor = batchedTensor.div(255);
const predictions = await this.state.model.executeAsync(scaledTensor);
const objects = this.parseObjectDetection(predictions);
this.setState({ objects });
requestAnimationFrame(loop);
};
this.videoRef.setOnPlaybackStatusUpdate(loop);
this.videoRef.ref.setNativeProps({ source: videoStream });
}
parseObjectDetection(predictions) {
const [boxes, scores, classes, numDetections] = predictions;
const objects = [];
for (let i = 0; i < numDetections; i++) {
const score = scores[i];
const classIndex = classes[i];
const boundingBox = boxes[i];
if (score > OBJECT_THRESHOLD) {
const object = {
class: classIndex,
score: score,
box: boundingBox,
};
objects.push(object);
}
}
return objects;
}
render() {
return (
<View style={styles.container}>
<Video
ref={(ref) => (this.videoRef = ref)}
style={styles.videoPlayer}
resizeMode="cover"
repeat={true}
paused={false}
/>
{/* Render the detected objects as overlays */}
{this.state.objects.map((object, index) => (
<View
key={index}
style={[
styles.boundingBox,
{
left: object.box.originX,
top: object.box.originY,
width: object.box.width,
height: object.box.height,
},
]}
/>
))}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000',
justifyContent: 'center',
alignItems: 'center',
},
videoPlayer: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
},
boundingBox: {
position: 'absolute',
borderColor: 'red',
borderWidth: 2,
},
});
export default VideoScreen;
Comments
Post a Comment