add logs, try removing props from Camera component

This commit is contained in:
Loewy 2024-01-30 12:55:52 -08:00
parent feafd48443
commit cd3329baae
4 changed files with 24 additions and 6 deletions

View File

@ -36,10 +36,10 @@ export default function CameraScreen(): React.ReactElement {
} }
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,9 +52,10 @@ 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}
video={true} video={true}
photo={false}
// orientation='portrait' // TODO: figure out what this looks like to the native module // orientation='portrait' // TODO: figure out what this looks like to the native module
isActive={true} isActive={true}
/> />

View File

@ -1,5 +1,7 @@
import React, { useCallback, useRef, useState } from 'react'; import React, { useCallback, useRef, useState } from 'react';
import { TouchableOpacity, StyleSheet, View } from 'react-native'; import { TouchableOpacity, StyleSheet, View } from 'react-native';
import { CameraRoll } from "@react-native-camera-roll/camera-roll";
export const RecordingButton = ({ style, camera, onMediaCaptured, enabled, setIsPressingButton }) => { export const RecordingButton = ({ style, camera, onMediaCaptured, enabled, setIsPressingButton }) => {
@ -8,12 +10,14 @@ export const RecordingButton = ({ style, camera, onMediaCaptured, enabled, setIs
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
@ -37,15 +41,20 @@ const startRecording = useCallback(() => {
console.error('Recording failed!', error) console.error('Recording failed!', error)
onStoppedRecording() onStoppedRecording()
}, },
onRecordingFinished: (video) => { onRecordingFinished: async (video) => {
console.log(`Recording successfully finished! ${video.path}`) console.log(`Recording successfully finished! ${video.path}`)
onMediaCaptured(video, 'video') onMediaCaptured(video, 'video')
const path = video.path
await CameraRoll.saveAsset(`file://${path}`, {
type: 'video',
})
onStoppedRecording() onStoppedRecording()
}, },
}) })
// TODO: wait until startRecording returns to actually find out if the recording has successfully started // 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')
@ -60,6 +69,8 @@ const handlePress = () => {
} }
}; };
// console.log('ref', isRecording.current)
return ( return (
<TouchableOpacity <TouchableOpacity
style={[styles.captureButton, style]} style={[styles.captureButton, style]}

View File

@ -21,6 +21,7 @@
}, },
"dependencies": { "dependencies": {
"@apollo/client": "^3.8.8", "@apollo/client": "^3.8.8",
"@react-native-camera-roll/camera-roll": "^7.4.0",
"@react-native-firebase/app": "^18.8.0", "@react-native-firebase/app": "^18.8.0",
"@react-native-firebase/auth": "^18.8.0", "@react-native-firebase/auth": "^18.8.0",
"@types/react": "~18.2.14", "@types/react": "~18.2.14",

View File

@ -1991,6 +1991,11 @@
resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33" resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg== integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
"@react-native-camera-roll/camera-roll@^7.4.0":
version "7.4.0"
resolved "https://registry.yarnpkg.com/@react-native-camera-roll/camera-roll/-/camera-roll-7.4.0.tgz#931e25b076b40dc57ca6d380f0a85d494a120f06"
integrity sha512-y0bVpMJLaFphYvMMx1BsqgMA0kXq9CKxKYNnt4ocUvwJj5Rp4TZ233rzJoDqz1oxd56Tz5f1g+yhYN5RImKl8Q==
"@react-native-community/cli-clean@11.3.7": "@react-native-community/cli-clean@11.3.7":
version "11.3.7" version "11.3.7"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-11.3.7.tgz#cb4c2f225f78593412c2d191b55b8570f409a48f" resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-11.3.7.tgz#cb4c2f225f78593412c2d191b55b8570f409a48f"