Expo Docs MCP Server

--- title: Camera description: A React component that renders a preview for the device's front or back camera. sourceCodeUrl: https://github.com/expo/expo/tree/main/packages/expo-camera packageName: expo-camera iconUrl: /static/images/packages/expo-camera.png platforms: ["android*", "ios*", "web"] --- import { ConfigReactNative, ConfigPluginExample, ConfigPluginProperties, } from '~/ui/components/ConfigSection'; `expo-camera` provides a React component that renders a preview of the device's front or back camera. The camera's parameters such as zoom, torch, and flash mode are adjustable. Using `CameraView`, you can take photos and record videos that are saved to the app's cache. The component is also capable of detecting bar codes appearing in the preview. Run the [example](#usage) on your device to see all these features working together. ## Installation ## Configuration in app config You can configure `expo-camera` using its built-in [config plugin](/config-plugins/introduction/) if you use config plugins in your project ([EAS Build](/build/introduction) or `npx expo run:[android|ios]`). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect. ```json app.json { "expo": { "plugins": [ [ "expo-camera", { "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera", "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone", "recordAudioAndroid": true } ] ] } } ``` If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) (you're using native **android** and **ios** projects manually), then you need to configure following permissions in your native projects: **Android** - `expo-camera` automatically adds `android.permission.CAMERA` permission to your project's **android/app/src/main/AndroidManifest.xml**. If you want to record videos with audio, include `RECORD_AUDIO` permission: ```xml <!-- Added permission --> <uses-permission android:name="android.permission.CAMERA" /> <!-- Only add when recording videos with audio --> <uses-permission android:name="android.permission.RECORD_AUDIO" /> ``` - Then, adjust the **android/build.gradle** file to add new maven block after all other repositories as show below: ```groovy allprojects { repositories { // * Your other repositories here * // * Add a new maven block after other repositories / blocks * maven { // expo-camera bundles a custom com.google.android:cameraview url "$rootDir/../node_modules/expo-camera/android/maven" } } } ``` **iOS** - Add `NSCameraUsageDescription` and `NSMicrophoneUsageDescription` keys to your project's **ios/[app]/Info.plist**: ```xml <key>NSCameraUsageDescription</key> <string>Allow $(PRODUCT_NAME) to access your camera</string> <key>NSMicrophoneUsageDescription</key> <string>Allow $(PRODUCT_NAME) to access your microphone</string> ``` ## Usage > **warning** Only one Camera preview can be active at any given time. If you have multiple screens in your app, you should unmount `Camera` components whenever a screen is unfocused. ```tsx const [facing, setFacing] = useState<CameraType>('back'); const [permission, requestPermission] = useCameraPermissions(); if (!permission) { // Camera permissions are still loading. return ; } if (!permission.granted) { // Camera permissions are not granted yet. return ( <View style={styles.container}> <Text style={styles.message}>We need your permission to show the camera</Text> </View> ); } function toggleCameraFacing() { setFacing(current => (current === 'back' ? 'front' : 'back')); } return ( <View style={styles.container}> <CameraView style={styles.camera} facing={facing}> <View style={styles.buttonContainer}> <TouchableOpacity style={styles.button} onPress={toggleCameraFacing}> <Text style={styles.text}>Flip Camera</Text> </TouchableOpacity> </View> </CameraView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, message: { textAlign: 'center', paddingBottom: 10, }, camera: { flex: 1, }, buttonContainer: { flex: 1, flexDirection: 'row', backgroundColor: 'transparent', margin: 64, }, button: { flex: 1, alignSelf: 'flex-end', alignItems: 'center', }, text: { fontSize: 24, fontWeight: 'bold', color: 'white', }, }); ``` ### Advanced usage ## Web support Most browsers support a version of web camera functionality, you can check out the [web camera browser support here](https://caniuse.com/#feat=stream). Image URIs are always returned as base64 strings because local file system paths are unavailable in the browser. ### Chrome `iframe` usage When using **Chrome versions 64+**, if you try to use a web camera in a cross-origin iframe nothing will render. To add support for cameras in your iframe simply add the attribute `allow="microphone; camera;"` to the iframe element: ```html <iframe src="..." allow="microphone; camera;"> <!-- --> </iframe> ``` ## API ```js ``` ## Permissions ### Android This package automatically adds the `CAMERA` permission to your app. If you want to record videos with audio, you have to include the `RECORD_AUDIO` in your **app.json** inside the [`expo.android.permissions`](../config/app/#permissions) array. ### iOS The following usage description keys are used by this library: