react-native-vision-camera
react-native-vision-camera
🔥 1. 개발 셋팅
yarn add react-native-vision-camera
cd ios && pod install && cd ..
🔥 2. 권한 설정
(1) : IOS
//Info.plist
<!-- 카메라 권한 -->
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>
<!-- 마이크 권한 -->
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Microphone.</string>
(2) : AOS
//AndroidManifest.xml
<!-- 카메라 권한 -->
<uses-permission android:name="android.permission.CAMERA" />
<!-- 마이크 권한 -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
(3) : 권한 가져오기 / 권한 요청 하기
(1) : 권한 가져오기 : 사용자가 권한을 부여했는지 체크
const cameraPermission = await Camera.getCameraPermissionStatus();
const microphonePermission = await Camera.getMicrophonePermissionStatus();
(2) : 권한 요청하기 : 사용자에게 권한을 요청
const newCameraPermission = await Camera.requestCameraPermission();
const newMicrophonePermission = await Camera.requestMicrophonePermission();
🔥 3. 예시
(1) : 권한 확인 / 요청
useEffect(() => {
const checkPermission = async () => {
// 카메라 권한 확인
const cameraPermission = await Camera.getCameraPermissionStatus();
switch (cameraPermission) {
case "authorized":
// 카메라 권한이 있을때 실행할 로직
break;
case "not-determined":
// 아직 권한 요청을 하지 않은 상태로 새롭게 권한 요청하기
const newCameraPermission = await Camera.requestCameraPermission();
if (newCameraPermission === "authorized") {
// 카메라 권한이 있을때 실행할 로직
} else if (newCameraPermission === "denied") {
// 권한 요청을 했지만 거부됐을때 실행할 로직
// ex) 설정으로 이동, 권한이 없으면 카메라 실행할 수 없다는 알림창 등등
await Linking.openSettings();
}
break;
case "denied":
// 권한 요청을 했지만 거부됐을때 실행할 로직
// ex) 설정으로 이동, 권한이 없으면 카메라 실행할 수 없다는 알림창 등등
await Linking.openSettings();
break;
}
};
checkPermission();
}, []);
(2) : Camera 태그 및 props
function App() {
const devices = useCameraDevices();
const device = devices.back;
if (device == null) return <LoadingView />;
return (
<Camera
style={StyleSheet.absoluteFill}
device={device}
photo={true}
video={false}
audio={false} // 선택사항
isActive={true}
/>
);
}
**style
: 내가 원하는 카메라의 스타일을 지정.StyleSheet.absoluteFill
을 사용했을때는 화면 전체가 카메라로 꽉 차게됌****useCameraDevices()
: 현재 사용하고 있는 기기의 카메라 정보. 객체로 이루어져있으며 보통 앞, 뒷면(front, back) 카메라의 정보가 담겨 있음.****deviceuseCameraDevices()
: 현재 사용하고 있는 기기의 카메라들의 정보. 객체로 이루어져있으며 보통 앞, 뒷면(front, back) 카메라의 정보, back에서 back자리를 state로 관리해, 카메라 전환버튼을 눌렀을때 front와 back으로 변경되는 형식으로 어떤 카메라를 사용할지 선택할 수 있음****photo
: 사진 촬영할 때 true로 설정되어야 촬영이 가능****video
,audio
: 영상 촬영과 마이크를 사용할 때 true로 설정되어야 촬영이 가능****isActive
: true일 때 카메라를 사용할 수 있음.**