Pada artikel ini, kita akan membahas bagaimana cara membuat fitur capture kamera menggunakan react-native-vision-camera dalam aplikasi React Native. react-native-vision-camera adalah library yang sangat powerful dan fleksibel untuk mengakses fitur kamera perangkat dalam aplikasi React Native. Dengan library ini, Anda dapat mengambil foto, merekam video, barcode camera, mengatur kualitas gambar, dan banyak lagi.
Persiapan
Sebelum memulai, pastikan Anda sudah mengatur proyek React Native Anda. Jika sudah, maka jalankan perintah berikut dengan perintah:
yarn add react-native-vision-cameraMembuat Capture Camera
Setelah persiapan selesai, kita dapat mulai membuat fitur capture camera. Di sini, kita akan membuat komponen CameraComponent yang akan berisi tampilan kamera dan tombol untuk mengambil foto.
/* eslint-disable react-native/no-inline-styles */
import {Box, View, Button, Center, Heading, VStack} from '@gluestack-ui/themed';
import {Text} from 'moti';
import React, {useRef, useState} from 'react';
import {Dimensions, Image, TouchableOpacity} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {
Camera,
useCameraDevice,
useCameraFormat,
} from 'react-native-vision-camera';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
var deviceHeight = Dimensions.get('window').height;
var deviceWidth = Dimensions.get('window').width;
const CameraComponent: React.FC = () => {
const camera = useRef<Camera | null>(null);
const [cameraActive, setCameraActive] = useState(false);
const [capturedImage, setCapturedImage] = useState<string | null>(null);
const Mydevice = useCameraDevice('back', {
physicalDevices: [
'ultra-wide-angle-camera',
'wide-angle-camera',
'telephoto-camera',
],
});
const format = useCameraFormat(Mydevice, [
{videoResolution: {width: 1080, height: 720}},
{fps: 30},
]);
const openCamera = () => {
setCameraActive(!cameraActive);
};
const handleCapturePhoto = async () => {
if (!camera || !camera.current) {
console.error('Camera is not available.');
return;
}
try {
const photo = await camera.current.takePhoto({
qualityPrioritization: 'speed',
flash: 'on',
enableShutterSound: false,
});
console.log(JSON.stringify(photo));
setCapturedImage(`file://${photo.path}`);
setCameraActive(false);
} catch (error) {
console.error('Error capturing photo:', error);
}
};
if (!Mydevice) {
return (
<View>
<Text>NO CAMERA</Text>
</View>
);
}
return (
<SafeAreaView>
<View>
<VStack h={'100%'} justifyContent="space-between">
<Center bg="black">
{cameraActive ? (
<Box>
<Camera
ref={camera}
style={{flex: 1}}
device={Mydevice}
isActive={true}
format={format}
photo={true}
/>
</Box>
) : (
<Box h={deviceHeight / 3} w={deviceWidth / 1}>
{capturedImage ? (
<View
bg="black"
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Center>
<Image
source={{uri: capturedImage}}
style={{width: deviceWidth, height: deviceHeight / 3}}
/>
</Center>
</View>
) : (
<View
bg="black"
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Center>
<Heading color="white">No Photos</Heading>
</Center>
</View>
)}
</Box>
)}
<Center pb={15} pt={20}>
{/* <Text>{cameraActive ? 'Take Photo' : 'Open Camera'}</Text> */}
<TouchableOpacity
style={{
backgroundColor: 'red',
height: 50,
width: 70,
borderRadius: 100,
}}
onPress={cameraActive ? handleCapturePhoto : openCamera}>
<Center pt={10}>
<MaterialCommunityIcons
name={cameraActive ? 'camera-iris' : 'camera'}
color={'white'}
size={28}
/>
</Center>
</TouchableOpacity>
</Center>
</Center>
</VStack>
</View>
</SafeAreaView>
);
};
export default CameraComponent;Jalankan Aplikasi dengan npx react-native run android
