116 lines
3.5 KiB
TypeScript
116 lines
3.5 KiB
TypeScript
import React, { useCallback, useRef, useState } from 'react'
|
|
import { Button, StyleSheet, Text, View } from 'react-native'
|
|
import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile, CameraRuntimeError, Orientation } 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<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
|
|
);
|
|
};
|
|
|
|
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}
|
|
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
|
|
}
|
|
}) |