tested on emulator, works on some physical devices, will record + save to local camera roll & produce logs

This commit is contained in:
Loewy 2024-01-30 14:08:46 -08:00
parent cd3329baae
commit f9111ffe5e
3 changed files with 34 additions and 27 deletions

View File

@ -1,21 +1,20 @@
import React, { useCallback, useRef, useState } from 'react' import React, { useCallback, useRef, useState } from 'react'
import { StyleSheet, Text, View } from 'react-native' import { StyleSheet, Text, View } from 'react-native'
import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile } from 'react-native-vision-camera' import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile, CameraRuntimeError } from 'react-native-vision-camera'
import { RecordingButton } from './capture-button' import { RecordingButton } from './capture-button'
import { useSharedValue } from 'react-native-reanimated' import { useIsForeground } from './is-foreground'
export default function CameraScreen(): React.ReactElement { export default function CameraScreen(): React.ReactElement {
const camera = useRef<Camera>(null) const camera = useRef<Camera>(null)
const { hasPermission, requestPermission } = useCameraPermission() const { hasPermission, requestPermission } = useCameraPermission()
const [isCameraInitialized, setIsCameraInitialized] = useState(false) const [isCameraInitialized, setIsCameraInitialized] = useState(false)
const isPressingButton = useSharedValue(false)
const setIsPressingButton = useCallback( const isForeground = useIsForeground()
(_isPressingButton: boolean) => { const isActive = isForeground
isPressingButton.value = _isPressingButton
}, const onError = useCallback((error: CameraRuntimeError) => {
[isPressingButton], console.error(error)
) }, [])
const onInitialized = useCallback(() => { const onInitialized = useCallback(() => {
console.log('Camera initialized!') console.log('Camera initialized!')
@ -32,14 +31,13 @@ export default function CameraScreen(): React.ReactElement {
if (!hasPermission) { if (!hasPermission) {
requestPermission() requestPermission()
// Error handling in case they refuse to give permission // 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 device = useCameraDevice('back')
// const format = useCameraFormat(device, [ const format = useCameraFormat(device, [
// { videoResolution: { width: 3048, height: 2160 } }, { videoResolution: { width: 3048, height: 2160 } },
// { fps: 60 } { fps: 60 }
// ]) ])
if (device === null) { if (device === null) {
return <Text>Camera not available. Does user have permissions: {hasPermission}</Text> return <Text>Camera not available. Does user have permissions: {hasPermission}</Text>
@ -52,19 +50,19 @@ export default function CameraScreen(): React.ReactElement {
ref={camera} ref={camera}
style={StyleSheet.absoluteFill} style={StyleSheet.absoluteFill}
device={device} device={device}
// format={format} format={format}
onInitialized={onInitialized} onInitialized={onInitialized}
onError={onError}
video={true} video={true}
photo={false} photo={false}
// orientation='portrait' // TODO: figure out what this looks like to the native module orientation='portrait' // TODO: #60
isActive={true} isActive={isActive}
/> />
<RecordingButton <RecordingButton
style={styles.captureButton} style={styles.captureButton}
camera={camera} camera={camera}
onMediaCaptured={onMediaCaptured} onMediaCaptured={onMediaCaptured}
enabled={isCameraInitialized} enabled={isCameraInitialized}
setIsPressingButton={setIsPressingButton}
/> />
</View> </View>
@ -80,6 +78,6 @@ const styles = StyleSheet.create({
captureButton: { captureButton: {
position: 'absolute', position: 'absolute',
alignSelf: 'center', alignSelf: 'center',
bottom: 20, // should be safe area padding bottom: 20, // Should come from SafeAreaProvider
}, },
}) })

View File

@ -3,21 +3,19 @@ import { TouchableOpacity, StyleSheet, View } from 'react-native';
import { CameraRoll } from "@react-native-camera-roll/camera-roll"; import { CameraRoll } from "@react-native-camera-roll/camera-roll";
export const RecordingButton = ({ style, camera, onMediaCaptured, enabled, setIsPressingButton }) => { export const RecordingButton = ({ style, camera, onMediaCaptured, enabled }) => {
const isRecording = useRef(false) const isRecording = useRef(false)
// UseRef won't trigger a re-render // UseRef won't trigger a re-render
const [, setRecordingState] = useState(false); const [, setRecordingState] = useState(false);
const onStoppedRecording = useCallback(() => { const onStoppedRecording = useCallback(() => {
console.log(' on stopped recording called')
isRecording.current = false isRecording.current = false
setRecordingState(false) setRecordingState(false)
console.log('stopped recording video!') console.log('stopped recording video!')
}, []) }, [])
const stopRecording = useCallback(async () => { const stopRecording = useCallback(async () => {
console.log(' stop recording called')
try { try {
if (camera.current === null) { if (camera.current === null) {
throw new Error('Camera ref is null!') // Error handling could be more graceful throw new Error('Camera ref is null!') // Error handling could be more graceful
@ -42,7 +40,6 @@ const startRecording = useCallback(() => {
onStoppedRecording() onStoppedRecording()
}, },
onRecordingFinished: async (video) => { onRecordingFinished: async (video) => {
console.log(`Recording successfully finished! ${video.path}`)
onMediaCaptured(video, 'video') onMediaCaptured(video, 'video')
const path = video.path const path = video.path
await CameraRoll.saveAsset(`file://${path}`, { await CameraRoll.saveAsset(`file://${path}`, {
@ -51,10 +48,8 @@ const startRecording = useCallback(() => {
onStoppedRecording() onStoppedRecording()
}, },
}) })
// TODO: wait until startRecording returns to actually find out if the recording has successfully started
console.log('called startRecording()!') console.log('called startRecording()!')
isRecording.current = true isRecording.current = true
console.log('after setting isRecording ref')
setRecordingState(true) setRecordingState(true)
} catch (e) { } catch (e) {
console.error('failed to start recording!', e, 'camera') console.error('failed to start recording!', e, 'camera')
@ -69,8 +64,6 @@ const handlePress = () => {
} }
}; };
// console.log('ref', isRecording.current)
return ( return (
<TouchableOpacity <TouchableOpacity
style={[styles.captureButton, style]} style={[styles.captureButton, style]}

View File

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