작성완료

앱에서 카메라 사용

React Native에서 카메라를 사용하기 위한 설치 및 설정 방법을 설명합니다. iOS에서는 Info.plist에 카메라 및 마이크 권한을 추가하고, Android에서는 AndroidManifest.xml에 필요한 권한을 설정해야 합니다. 또한, 카메라와 마이크 권한 요청 방법과 기본 사용 예시를 제공합니다.

React Nativereact-native-vision-camera

설치

yarn add react-native-vision-camera

cd ios && pod install && cd ..

설정

iOS (Info.plist)

xml
  <dict>
    ...
	<key>NSCameraUsageDescription</key>
	<string>$(PRODUCT_NAME) 카메라 권한이 필요합니다.</string>
	<key>NSMicrophoneUsageDescription</key>
	<string>$(PRODUCT_NAME) 마이크 권한이 필요합니다.</string>
    ...
  </dict>

Android (AndroidManifest.xml)

xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />

    ...

    <application>
        ...
    </application>
</manifest>

권한 요청

// 카메라 권한 요청const { hasPermission, requestPermission } = useCameraPermission();
// 마이크 권한 요청const { hasPermission, requestPermission } = useMicrophonePermission();

사용

typescript
export default function App() {
  const device = useCameraDevice('back')
  const { hasPermission } = useCameraPermission()

  if (!hasPermission) return <PermissionsPage />;
  if (device == null) return <NoCameraDeviceError />;

  return (
    <Camera device={device} isActive={true} />
  )
}