fixing the camera

IT19001708/App/HearMe/App.js

@@ -3,6 +3,7 @@ import { createStackNavigator } from 'react-navigation-stack';
 import { createAppContainer } from 'react-navigation';
 import LoginScreen from './screens/LoginScreen';
 import HomeScreen from './screens/HomeScreen';
+import ObjectDetectCamera from './screens/ObjectDetectCamera';
 
 const MainStack = createStackNavigator(
   {
@@ -12,6 +13,9 @@ const MainStack = createStackNavigator(
     Home: {
       screen: HomeScreen,
     },
+    objectDetect: {
+      screen: ObjectDetectCamera,
+    }
   },
   {
     initialRouteName: 'Login',

IT19001708/App/HearMe/package-lock.json

@@ -11,8 +11,11 @@
         "@expo/vector-icons": "^13.0.0",
         "@react-navigation/native": "^6.1.6",
         "@react-navigation/stack": "^6.3.16",
+        "@types/react-native": "^0.71.5",
         "expo": "~48.0.9",
         "expo-av": "^13.2.1",
+        "expo-camera": "~13.2.1",
+        "expo-media-library": "~15.2.3",
         "expo-status-bar": "~1.4.4",
         "react": "18.2.0",
         "react-native": "0.71.4",
@@ -3942,6 +3945,34 @@
       "integrity": "sha512-9avDaQJczATcXgfmMAW3MIWArOO7A+m90vuCFLr8AotWf8igO/mRoYukrk2cqZVtv38tHs33retzHEilM7FpeQ==",
       "license": "MIT"
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
+    "node_modules/@types/react": {
+      "version": "18.0.32",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.32.tgz",
+      "integrity": "sha512-gYGXdtPQ9Cj0w2Fwqg5/ak6BcK3Z15YgjSqtyDizWUfx7mQ8drs0NBUzRRsAdoFVTO8kJ8L2TL8Skm7OFPnLUw==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-native": {
+      "version": "0.71.5",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.71.5.tgz",
+      "integrity": "sha512-Tp5druh7DGwNDvWYH09PCE++hbH4zYz0OOvGFb3/QFIFKXgfezaT/txJeKlBkbiqs45QJzllp9S0qo0WpWyijA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
+    },
     "node_modules/@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -5323,6 +5354,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
     "node_modules/dag-map": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/dag-map/-/dag-map-1.0.2.tgz",
@@ -5560,6 +5596,14 @@
         "prop-types": "*"
       }
     },
+    "node_modules/dequal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-1.0.1.tgz",
+      "integrity": "sha512-Fx8jxibzkJX2aJgyfSdLhr9tlRoTnHKrRJuu2XHlAgKioN2j19/Bcbe0d4mFXYZ3+wpE2KVobUVTfDutcD17xQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -5856,6 +5900,43 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-camera": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-13.2.1.tgz",
+      "integrity": "sha512-fZdRyF402jJGGmLVlumrLcr5Em9+Y2SO1MIlxLBtHXnybyHbTRMRAbzVapKX1Aryfujqadh+Kl+sdsWYkMuJjg==",
+      "dependencies": {
+        "@koale/useworker": "^4.0.2",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-camera/node_modules/@koale/useworker": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@koale/useworker/-/useworker-4.0.2.tgz",
+      "integrity": "sha512-xPIPADtom8/3/4FLNj7MvNcBM/Z2FleH85Fdx2O869eoKW8+PoEgtSVvoxWjCWMA46Sm9A5/R1TyzNGc+yM0wg==",
+      "dependencies": {
+        "dequal": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0"
+      }
+    },
+    "node_modules/expo-camera/node_modules/react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/expo-constants": {
       "version": "14.2.1",
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-14.2.1.tgz",
@@ -5902,6 +5983,14 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-media-library": {
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/expo-media-library/-/expo-media-library-15.2.3.tgz",
+      "integrity": "sha512-Oz8b8Xsvfj7YcutUBtI84NUIqSnt7iCM5HZ5DyKoWKKiDK/+aUuj3RXNQELG8jUw6pQPgEwgbZ1+J8SdH/y9jw==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.1.2.tgz",
@@ -15061,6 +15150,34 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.10.tgz",
       "integrity": "sha512-9avDaQJczATcXgfmMAW3MIWArOO7A+m90vuCFLr8AotWf8igO/mRoYukrk2cqZVtv38tHs33retzHEilM7FpeQ=="
     },
+    "@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
+    "@types/react": {
+      "version": "18.0.32",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.32.tgz",
+      "integrity": "sha512-gYGXdtPQ9Cj0w2Fwqg5/ak6BcK3Z15YgjSqtyDizWUfx7mQ8drs0NBUzRRsAdoFVTO8kJ8L2TL8Skm7OFPnLUw==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-native": {
+      "version": "0.71.5",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.71.5.tgz",
+      "integrity": "sha512-Tp5druh7DGwNDvWYH09PCE++hbH4zYz0OOvGFb3/QFIFKXgfezaT/txJeKlBkbiqs45QJzllp9S0qo0WpWyijA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
+    },
     "@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -16005,6 +16122,11 @@
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
       "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA=="
     },
+    "csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
     "dag-map": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/dag-map/-/dag-map-1.0.2.tgz",
@@ -16173,6 +16295,11 @@
         "prop-types": "*"
       }
     },
+    "dequal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-1.0.1.tgz",
+      "integrity": "sha512-Fx8jxibzkJX2aJgyfSdLhr9tlRoTnHKrRJuu2XHlAgKioN2j19/Bcbe0d4mFXYZ3+wpE2KVobUVTfDutcD17xQ=="
+    },
     "destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -16384,6 +16511,36 @@
       "integrity": "sha512-mC0mYSzaOaZgXjzhW2l4Ag325JjH6q5IbptfwD7gkMOFYy7VPOMxEMUnetadbs3DDzmgE6vUWrTjUIUbwq59qg==",
       "requires": {}
     },
+    "expo-camera": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-13.2.1.tgz",
+      "integrity": "sha512-fZdRyF402jJGGmLVlumrLcr5Em9+Y2SO1MIlxLBtHXnybyHbTRMRAbzVapKX1Aryfujqadh+Kl+sdsWYkMuJjg==",
+      "requires": {
+        "@koale/useworker": "^4.0.2",
+        "invariant": "^2.2.4"
+      },
+      "dependencies": {
+        "@koale/useworker": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/@koale/useworker/-/useworker-4.0.2.tgz",
+          "integrity": "sha512-xPIPADtom8/3/4FLNj7MvNcBM/Z2FleH85Fdx2O869eoKW8+PoEgtSVvoxWjCWMA46Sm9A5/R1TyzNGc+yM0wg==",
+          "requires": {
+            "dequal": "^1.0.0"
+          }
+        },
+        "react": {
+          "version": "16.14.0",
+          "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+          "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+          "peer": true,
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2"
+          }
+        }
+      }
+    },
     "expo-constants": {
       "version": "14.2.1",
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-14.2.1.tgz",
@@ -16415,6 +16572,12 @@
       "integrity": "sha512-hqeCnb4033TyuZaXs93zTK7rjVJ3bywXATyMmKmKkLEsH2PKBAl/VmjlCOPQL/2Ncqz6aj7Wo//tjeJTARBD4g==",
       "requires": {}
     },
+    "expo-media-library": {
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/expo-media-library/-/expo-media-library-15.2.3.tgz",
+      "integrity": "sha512-Oz8b8Xsvfj7YcutUBtI84NUIqSnt7iCM5HZ5DyKoWKKiDK/+aUuj3RXNQELG8jUw6pQPgEwgbZ1+J8SdH/y9jw==",
+      "requires": {}
+    },
     "expo-modules-autolinking": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.1.2.tgz",

IT19001708/App/HearMe/package.json

@@ -12,8 +12,11 @@
     "@expo/vector-icons": "^13.0.0",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/stack": "^6.3.16",
+    "@types/react-native": "^0.71.5",
     "expo": "~48.0.9",
     "expo-av": "^13.2.1",
+    "expo-camera": "~13.2.1",
+    "expo-media-library": "~15.2.3",
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",
     "react-native": "0.71.4",

IT19001708/App/HearMe/screens/ObjectDetectCamera.js

+import React, { useState, useEffect, useRef } from 'react';
+import { Text, View, StyleSheet, TouchableOpacity, Image } from 'react-native';
+import Constants from 'expo-constants';
+import { Camera, CameraType } from 'expo-camera';
+import * as MediaLibrary from 'expo-media-library';
+import { MaterialIcons } from '@expo/vector-icons';
+import Button from './components/Button';
+
+
+function ObjectDetectCamera(props) {
+    const [hasCameraPermission, setHasCameraPermission] = useState(null);
+    const [flash, setFlash] = useState(Camera.Constants.FlashMode.off);
+    const [image, setImage] = useState(null);
+    const [type, setType] = useState(Camera.Constants.Type.back);
+    
+    const cameraRef = useRef(null);
+
+    useEffect(() => {
+
+        (async () => {
+            MediaLibrary.requestPermissionsAsync();
+            const cameraStatus = await Camera.requestCameraPermissionsAsync();
+            setHasCameraPermission(cameraStatus.status === 'granted');
+          })();
+        }, []);
+    
+        // async function to take the picture
+        const takePicture = async () => {
+            if (cameraRef) {
+              try {
+                const data = await cameraRef.current.takePictureAsync();
+                console.log(data);
+                setImage(data.uri); //reference uri to the picture
+              } catch (error) {
+                console.log(error);
+              }
+            }
+        };
+
+        // saving the capureed image
+        const savePicture = async () => {
+          if (image) {
+            try {
+              const asset = await MediaLibrary.createAssetAsync(image);
+              alert('Picture saved! 🎉');
+              setImage(null);
+              console.log('saved successfully');
+            } catch (error) {
+              console.log(error);
+            }
+          }
+        };
+
+    if (hasCameraPermission === false) {
+        return <Text>No access to camera</Text>;
+    }
+    return (
+        <View style={styles.background}>
+            {!image ? (
+        <Camera
+          style={styles.camera}
+          type={type}
+          ref={cameraRef}
+          flashMode={flash}
+        >
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              paddingHorizontal: 30,
+            }}
+          >
+            <Button
+              title=""
+              icon="retweet"
+              onPress={() => {
+                setType(
+                  type === CameraType.back ? CameraType.front : CameraType.back
+                );
+              }}
+            />
+            <Button
+              onPress={() =>
+                setFlash(
+                  flash === Camera.Constants.FlashMode.off
+                    ? Camera.Constants.FlashMode.on
+                    : Camera.Constants.FlashMode.off
+                )
+              }
+              icon="flash"
+              color={flash === Camera.Constants.FlashMode.off ? 'gray' : '#fff'}
+            />
+          </View>
+        </Camera>
+      ) : (
+        <Image source={{ uri: image }} style={styles.camera} />
+      )}
+
+      <View style={styles.controls}>
+        {image ? (
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              paddingHorizontal: 50,
+              
+            }}
+          >
+            <Button
+              title="Re-take"
+              onPress={() => setImage(null)}
+              icon="retweet"
+            />
+            <Button title="Save" onPress={savePicture} icon="check" />
+          </View>
+        ) : (
+          <Button title="Capure Object" onPress={takePicture} icon="camera" />
+        )}
+      </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    background: {
+        flex: 1,
+        backgroundColor: "#000000"
+    },
+    camera: {
+        flex: 5,
+    borderRadius: 20,
+    },
+    controls: {
+      flex: 0.5,
+    },
+    topControls: {
+      flex: 1,
+    },
+    
+})
+export default ObjectDetectCamera;
\ No newline at end of file

IT19001708/App/HearMe/screens/components/Button.js

+import * as React from 'react';
+import { Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { Entypo } from '@expo/vector-icons';
+import { MaterialIcons } from '@expo/vector-icons';
+
+export default function Button({ title, onPress, icon, color }) {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.button}>
+      <Entypo name={icon} size={28} color={color ? color : '#f1f1f1'} />
+      <Text style={styles.text}>{title}</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    height: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontWeight: 'bold',
+    fontSize: 16,
+    color: '#f1f1f1',
+    marginLeft: 10,
+  },
+});
\ No newline at end of file

node_modules/.package-lock.json

+{
+  "name": "22_23-j-18",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

package-lock.json

+{
+  "name": "22_23-j-18",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

package.json

+{}