Merge pull request 'Camera -- mount & record' (#62) from loewy/rn-vision-camera-preview into master

Reviewed-on: railbird/rn-playground#62
Reviewed-by: Ivan Malison <ivanmalison@gmail.com>
Reviewed-by: Kat Huang <kkathuang@gmail.com>

App.tsx

@@ -1,14 +1,9 @@
 import React from "react";
-import { Text } from "react-native";
+import CameraScreen from "./component/video/camera";
-import ClientProvider from "./graphql/client";
-import ShotsContainer from "./component/shot";
 
 const App: React.FC = () => {
 	return (
-		<ClientProvider>
+		<CameraScreen />
-			<ShotsContainer />
-			<Text>test</Text>
-		</ClientProvider>
 	);
 };
 

android/app/src/main/AndroidManifest.xml

@@ -1,4 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="android.railbird.app">
+  <uses-permission android:name="android.permission.CAMERA"/>
   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
   <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

babel.config.js

@@ -10,6 +10,7 @@ module.exports = function(api) {
                 "allowUndefined": true,
                 "verbose": false,
             }],
+            'react-native-reanimated/plugin',
         ],
     };
 };

component/video/camera.tsx

@@ -0,0 +1,83 @@
+import React, { useCallback, useRef, useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile, CameraRuntimeError } from 'react-native-vision-camera'
+import { RecordingButton } from './capture-button'
+import { useIsForeground } from './is-foreground'
+
+export default function CameraScreen(): React.ReactElement {
+  const camera = useRef<Camera>(null)
+  const { hasPermission, requestPermission } = useCameraPermission()
+  const [isCameraInitialized, setIsCameraInitialized] = useState(false)
+
+  const isForeground = useIsForeground()
+  const isActive = isForeground
+
+  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 }
+  ])
+
+  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}
+          format={format}
+          onInitialized={onInitialized}
+          onError={onError}
+          video={true}
+          photo={false}
+          orientation='portrait' // TODO: #60
+          isActive={isActive}
+        />
+        <RecordingButton
+          style={styles.captureButton}
+          camera={camera}
+          onMediaCaptured={onMediaCaptured}
+          enabled={isCameraInitialized}
+        />
+      </View>
+      
+    )
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'black',
+  },
+  captureButton: {
+    position: 'absolute',
+    alignSelf: 'center',
+    bottom: 20, // Should come from SafeAreaProvider
+  },
+})

component/video/capture-button.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { TouchableOpacity, StyleSheet, View } from 'react-native';
+import { CameraRoll } from "@react-native-camera-roll/camera-roll";
+
+
+export const RecordingButton = ({ style, camera, onMediaCaptured, enabled }) => {
+
+	const isRecording = useRef(false)
+	// UseRef won't trigger a re-render
+	const [, setRecordingState] = useState(false);
+
+	const onStoppedRecording = useCallback(() => {
+		isRecording.current = false
+		setRecordingState(false)
+		console.log('stopped recording video!')
+	}, [])
+
+	const stopRecording = useCallback(async () => {
+		try {
+			if (camera.current === null) {
+				throw new Error('Camera ref is null!') // Error handling could be more graceful
+			}
+			console.log('calling stopRecording()...')
+			await camera.current.stopRecording()
+			console.log('called stopRecording()!')
+		} catch (e) {
+			console.error('failed to stop recording!', e)
+		}
+	}, [camera])
+
+const startRecording = useCallback(() => {
+	try {
+		if (camera.current === null) {
+			throw new Error('Camera ref is null!') // Error handling could be more graceful
+		}
+		console.log('calling startRecording()...')
+		camera.current.startRecording({
+			onRecordingError: (error) => {
+				console.error('Recording failed!', error)
+				onStoppedRecording()
+			},
+			onRecordingFinished: async (video) => {
+				onMediaCaptured(video, 'video')
+				const path = video.path
+				await CameraRoll.saveAsset(`file://${path}`, {
+					type: 'video',
+				})
+				onStoppedRecording()
+			},
+		})
+		console.log('called startRecording()!')
+		isRecording.current = true
+		setRecordingState(true)
+		} catch (e) {
+		console.error('failed to start recording!', e, 'camera')
+	}
+}, [camera, onMediaCaptured, onStoppedRecording])
+
+const handlePress = () => {
+	if (isRecording.current) {
+			stopRecording();
+	} else {
+			startRecording();
+	}
+};
+
+	return (
+		<TouchableOpacity
+			style={[styles.captureButton, style]}
+			onPress={handlePress}
+			disabled={!enabled}
+		>
+			<View style={isRecording.current ? styles.recordingSquare : styles.innerCircle} />
+		</TouchableOpacity>
+	);
+};
+
+const styles = StyleSheet.create({
+	captureButton: {
+			height: 80,
+			width: 80,
+			borderRadius: 40,
+			borderWidth: 3,
+			borderColor: 'white',
+			backgroundColor: 'transparent',
+			justifyContent: 'center',
+			alignItems: 'center',
+	},
+	innerCircle: {
+			height: 70,
+			width: 70,
+			borderRadius: 35,
+			backgroundColor: '#FF3B30',
+	},
+	recordingSquare: {
+			height: 40,
+			width: 40,
+			borderRadius: 10,
+			backgroundColor: '#FF3B30',
+	},
+});
+
+export default RecordingButton;

component/video/constants.ts

@@ -0,0 +1,31 @@
+import { Dimensions, Platform } from 'react-native'
+import StaticSafeAreaInsets from 'react-native-static-safe-area-insets'
+
+export const CONTENT_SPACING = 15
+
+const SAFE_BOTTOM =
+  Platform.select({
+    ios: StaticSafeAreaInsets.safeAreaInsetsBottom,
+  }) ?? 0
+
+export const SAFE_AREA_PADDING = {
+  paddingLeft: StaticSafeAreaInsets.safeAreaInsetsLeft + CONTENT_SPACING,
+  paddingTop: StaticSafeAreaInsets.safeAreaInsetsTop + CONTENT_SPACING,
+  paddingRight: StaticSafeAreaInsets.safeAreaInsetsRight + CONTENT_SPACING,
+  paddingBottom: SAFE_BOTTOM + CONTENT_SPACING,
+}
+
+// The maximum zoom _factor_ you should be able to zoom in
+export const MAX_ZOOM_FACTOR = 10
+
+export const SCREEN_WIDTH = Dimensions.get('window').width
+export const SCREEN_HEIGHT = Platform.select<number>({
+  android: Dimensions.get('screen').height - StaticSafeAreaInsets.safeAreaInsetsBottom,
+  ios: Dimensions.get('window').height,
+}) as number
+
+// Capture Button
+export const CAPTURE_BUTTON_SIZE = 78
+
+// Control Button like Flash
+export const CONTROL_BUTTON_SIZE = 40

component/video/is-foreground.tsx

@@ -0,0 +1,16 @@
+import { useState, useEffect  } from 'react'
+import { AppState, AppStateStatus } from 'react-native'
+
+export const useIsForeground = (): boolean => {
+  const [isForeground, setIsForeground] = useState(true)
+
+  useEffect(() => {
+    const onChange = (state: AppStateStatus): void => {
+      setIsForeground(state === 'active')
+    }
+    const listener = AppState.addEventListener('change', onChange)
+    return () => listener.remove()
+  }, [setIsForeground])
+
+  return isForeground
+}

package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.8",
+    "@react-native-camera-roll/camera-roll": "^7.4.0",
     "@react-native-firebase/app": "^18.8.0",
     "@react-native-firebase/auth": "^18.8.0",
     "@types/react": "~18.2.14",
@@ -43,8 +44,11 @@
     "react": "18.2.0",
     "react-native": "0.72.6",
     "react-native-dotenv": "^3.4.9",
+    "react-native-reanimated": "^3.6.2",
+    "react-native-static-safe-area-insets": "^2.2.0",
     "react-native-svg": "13.9.0",
     "react-native-svg-charts": "^5.4.0",
+    "react-native-vision-camera": "^3.8.2",
     "typescript": "^5.3.3"
   },
   "devDependencies": {
@@ -58,4 +62,3 @@
   },
   "private": true
 }
-

yarn.lock

@@ -857,6 +857,13 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
+"@babel/plugin-transform-object-assign@^7.16.7":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.23.3.tgz#64177e8cf943460c7f0e1c410277546804f59625"
+  integrity sha512-TPJ6O7gVC2rlQH2hvQGRH273G1xdoloCj9Pc07Q7JbIZYDi+Sv5gaE2fu+r5E7qK4zyt6vj0FbZaZTRU5C3OMA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-transform-object-rest-spread@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.23.4.tgz#2b9c2d26bf62710460bdc0d1730d4f1048361b83"
@@ -1165,7 +1172,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-typescript@^7.13.0":
+"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.7":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz#14534b34ed5b6d435aa05f1ae1c5e7adcc01d913"
   integrity sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==
@@ -1984,6 +1991,11 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@react-native-camera-roll/camera-roll@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@react-native-camera-roll/camera-roll/-/camera-roll-7.4.0.tgz#931e25b076b40dc57ca6d380f0a85d494a120f06"
+  integrity sha512-y0bVpMJLaFphYvMMx1BsqgMA0kXq9CKxKYNnt4ocUvwJj5Rp4TZ233rzJoDqz1oxd56Tz5f1g+yhYN5RImKl8Q==
+
 "@react-native-community/cli-clean@11.3.7":
   version "11.3.7"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-11.3.7.tgz#cb4c2f225f78593412c2d191b55b8570f409a48f"
@@ -8362,6 +8374,21 @@ react-native-dotenv@^3.4.9:
   dependencies:
     dotenv "^16.3.1"
 
+react-native-reanimated@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.2.tgz#8a48c37251cbd3b665a659444fa9778f5b510356"
+  integrity sha512-IIMREMOrxhtK35drfpzh2UhxNqAOHnuvGgtMofj7yHcMj16tmWZR2zFvMUf6z2MfmXv+aVgFQ6TRZ6yKYf7LNA==
+  dependencies:
+    "@babel/plugin-transform-object-assign" "^7.16.7"
+    "@babel/preset-typescript" "^7.16.7"
+    convert-source-map "^2.0.0"
+    invariant "^2.2.4"
+
+react-native-static-safe-area-insets@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-native-static-safe-area-insets/-/react-native-static-safe-area-insets-2.2.0.tgz#dd86b6a38f43964fac8df8c0e6bc8e062527786c"
+  integrity sha512-TLTW2e2kRK3COSK8gMZzwp4wHguFCtcO18itDLn5av/xQblXt9ylu84o+qD9aKJCBfvtNzGOvqqTKqC5GJRZ/g==
+
 react-native-svg-charts@^5.4.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/react-native-svg-charts/-/react-native-svg-charts-5.4.0.tgz#3817a4714c276b7024e60ae5c9f13191614aecc8"
@@ -8390,6 +8417,11 @@ react-native-svg@^6.2.1:
     lodash "^4.16.6"
     pegjs "^0.10.0"
 
+react-native-vision-camera@^3.8.2:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/react-native-vision-camera/-/react-native-vision-camera-3.8.2.tgz#f4f75f84c6a19e1c3474ddc0f7f785b5a526739b"
+  integrity sha512-MY39l2e3hNRPUefn2JPShOFExcw0PblbAcUGvJrIfS9pMzdIyceo0umRAx8lOGXzDUAdb+xy/tFWb8zGxKimCQ==
+
 react-native@*:
   version "0.73.2"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.73.2.tgz#74ee163c8189660d41d1da6560411da7ce41a608"