Camera

expo-camera provides a React component that renders a preview for the device's front or back camera. The camera's parameters like zoom, auto focus, white balance and flash mode are adjustable. With the use of Camera, one can also take photos and record videos that are then saved to the app's cache. Morever, the component is also capable of detecting faces and bar codes appearing in the preview. Run the example on your device to see all these features working together!

Platform Compatibility

Android Device	Android Emulator	iOS Device	iOS Simulator	Web

💡
Android devices can use one of two available Camera APIs: you can opt-in to using Camera2 with the useCamera2Api prop.

Installation

Terminal

→ expo install expo-camera

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Usage

⚠️
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.

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Camera, CameraType } from 'expo-camera';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(CameraType.back);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      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={type}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              setType(type === CameraType.back ? CameraType.front : CameraType.back);
            }}>
            <Text style={styles.text}> Flip </Text>
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
  );
}

%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  camera: {
    flex: 1,
  },
  buttonContainer: {
    flex: 1,
    backgroundColor: 'transparent',
    flexDirection: 'row',
    margin: 20,
  },
  button: {
    flex: 0.1,
    alignSelf: 'flex-end',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    color: 'white',
  },
});

Web Support

Luckily most browsers support at least some form of web camera functionality, you can check out the web camera browser support here. Image URIs are always returned as base64 strings because local file system paths are not available 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:

<iframe src="..." allow="microphone; camera;">
  <!-- <Camera /> -->
</iframe>

API

import { Camera } from 'expo-camera';

Components

`Camera`

Type: Component<CameraProps>

`CameraProps`

autoFocus
Optional • Type: boolean | number | AutoFocus • Default: AutoFocus.on
State of camera auto focus. Use one of AutoFocus.<value>. When AutoFocus.on, auto focus will be enabled, when AutoFocus.off, it won't and focus will lock as it was in the moment of change, but it can be adjusted on some devices via focusDepth prop.

barCodeScannerSettings

Optional • Type: object

Settings exposed by BarCodeScanner module. Supported settings: barCodeTypes.

Example

<Camera
  barCodeScannerSettings={{
    barCodeTypes: [BarCodeScanner.Constants.BarCodeType.qr],
  }}
/>

faceDetectorSettings
Optional • Type: object
A settings object passed directly to an underlying module providing face detection features. See DetectionOptions in FaceDetector documentation for details.
flashMode
Optional • Type: number | FlashMode • Default: FlashMode.off
Camera flash mode. Use one of FlashMode.<value>. When FlashMode.on, the flash on your device will turn on when taking a picture, when FlashMode.off, it won't. Setting to FlashMode.auto will fire flash if required, FlashMode.torch turns on flash during the preview.
focusDepth
Optional • Type: number • Default: 0
Distance to plane of the sharpest focus. A value between 0 and 1 where: 0 - infinity focus, 1 - focus as close as possible. For Android this is available only for some devices and when useCamera2Api is set to true.
pictureSize
Optional • Type: string
A string representing the size of pictures takePictureAsync will take. Available sizes can be fetched with getAvailablePictureSizesAsync.
poster
Optional • Type: string
Web Only

A URL for an image to be shown while the camera is loading.
ratio
Optional • Type: string • Default: 4:3.
Android Only

A string representing aspect ratio of the preview, eg. 4:3, 16:9, 1:1. To check if a ratio is supported by the device use getSupportedRatiosAsync.
type
Optional • Type: number | CameraType • Default: CameraType.back
Camera facing. Use one of CameraType. When CameraType.front, use the front-facing camera. When CameraType.back, use the back-facing camera.
useCamera2Api
Optional • Type: boolean
Android Only

Whether to use Android's Camera2 API. See Note at the top of this page.
videoStabilizationMode
Optional • Type: number
iOS Only

The video stabilization mode used for a video recording. Use one of VideoStabilization.<value>. You can read more about each stabilization type in Apple Documentation.
whiteBalance
Optional • Type: number | WhiteBalance • Default: WhiteBalance.auto
Camera white balance. Use one of WhiteBalance.<value>. If a device does not support any of these values previous one is used.
zoom
Optional • Type: number • Default: 0
A value between 0 and 1 being a percentage of device's max zoom. 0 - not zoomed, 1 - maximum zoom.
onBarCodeScanned
Optional • Type: (scanningResult: BarCodeScanningResult) => void
Callback that is invoked when a bar code has been successfully scanned. The callback is provided with an object of the BarCodeScanningResult shape, where the type refers to the bar code type that was scanned and the data is the information encoded in the bar code (in this case of QR codes, this is often a URL). See BarCodeScanner.Constants.BarCodeType for supported values.
onCameraReady
Optional • Type: () => void
Callback invoked when camera preview has been set.
onFacesDetected
Optional • Type: (faces: FaceDetectionResult) => void
Callback invoked with results of face detection on the preview. See FaceDetector documentation for details.
onMountError
Optional • Type: (event: CameraMountError) => void
Callback invoked when camera preview could not been started.

Inherited Props

ViewProps

Static Methods

`getAvailableCameraTypesAsync()`

Web Only

Returns a list of camera types ['front', 'back']. This is useful for desktop browsers which only have front-facing cameras.

Name	Type	Description
cornerPoints (optional)	`BarCodePoint[]`	Corner points of the bounding box.
data	`string`	The information encoded in the bar code.
type	`string`	The barcode type.

Name	Type	Description
base64 (optional)	`string`	-
exif (optional)	`Partial<MediaTrackSettings> \| any`	-
height	`number`	-
uri	`string`	-
width	`number`	-

Name	Type	Description
base64 (optional)	`boolean`	Whether to also include the image data in Base64 format.
exif (optional)	`boolean`	Whether to also include the EXIF data for the image.
imageType (optional)	`ImageType`	-
isImageMirror (optional)	`boolean`	-
quality (optional)	`number`	Specify the quality of compression, from 0 to 1. 0 means compress for small size, 1 means compress for maximum quality.
scale (optional)	`number`	-
skipProcessing (optional)	`boolean`	If set to `true`, camera skips orientation adjustment and returns an image straight from the device's camera. If enabled, `quality` option is discarded (processing pipeline is skipped as a whole). Although enabling this option reduces image delivery time significantly, it may cause the image to appear in a wrong orientation in the `Image` component (at the time of writing, it does not respect EXIF orientation of the images). Note: Enabling `skipProcessing` would cause orientation uncertainty. `Image` component does not respect EXIF stored orientation information, that means obtained image would be displayed wrongly (rotated by 90°, 180° or 270°). Different devices provide different orientations. For example some Sony Xperia or Samsung devices don't provide correctly oriented images by default. To always obtain correctly oriented image disable `skipProcessing` option.
onPictureSaved (optional)	`(picture) => void`	A callback invoked when picture is saved. If set, the promise of this method will resolve immediately with no data after picture is captured. The data that it should contain will be passed to this callback. If displaying or processing a captured photo right after taking it is not your case, this callback lets you skip waiting for it to be saved.

Name	Type	Description
codec (optional)	`VideoCodec`	iOS Only This option specifies what codec to use when recording the video. See `VideoCodec` for the possible values.
maxDuration (optional)	`number`	Maximum video duration in seconds.
maxFileSize (optional)	`number`	Maximum video file size in bytes.
mirror (optional)	`boolean`	iOS Only If `true`, the recorded video will be flipped along the vertical axis. iOS flips videos recorded with the front camera by default, but you can reverse that back by setting this to `true`. On Android, this is handled in the user's device settings.
mute (optional)	`boolean`	If present, video will be recorded with no sound.
quality (optional)	`number \| string`	Specify the quality of recorded video. Use on of `VideoQuality.<value>`. Possible values: for 16:9 resolution `2160p`, `1080p`, `720p`, `480p` : `Android only` and for 4:3 `4:3` (the size is 640x480). If the chosen quality is not available for a device, the highest available is chosen.
videoBitrate (optional)	`number`	Android Only Only works if `useCamera2Api` is set to `true`. This option specifies a desired video bitrate. For example, `510001000` would be 5Mbps.

Name	Type	Description
AutoFocus	`AutoFocus`	-
FlashMode	`FlashMode`	-
Type	`CameraType`	-
VideoCodec	`VideoCodec`	-
VideoQuality	`VideoQuality`	-
VideoStabilization	`VideoStabilization`	-
WhiteBalance	`WhiteBalance`	-

Name	Type	Description
canAskAgain	`boolean`	-
expires	`PermissionExpiration`	-
granted	`boolean`	-
status	`PermissionStatus`	-

Camera

Platform Compatibility

Example

Arguments

Arguments

Arguments