|
import React, { useState, useRef } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';
import { Video } from 'expo-av';
export default function App() {
const [hasPermission, setHasPermission] = useState(null);
const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);
const [isRecording, setIsRecording] = useState(false);
const cameraRef = useRef(null);
const videoRef = useRef(null);
const startRecord = async () => {
if (cameraRef.current) {
try {
const { uri } = await cameraRef.current.recordAsync();
console.log('Recording started:', uri);
setIsRecording(true);
} catch (error) {
console.error('Error starting recording:', error);
}
}
};
const stopRecord = async () => {
if (cameraRef.current) {
try {
const { uri } = await cameraRef.current.stopRecording();
console.log('Recording stopped:', uri);
setIsRecording(false);
} catch (error) {
console.error('Error stopping recording:', error);
}
}
};
const takePicture = async () => {
if (cameraRef.current) {
try {
const { uri } = await cameraRef.current.takePictureAsync();
console.log('Picture taken:', uri);
} catch (error) {
console.error('Error taking picture:', error);
}
}
};
const switchCamera = () => {
setCameraType(
cameraType === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
};
const onCameraPermission = async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === 'granted');
};
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={styles.container}>
<Camera
style={styles.camera}
type={cameraType}
ref={cameraRef}
onCameraReady={() => console.log('Camera ready')}
>
<View style={styles.controls}>
<TouchableOpacity
style={styles.button}
onPress={isRecording ? stopRecord : startRecord}
>
<Text style={styles.text}>{isRecording ? 'Stop' : 'Record'}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={takePicture}>
<Text style={styles.text}>Take Picture</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={switchCamera}>
<Text style={styles.text}>Switch Camera</Text>
</TouchableOpacity>
</View>
</Camera>
{isRecording && (
<Video
ref={videoRef}
style={styles.videoPreview}
source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
useNativeControls
/>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
camera: {
flex: 1,
},
controls: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'flex-end',
marginBottom: 20,
},
button: {
backgroundColor: 'white',
borderRadius: 5,
padding: 15,
marginHorizontal: 10,
},
text: {
fontSize: 16,
},
videoPreview: {
flex: 1,
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
|
NEW ENTRIES