React Native'de ML Kit ile Gerçek Zamanlı Şekil Tanıma

1npm install react-native-ml-kit react-native-camera
2npx react-native link react-native-camera

1allprojects {
2repositories {
3google()
4mavenCentral()
5}
6}

1import React, { useState } from 'react';
2import { View, Text, StyleSheet } from 'react-native';
3import { RNCamera } from 'react-native-camera';
4import MLKit from 'react-native-ml-kit';
5
6const ShapeDetector = () => {
7const [detectedShapes, setDetectedShapes] = useState([]);
8
9const onCameraReady = async (camera) => {
10setInterval(async () => {
11try {
12const options = {
13quality: 0.7,
14base64: true,
15skipProcessing: true,
16};
17const data = await camera.takePictureAsync(options);
18
19const result = await MLKit.objectDetection(data.uri);
20setDetectedShapes(result);
21} catch (error) {
22console.log('Hata:', error);
23}
24}, 1000);
25};
26
27return (
28<View style={styles.container}>
29<RNCamera
30style={styles.camera}
31type={RNCamera.Constants.Type.back}
32onCameraReady={onCameraReady}
33captureAudio={false}
34/>
35<View style={styles.infoBox}>
36<Text style={styles.title}>Tanınan Şekiller:</Text>
37{detectedShapes.map((shape, idx) => (
38<Text key={idx} style={styles.text}>
39{shape.displayName} - %{(shape.confidence * 100).toFixed(0)}
40</Text>
41))}
42</View>
43</View>
44);
45};
46
47const styles = StyleSheet.create({
48container: { flex: 1 },
49camera: { flex: 1 },
50infoBox: {
51position: 'absolute',
52bottom: 20,
53left: 20,
54right: 20,
55backgroundColor: 'rgba(0,0,0,0.7)',
56padding: 15,
57borderRadius: 10,
58},
59title: { color: '#fff', fontSize: 16, fontWeight: 'bold' },
60text: { color: '#fff', fontSize: 14, marginTop: 5 },
61});
62
63export default ShapeDetector;