setup camera

App/Frontend/App.js

 import React from 'react';
+import { LogBox } from 'react-native';
+LogBox.ignoreAllLogs(true);
 import { createStackNavigator } from 'react-navigation-stack';
 import { createAppContainer } from 'react-navigation';
+import { ToastProvider } from 'react-native-toast-message';
 import LoginScreen from './screens/LoginScreen';
 import HomeScreen from './screens/HomeScreen';
 import ObjectExploreScreen from './screens/ObjectExploreScreen';

App/Frontend/screens/SpeechTherapyScreen.js

@@ -13,11 +13,14 @@ import * as ScreenOrientation from 'expo-screen-orientation';
 import * as FileSystem from 'expo-file-system';
 import axios from 'axios';
 import Toast from 'react-native-toast-message';
+import { Camera } from 'expo-camera';
+import { useRef } from 'react';
 
 
 const SpeechTherapyScreen = ({ navigation }) => {
   const [sound, setSound] = useState(null);
   const [progress, setProgress] = useState(0);
+  const [hasPermission, setHasPermission] = useState(null);
 
   const text = "I go to school";
   const audioPath = './assets/ST/content/school_sentence.m4a';
@@ -27,6 +30,7 @@ const SpeechTherapyScreen = ({ navigation }) => {
   const recordingIconPath = './assets/ST/recording_icon.png';
   const [recording, setRecording] = useState(null);
   const [receivedText, setReceivedText] = useState('');
+  const cameraRef = useRef(null);
   
 
   const startRecording = async () => {
@@ -164,6 +168,12 @@ const SpeechTherapyScreen = ({ navigation }) => {
     };
   }, [recording]);
   
+  useEffect(() => {
+    (async () => {
+      const { status } = await Camera.requestPermissionsAsync();
+      setHasPermission(status === 'granted');
+    })();
+  }, []);
 
   const updatePlaybackStatus = (status) => {
     if (status.isLoaded) {
@@ -214,6 +224,14 @@ const SpeechTherapyScreen = ({ navigation }) => {
             {recording && <Image source={require(recordingIconPath)} style={styles.recordingIcon} />}
           </View>
         </TouchableWithoutFeedback>
+        {hasPermission && (
+        <Camera
+          style={styles.camera}
+          type={Camera.Constants.Type.front}
+          ref={cameraRef}
+          ratio="1:1"
+        />
+      )}
         <Toast ref={(ref) => Toast.setRef(ref)} />
       </View>
     );
@@ -288,6 +306,15 @@ const styles = StyleSheet.create({
     fontSize:35,
     color: 'red', // Change the text color to white
   },
+  camera: {
+    position: 'absolute',
+    top: 39,
+    right: 6,
+    width: 140,
+    height: 120,
+    overflow: 'hidden',
+    borderRadius: 5,
+  }
 });
 
 export default SpeechTherapyScreen;