working on emulator but crashing on physical device after calling startRecording
This commit is contained in:
Loewy
parent
eb152bc6c7
commit
feafd48443
3
App.tsx
3
App.tsx
@ -1,7 +1,4 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Text } from "react-native";
|
|
||||||
import ClientProvider from "./graphql/client";
|
|
||||||
import ShotsContainer from "./component/shot";
|
|
||||||
import CameraScreen from "./component/video/camera";
|
import CameraScreen from "./component/video/camera";
|
||||||
|
|
||||||
const App: React.FC = () => {
|
const App: React.FC = () => {
|
||||||
|
|||||||
@ -10,6 +10,7 @@ module.exports = function(api) {
|
|||||||
"allowUndefined": true,
|
"allowUndefined": true,
|
||||||
"verbose": false,
|
"verbose": false,
|
||||||
}],
|
}],
|
||||||
|
'react-native-reanimated/plugin',
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@ -2,12 +2,20 @@ 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 } from 'react-native-vision-camera'
|
||||||
import { RecordingButton } from './capture-button'
|
import { RecordingButton } from './capture-button'
|
||||||
|
import { useSharedValue } from 'react-native-reanimated'
|
||||||
|
|
||||||
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, setIsPressingButton] = useState(false)
|
const isPressingButton = useSharedValue(false)
|
||||||
|
|
||||||
|
const setIsPressingButton = useCallback(
|
||||||
|
(_isPressingButton: boolean) => {
|
||||||
|
isPressingButton.value = _isPressingButton
|
||||||
|
},
|
||||||
|
[isPressingButton],
|
||||||
|
)
|
||||||
|
|
||||||
const onInitialized = useCallback(() => {
|
const onInitialized = useCallback(() => {
|
||||||
console.log('Camera initialized!')
|
console.log('Camera initialized!')
|
||||||
@ -47,6 +55,7 @@ export default function CameraScreen(): React.ReactElement {
|
|||||||
format={format}
|
format={format}
|
||||||
onInitialized={onInitialized}
|
onInitialized={onInitialized}
|
||||||
video={true}
|
video={true}
|
||||||
|
// orientation='portrait' // TODO: figure out what this looks like to the native module
|
||||||
isActive={true}
|
isActive={true}
|
||||||
/>
|
/>
|
||||||
<RecordingButton
|
<RecordingButton
|
||||||
|
|||||||
@ -1,45 +1,99 @@
|
|||||||
import React from 'react';
|
import React, { useCallback, useRef, useState } from 'react';
|
||||||
import { TouchableOpacity, StyleSheet } from 'react-native';
|
import { TouchableOpacity, StyleSheet, View } from 'react-native';
|
||||||
|
|
||||||
export const RecordingButton = ({ style, camera, onMediaCaptured, enabled, setIsPressingButton }) => {
|
export const RecordingButton = ({ style, camera, onMediaCaptured, enabled, setIsPressingButton }) => {
|
||||||
|
|
||||||
const handlePressIn = () => {
|
const isRecording = useRef(false)
|
||||||
setIsPressingButton(true);
|
// UseRef won't trigger a re-render
|
||||||
// Additional functionality when the button is pressed
|
const [, setRecordingState] = useState(false);
|
||||||
console.log('pressed in')
|
|
||||||
|
const onStoppedRecording = useCallback(() => {
|
||||||
|
isRecording.current = false
|
||||||
|
setRecordingState(false)
|
||||||
|
console.log('stopped recording video!')
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const stopRecording = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
if (camera.current === null) {
|
||||||
|
throw new Error('Camera ref is null!') // Error handling could be more graceful
|
||||||
|
}
|
||||||
|
console.log('calling stopRecording()...')
|
||||||
|
await camera.current.stopRecording()
|
||||||
|
console.log('called stopRecording()!')
|
||||||
|
} catch (e) {
|
||||||
|
console.error('failed to stop recording!', e)
|
||||||
|
}
|
||||||
|
}, [camera])
|
||||||
|
|
||||||
|
const startRecording = useCallback(() => {
|
||||||
|
try {
|
||||||
|
if (camera.current === null) {
|
||||||
|
throw new Error('Camera ref is null!') // Error handling could be more graceful
|
||||||
|
}
|
||||||
|
console.log('calling startRecording()...')
|
||||||
|
camera.current.startRecording({
|
||||||
|
onRecordingError: (error) => {
|
||||||
|
console.error('Recording failed!', error)
|
||||||
|
onStoppedRecording()
|
||||||
|
},
|
||||||
|
onRecordingFinished: (video) => {
|
||||||
|
console.log(`Recording successfully finished! ${video.path}`)
|
||||||
|
onMediaCaptured(video, 'video')
|
||||||
|
onStoppedRecording()
|
||||||
|
},
|
||||||
|
})
|
||||||
|
// TODO: wait until startRecording returns to actually find out if the recording has successfully started
|
||||||
|
console.log('called startRecording()!')
|
||||||
|
isRecording.current = true
|
||||||
|
setRecordingState(true)
|
||||||
|
} catch (e) {
|
||||||
|
console.error('failed to start recording!', e, 'camera')
|
||||||
|
}
|
||||||
|
}, [camera, onMediaCaptured, onStoppedRecording])
|
||||||
|
|
||||||
|
const handlePress = () => {
|
||||||
|
if (isRecording.current) {
|
||||||
|
stopRecording();
|
||||||
|
} else {
|
||||||
|
startRecording();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlePressOut = () => {
|
return (
|
||||||
setIsPressingButton(false);
|
<TouchableOpacity
|
||||||
// Stop recording and handle media capture
|
style={[styles.captureButton, style]}
|
||||||
if (camera && enabled) {
|
onPress={handlePress}
|
||||||
// Assuming you have a method in your camera object to capture media
|
disabled={!enabled}
|
||||||
const media = camera.captureMedia();
|
>
|
||||||
if (onMediaCaptured) {
|
<View style={isRecording.current ? styles.recordingSquare : styles.innerCircle} />
|
||||||
onMediaCaptured(media);
|
</TouchableOpacity>
|
||||||
}
|
);
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[styles.captureButton, style]}
|
|
||||||
onPressIn={handlePressIn}
|
|
||||||
onPressOut={handlePressOut}
|
|
||||||
disabled={!enabled}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
captureButton: {
|
captureButton: {
|
||||||
height: 70,
|
height: 80,
|
||||||
width: 70,
|
width: 80,
|
||||||
borderRadius: 35,
|
borderRadius: 40,
|
||||||
backgroundColor: '#FF3B30',
|
borderWidth: 3,
|
||||||
justifyContent: 'center',
|
borderColor: 'white',
|
||||||
alignItems: 'center',
|
backgroundColor: 'transparent',
|
||||||
},
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
innerCircle: {
|
||||||
|
height: 70,
|
||||||
|
width: 70,
|
||||||
|
borderRadius: 35,
|
||||||
|
backgroundColor: '#FF3B30',
|
||||||
|
},
|
||||||
|
recordingSquare: {
|
||||||
|
height: 40,
|
||||||
|
width: 40,
|
||||||
|
borderRadius: 10,
|
||||||
|
backgroundColor: '#FF3B30',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export default RecordingButton;
|
export default RecordingButton;
|
||||||
120
package.json
120
package.json
@ -1,61 +1,63 @@
|
|||||||
{
|
{
|
||||||
"name": "railbird-rn",
|
"name": "railbird-rn",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"main": "node_modules/expo/AppEntry.js",
|
"main": "node_modules/expo/AppEntry.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "cp .env.development .env && expo start",
|
"start": "cp .env.development .env && expo start",
|
||||||
"android": "expo start --android",
|
"android": "expo start --android",
|
||||||
"ios": "expo start --ios",
|
"ios": "expo start --ios",
|
||||||
"run:android": "expo run:android",
|
"run:android": "expo run:android",
|
||||||
"run:ios": "expo run:ios",
|
"run:ios": "expo run:ios",
|
||||||
"web": "expo start --web",
|
"web": "expo start --web",
|
||||||
"lint": "eslint . --ext .js,.ts,.tsx",
|
"lint": "eslint . --ext .js,.ts,.tsx",
|
||||||
"lint:fix": "eslint . --ext .ts,.tsx --fix",
|
"lint:fix": "eslint . --ext .ts,.tsx --fix",
|
||||||
"test": "jest --forceExit"
|
"test": "jest --forceExit"
|
||||||
},
|
},
|
||||||
"jest": {
|
"jest": {
|
||||||
"preset": "jest-expo",
|
"preset": "jest-expo",
|
||||||
"transformIgnorePatterns": [
|
"transformIgnorePatterns": [
|
||||||
"node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|react-native-svg-charts|d3-path)/)"
|
"node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|react-native-svg-charts|d3-path)/)"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@apollo/client": "^3.8.8",
|
"@apollo/client": "^3.8.8",
|
||||||
"@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",
|
||||||
"@typescript-eslint/eslint-plugin": "^6.17.0",
|
"@typescript-eslint/eslint-plugin": "^6.17.0",
|
||||||
"@typescript-eslint/parser": "^6.17.0",
|
"@typescript-eslint/parser": "^6.17.0",
|
||||||
"babel-plugin-inline-dotenv": "^1.7.0",
|
"babel-plugin-inline-dotenv": "^1.7.0",
|
||||||
"d3-path": "^3.1.0",
|
"d3-path": "^3.1.0",
|
||||||
"d3-scale": "^1.0.6",
|
"d3-scale": "^1.0.6",
|
||||||
"eslint": "^8.56.0",
|
"eslint": "^8.56.0",
|
||||||
"eslint-plugin-react": "^7.33.2",
|
"eslint-plugin-react": "^7.33.2",
|
||||||
"eslint-plugin-react-hooks": "^4.6.0",
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
"eslint-plugin-react-native": "^4.1.0",
|
"eslint-plugin-react-native": "^4.1.0",
|
||||||
"expo": "~49.0.15",
|
"expo": "~49.0.15",
|
||||||
"expo-build-properties": "^0.11.0",
|
"expo-build-properties": "^0.11.0",
|
||||||
"expo-splash-screen": "~0.20.5",
|
"expo-splash-screen": "~0.20.5",
|
||||||
"expo-status-bar": "~1.6.0",
|
"expo-status-bar": "~1.6.0",
|
||||||
"graphql": "^16.8.1",
|
"graphql": "^16.8.1",
|
||||||
"jest": "^29.2.1",
|
"jest": "^29.2.1",
|
||||||
"jest-expo": "~49.0.0",
|
"jest-expo": "~49.0.0",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-native": "0.72.6",
|
"react-native": "0.72.6",
|
||||||
"react-native-dotenv": "^3.4.9",
|
"react-native-dotenv": "^3.4.9",
|
||||||
"react-native-svg": "13.9.0",
|
"react-native-reanimated": "^3.6.2",
|
||||||
"react-native-svg-charts": "^5.4.0",
|
"react-native-static-safe-area-insets": "^2.2.0",
|
||||||
"typescript": "^5.3.3"
|
"react-native-svg": "13.9.0",
|
||||||
},
|
"react-native-svg-charts": "^5.4.0",
|
||||||
"devDependencies": {
|
"react-native-vision-camera": "^3.8.2",
|
||||||
"@babel/core": "^7.20.0",
|
"typescript": "^5.3.3"
|
||||||
"@testing-library/jest-native": "^5.4.3",
|
},
|
||||||
"@testing-library/react-native": "^12.4.3",
|
"devDependencies": {
|
||||||
"@types/d3-path": "^3.0.2",
|
"@babel/core": "^7.20.0",
|
||||||
"@types/jest": "^29.5.11",
|
"@testing-library/jest-native": "^5.4.3",
|
||||||
"@types/react-native-svg-charts": "^5.0.16",
|
"@testing-library/react-native": "^12.4.3",
|
||||||
"eslint-config-prettier": "^9.1.0"
|
"@types/d3-path": "^3.0.2",
|
||||||
},
|
"@types/jest": "^29.5.11",
|
||||||
"private": true
|
"@types/react-native-svg-charts": "^5.0.16",
|
||||||
|
"eslint-config-prettier": "^9.1.0"
|
||||||
|
},
|
||||||
|
"private": true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user