Expo

Get Started
API Reference

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 DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb
💡
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.

In managed apps, Camera requires Permissions.CAMERA. Video recording requires Permissions.AUDIO_RECORDING.

⚠️
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',
  },
});

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.

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>

import { Camera } from 'expo-camera';

Type: Component<CameraProps>


  • 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.


  • Optional • Type: object

    Settings exposed by BarCodeScanner module. Supported settings: barCodeTypes.

    Example

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

  • Optional • Type: object

    A settings object passed directly to an underlying module providing face detection features. See DetectionOptions in FaceDetector documentation for details.


  • 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.


  • 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.


  • Optional • Type: string

    A string representing the size of pictures takePictureAsync will take. Available sizes can be fetched with getAvailablePictureSizesAsync.


  • Optional • Type: string

    Web Only

    A URL for an image to be shown while the camera is loading.


  • 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.


  • 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.


  • Optional • Type: boolean

    Android Only

    Whether to use Android's Camera2 API. See Note at the top of this page.


  • 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.


  • 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.


  • 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.


  • 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.


  • Optional • Type: () => void

    Callback invoked when camera preview has been set.


  • Optional • Type: (faces: FaceDetectionResult) => void

    Callback invoked with results of face detection on the preview. See FaceDetector documentation for details.


  • Optional • Type: (event: CameraMountError) => void

    Callback invoked when camera preview could not been started.


  • ViewProps

Web Only

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

  • Promise<CameraType[]>

iOS Only

Queries the device for the available video codecs that can be used in video recording.

A promise that resolves to a list of strings that represents available codecs.


Web Only

Check whether the current device has a camera. This is useful for web and simulators cases. This isn't influenced by the Permissions API (all platforms), or HTTP usage (in the browser). You will still need to check if the native permission has been accepted.

  • ratio? (string) - A string representing aspect ratio of sizes to be returned.

Get picture sizes that are supported by the device for given ratio.

Returns a Promise that resolves to an array of strings representing picture sizes that can be passed to pictureSize prop. The list varies across Android devices but is the same for every iOS.


Android Only

Get aspect ratios that are supported by the device and can be passed via ratio prop.

Returns a Promise that resolves to an array of strings representing ratios, eg. ['4:3', '1:1'].


Pauses the camera preview. It is not recommended to use takePictureAsync when preview is paused.


Android Only
iOS Only

Starts recording a video that will be saved to cache directory. Videos are rotated to match device's orientation. Flipping camera during a recording results in stopping it.

Returns a Promise that resolves to an object containing video file uri property and a codec property on iOS. The Promise is returned if stopRecording was invoked, one of maxDuration and maxFileSize is reached or camera preview is stopped.


Resumes the camera preview.


Stops recording if any is in progress.


Takes a picture and saves it to app's cache directory. Photos are rotated to match device's orientation (if options.skipProcessing flag is not enabled) and scaled to match the preview. Anyway on Android it is essential to set ratio prop to get a picture with correct dimensions.

Note: Make sure to wait for the onCameraReady callback before calling this method.

Returns a Promise that resolves to CameraCapturedPicture object, where uri is a URI to the local image file on iOS, Android, and a base64 string on web (usable as the source for an Image element). The width and height properties specify the dimensions of the image. base64 is included if the base64 option was truthy, and is a string containing the JPEG data of the image in Base64--prepend that with 'data:image/jpg;base64,' to get a data URI, which you can use as the source for an Image element for example. exif is included if the exif option was truthy, and is an object containing EXIF data for the image--the names of its properties are EXIF tags and their values are the values for those tags.

On native platforms, the local image URI is temporary. Use FileSystem.copyAsync to make a permanent copy of the image.
On web, the uri is a base64 representation of the image because file system URLs are not supported in the browser. The exif data returned on web is a partial representation of the MediaTrackSettings, if available.

Checks user's permissions for accessing camera.

A promise that resolves to an object of type PermissionResponse.


Checks user's permissions for accessing microphone.

A promise that resolves to an object of type PermissionResponse.


Deprecated. Deprecated. Use getCameraPermissionsAsync or getMicrophonePermissionsAsync instead. Checks user's permissions for accessing camera.

Asks the user to grant permissions for accessing camera. On iOS this will require apps to specify an NSCameraUsageDescription entry in the Info.plist.

A promise that resolves to an object of type PermissionResponse.


Asks the user to grant permissions for accessing the microphone. On iOS this will require apps to specify an NSMicrophoneUsageDescription entry in the Info.plist.

A promise that resolves to an object of type PermissionResponse.


Deprecated. Use requestCameraPermissionsAsync or requestMicrophonePermissionsAsync instead.

Asks the user to grant permissions for accessing camera. On iOS this will require apps to specify both NSCameraUsageDescription and NSMicrophoneUsageDescription entries in the Info.plist.

A promise that resolves to an object of type PermissionResponse.

NameTypeDescription
cornerPoints
(optional)
BarCodePoint[]Corner points of the bounding box.
datastringThe information encoded in the bar code.
typestringThe barcode type.

NameTypeDescription
base64
(optional)
string-
exif
(optional)
Partial<MediaTrackSettings> | any-
heightnumber-
uristring-
widthnumber-

NameTypeDescription
messagestring-

NameTypeDescription
base64
(optional)
booleanWhether to also include the image data in Base64 format.
exif
(optional)
booleanWhether to also include the EXIF data for the image.
imageType
(optional)
ImageType
Web Only

isImageMirror
(optional)
boolean
Web Only

quality
(optional)
numberSpecify the quality of compression, from 0 to 1. 0 means compress for small size, 1 means compress for maximum quality.
scale
(optional)
number
Web Only

skipProcessing
(optional)
booleanIf 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) => voidA 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.

NameTypeDescription
codec
(optional)
VideoCodec
iOS Only

This option specifies what codec to use when recording the video. See VideoCodec for the possible values.
maxDuration
(optional)
numberMaximum video duration in seconds.
maxFileSize
(optional)
numberMaximum 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)
booleanIf present, video will be recorded with no sound.
quality
(optional)
number | stringSpecify 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, 5*1000*1000 would be 5Mbps.

NameTypeDescription
AutoFocusAutoFocus-
FlashModeFlashMode-
TypeCameraType-
VideoCodecVideoCodec-
VideoQualityVideoQuality-
VideoStabilizationVideoStabilization-
WhiteBalanceWhiteBalance-

NameTypeDescription
facesFace[]-

Acceptable values are: 'never', number.

NameTypeDescription
xnumber-
ynumber-

NameTypeDescription
canAskAgainboolean-
expiresPermissionExpiration-
grantedboolean-
statusPermissionStatus-

  • auto
    Web Only

    AutoFocus.auto"auto"

  • off

    AutoFocus.off"off"

  • on

    AutoFocus.on"on"

  • singleShot
    Web Only

    AutoFocus.singleShot"singleShot"

  • back

    CameraType.back"back"

  • front

    CameraType.front"front"

  • auto

    FlashMode.auto"auto"

  • off

    FlashMode.off"off"

  • on

    FlashMode.on"on"

  • torch

    FlashMode.torch"torch"

  • DENIED

    PermissionStatus.DENIED"denied"

  • GRANTED

    PermissionStatus.GRANTED"granted"

  • UNDETERMINED

    PermissionStatus.UNDETERMINED"undetermined"

iOS Only

This option specifies what codec to use when recording a video.

  • AppleProRes422

    VideoCodec.AppleProRes422"apcn"

  • AppleProRes4444

    VideoCodec.AppleProRes4444"ap4h"

  • H264

    VideoCodec.H264"avc1"

  • HEVC

    VideoCodec.HEVC"hvc1"

  • JPEG

    VideoCodec.JPEG"jpeg"

  • 1080p

    VideoQuality.1080p"1080p"

  • 2160p

    VideoQuality.2160p"2160p"

  • 480p

    VideoQuality.480p"480p"

  • 4:3

    VideoQuality.4:3"4:3"

  • 720p

    VideoQuality.720p"720p"

  • auto

    VideoStabilization.auto"auto"

  • cinematic

    VideoStabilization.cinematic"cinematic"

  • off

    VideoStabilization.off"off"

  • standard

    VideoStabilization.standard"standard"

  • auto

    WhiteBalance.auto"auto"

  • cloudy
    Android Only
    iOS Only

    WhiteBalance.cloudy"cloudy"

  • continuous
    Web Only

    WhiteBalance.continuous"continuous"

  • fluorescent
    Android Only
    iOS Only

    WhiteBalance.fluorescent"fluorescent"

  • incandescent
    Android Only
    iOS Only

    WhiteBalance.incandescent"incandescent"

  • manual
    Web Only

    WhiteBalance.manual"manual"

  • shadow
    Android Only
    iOS Only

    WhiteBalance.shadow"shadow"

  • sunny
    Android Only
    iOS Only

    WhiteBalance.sunny"sunny"