replace example code with are minified camera screen/record button

2024-01-31 20:48:31 -08:00
parent fb42545890
commit 1f035ce557
17 changed files with 215 additions and 1327 deletions
--- a/package/example/src/camera.tsx
+++ b/package/example/src/camera.tsx
@@ -0,0 +1,112 @@
+import React, { useCallback, useRef, useState } from 'react'
+import { Button, StyleSheet, Text, View } from 'react-native'
+import {
+  Camera,
+  useCameraPermission,
+  useCameraDevice,
+  useCameraFormat,
+  PhotoFile,
+  VideoFile,
+  CameraRuntimeError,
+  Orientation,
+  CameraDevice,
+} from 'react-native-vision-camera'
+import { RecordingButton } from './capture-button'
+import { useIsForeground } from './is-foreground'
+
+export default function CameraScreen() {
+  const camera = useRef<Camera>(null)
+  const { hasPermission, requestPermission } = useCameraPermission()
+  const [isCameraInitialized, setIsCameraInitialized] = useState<boolean>(false)
+
+  const isForeground: boolean = useIsForeground()
+  const isActive: boolean = isForeground // Should be combined with isFocused hook
+
+  const onError = useCallback((error: CameraRuntimeError) => {
+    console.error(error)
+  }, [])
+
+  const onInitialized = useCallback(() => {
+    console.log('Camera initialized!')
+    setIsCameraInitialized(true)
+  }, [])
+
+  const onMediaCaptured = useCallback((media: PhotoFile | VideoFile) => {
+    console.log(`Media captured! ${JSON.stringify(media)}`)
+  }, [])
+
+  if (!hasPermission) requestPermission()
+  // Error handling in case they refuse to give permission
+
+  const device = useCameraDevice('back')
+  const format = useCameraFormat(device, [{ videoResolution: { width: 3048, height: 2160 } }, { fps: 60 }]) // this sets as a target
+
+  //Orientation detection
+  const [orientation, setOrientation] = useState<Orientation>('portrait')
+
+  const toggleOrientation = () => {
+    setOrientation(
+      (currentOrientation) => (currentOrientation === 'landscape-left' ? 'portrait' : 'landscape-left'), // Can adjust this and the type to match what we want
+    )
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (device === null) return <Text>Camera not available. Does user have permissions: {hasPermission}</Text>
+
+  return (
+    hasPermission && (
+      <View style={styles.container}>
+        <Camera
+          ref={camera}
+          style={StyleSheet.absoluteFill}
+          device={device as CameraDevice}
+          format={format}
+          onInitialized={onInitialized}
+          onError={onError}
+          video={true}
+          orientation={orientation} // TODO: #60
+          isActive={isActive}
+        />
+        <RecordingButton
+          style={[styles.captureButton, orientation === 'portrait' ? styles.portrait : styles.landscape]}
+          camera={camera}
+          onMediaCaptured={onMediaCaptured}
+          enabled={isCameraInitialized}
+        />
+        <View style={[styles.button, orientation === 'portrait' ? styles.togglePortrait : styles.toggleLandscape]}>
+          <Button title="Toggle Orientation" onPress={toggleOrientation} color="#841584" accessibilityLabel="Toggle camera orientation" />
+        </View>
+      </View>
+    )
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'black',
+  },
+  captureButton: {
+    position: 'absolute',
+    alignSelf: 'center',
+  },
+  button: {
+    position: 'absolute',
+    alignSelf: 'center',
+  },
+  togglePortrait: {
+    bottom: 110, // needs refined
+  },
+  toggleLandscape: {
+    transform: [{ rotate: '90deg' }],
+    bottom: '43%', // Should come from SafeAreaProvider, hardcoded right now, should roughly appear above the button
+    left: 50, // needs refined
+  },
+  portrait: {
+    bottom: 20, // needs refined
+  },
+  landscape: {
+    bottom: '40%', // Should come from SafeAreaProvider
+    left: 20, // needs refined
+  },
+})