tested on emulator, works on some physical devices, will record + save to local camera roll & produce logs
This commit is contained in:
parent
cd3329baae
commit
f9111ffe5e
@ -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
|
||||||
},
|
},
|
||||||
})
|
})
|
@ -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]}
|
||||||
|
16
component/video/is-foreground.tsx
Normal file
16
component/video/is-foreground.tsx
Normal 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
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user