147 lines
3.9 KiB
TypeScript
147 lines
3.9 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,
|
|
// @ts-ignore
|
|
} from "react-native-vision-camera";
|
|
import { RecordingButton } from "./capture-button";
|
|
import { useIsForeground } from "./is-foreground";
|
|
import { useIsFocused } from "@react-navigation/native";
|
|
|
|
export default function CameraScreen(): React.ReactElement {
|
|
const camera = useRef<Camera>(null);
|
|
const { hasPermission, requestPermission } = useCameraPermission();
|
|
const [isCameraInitialized, setIsCameraInitialized] =
|
|
useState<boolean>(false);
|
|
|
|
const isForeground = useIsForeground();
|
|
const isFocused = useIsFocused();
|
|
const isActive = isForeground && isFocused;
|
|
|
|
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)}`);
|
|
}, []);
|
|
|
|
const onVideoChunkReady = useCallback((event) => {
|
|
console.log(`Chunk ready in react-native`, event.nativeEvent);
|
|
}, []);
|
|
|
|
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) {
|
|
console.log(device);
|
|
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}
|
|
onVideoChunkReady={onVideoChunkReady}
|
|
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
|
|
},
|
|
});
|