Adam's first issue - ability to switch between cameras (#58)

examples/objectdetection/android/app/build.gradle

@@ -76,6 +76,7 @@ android {
 
     namespace "com.objectdetection"
     defaultConfig {
+
         applicationId "com.objectdetection"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion

examples/objectdetection/src/App.tsx

@@ -20,7 +20,7 @@ function App() {
         <Tab.Screen
           name="Photo"
           component={Photo}
-          options={{ title: "Photo" }}
+          options={{ title: "Photos" }}
         />
         <Tab.Screen
           name="Settings"

examples/objectdetection/src/CameraStream.tsx

@@ -25,6 +25,7 @@ import {
 import {
   useCameraPermission,
   useMicrophonePermission,
+  type CameraPosition,
 } from "react-native-vision-camera";
 import type { RootTabParamList } from "./navigation";
 import type { BottomTabScreenProps } from "@react-navigation/bottom-tabs";
@@ -67,6 +68,13 @@ export const CameraStream: React.FC<Props> = () => {
 
   const [objectFrames, setObjectFrames] = React.useState<Detection[]>([]);
 
+  const [active, setActive] = React.useState<CameraPosition>("front");
+  const setActiveCamera = () => {
+    setActive((currentCamera) =>
+      currentCamera === "front" ? "back" : "front"
+    );
+  };
+
   const frameProcessor = useObjectDetection(
     (results) => {
       console.log(results);
@@ -97,15 +105,23 @@ export const CameraStream: React.FC<Props> = () => {
     "efficientdet-lite0.tflite",
     { delegate: Delegate.GPU }
   );
+
   if (permsGranted.cam && permsGranted.mic) {
     return (
       <View style={styles.container}>
-        <MediapipeCamera style={styles.box} processor={frameProcessor} />
+        <MediapipeCamera
+          style={styles.box}
+          processor={frameProcessor}
+          activeCamera={active}
+        />
         <Canvas style={styles.box}>
           {objectFrames.map((frame, index) => (
             <ObjectFrame frame={frame} index={index} key={index} />
           ))}
         </Canvas>
+        <Pressable style={styles.cameraSwitchButton} onPress={setActiveCamera}>
+          <Text style={styles.cameraSwitchButtonText}>Switch Camera</Text>
+        </Pressable>
       </View>
     );
   } else {
@@ -179,6 +195,18 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
     color: "red",
   },
+  cameraSwitchButton: {
+    position: "absolute",
+    padding: 10,
+    backgroundColor: "blue",
+    borderRadius: 20,
+    top: 20,
+    right: 20,
+  },
+  cameraSwitchButtonText: {
+    color: "white",
+    fontSize: 16,
+  },
 });
 
 const colorNames = [

src/index.tsx

@@ -3,19 +3,22 @@ import { type ViewStyle, Text, Platform } from "react-native";
 import {
   Camera,
   useCameraDevice,
+  type CameraPosition,
   type FrameProcessor,
 } from "react-native-vision-camera";
 
 export type MediapipeCameraProps = {
   style: ViewStyle;
   processor: FrameProcessor;
+  activeCamera: CameraPosition;
 };
 
 export const MediapipeCamera: React.FC<MediapipeCameraProps> = ({
   style,
   processor,
+  activeCamera,
 }) => {
-  const device = useCameraDevice("front");
+  const device = useCameraDevice(activeCamera);
   return device !== undefined ? (
     <Camera
       style={style}