boots on android, no recording/file logging/etc, just camera access and button ui

This commit is contained in:
Loewy 2024-01-29 19:01:45 -08:00
parent 4376f9dc26
commit eb152bc6c7
6 changed files with 182 additions and 5 deletions

View File

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

View File

@ -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"/>

View File

@ -0,0 +1,75 @@
import React, { useCallback, useRef, useState } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile } from 'react-native-vision-camera'
import { RecordingButton } from './capture-button'
export default function CameraScreen(): React.ReactElement {
const camera = useRef<Camera>(null)
const { hasPermission, requestPermission } = useCameraPermission()
const [isCameraInitialized, setIsCameraInitialized] = useState(false)
const [isPressingButton, setIsPressingButton] = useState(false)
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
// In the case of our app this might be a requirement
}
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}
video={true}
isActive={true}
/>
<RecordingButton
style={styles.captureButton}
camera={camera}
onMediaCaptured={onMediaCaptured}
enabled={isCameraInitialized}
setIsPressingButton={setIsPressingButton}
/>
</View>
)
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black',
},
captureButton: {
position: 'absolute',
alignSelf: 'center',
bottom: 20, // should be safe area padding
},
})

View File

@ -0,0 +1,45 @@
import React from 'react';
import { TouchableOpacity, StyleSheet } from 'react-native';
export const RecordingButton = ({ style, camera, onMediaCaptured, enabled, setIsPressingButton }) => {
const handlePressIn = () => {
setIsPressingButton(true);
// Additional functionality when the button is pressed
console.log('pressed in')
};
const handlePressOut = () => {
setIsPressingButton(false);
// Stop recording and handle media capture
if (camera && enabled) {
// Assuming you have a method in your camera object to capture media
const media = camera.captureMedia();
if (onMediaCaptured) {
onMediaCaptured(media);
}
}
};
return (
<TouchableOpacity
style={[styles.captureButton, style]}
onPressIn={handlePressIn}
onPressOut={handlePressOut}
disabled={!enabled}
/>
);
};
const styles = StyleSheet.create({
captureButton: {
height: 70,
width: 70,
borderRadius: 35,
backgroundColor: '#FF3B30',
justifyContent: 'center',
alignItems: 'center',
},
});
export default RecordingButton;

View File

@ -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

View File

@ -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==
@ -8362,6 +8369,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 +8412,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"