Camera

💡

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

Installation

Configuration

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 } from 'expo-camera';

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

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      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 === Camera.Constants.Type.back
                  ? Camera.Constants.Type.front
                  : Camera.Constants.Type.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',
  },
});

API

import { Camera } from 'expo-camera';

Static Methods

Camera.isAvailableAsync(): boolean

import { Camera } from 'expo-camera';

if (await Camera.isAvailableAsync()) {
}

Camera.getAvailableCameraTypesAsync(): string[]

import { Camera } from 'expo-camera';

const types = await Camera.getAvailableCameraTypesAsync();

Props

type

flashMode

autoFocus

zoom

whiteBalance

focusDepth

ratio

pictureSize

onCameraReady

onFacesDetected

faceDetectorSettings

onMountError

onBarCodeRead

onBarCodeScanned

barCodeTypes

barCodeScannerSettings

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

useCamera2Api

videoStabilizationMode

poster

Methods

// ...
<Camera
  ref={ref => {
    this.camera = ref;
  }}
/>;
// ...
snap = async () => {
  if (this.camera) {
    let photo = await this.camera.takePictureAsync();
  }
};

takePictureAsync()

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

Arguments

• options (object) --
  A map of options:
  • quality (number) -- Specify the quality of compression, from 0 to 1. 0 means compress for small size, 1 means compress for maximum quality.
  • base64 (boolean) -- Whether to also include the image data in Base64 format.
  • exif (boolean) -- Whether to also include the EXIF data for the image.
  • onPictureSaved (function) -- 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.
  • skipProcessing (boolean) - Android only. 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.

Returns

recordAsync()

Arguments

• options (object) --
  A map of options:
  • quality (VideoQuality) -- Specify the quality of recorded video. Usage: Camera.Constants.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.
  • maxDuration (number) -- Maximum video duration in seconds.
  • maxFileSize (number) -- Maximum video file size in bytes.
  • mute (boolean) -- If present, video will be recorded with no sound.
  • mirror (boolean) -- (iOS only; on Android, this is handled in the user's device settings) 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.

Returns

stopRecording()

getSupportedRatiosAsync()

Returns

getAvailablePictureSizesAsync()

Arguments

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

Returns

pausePreview()

resumePreview()

requestPermissionsAsync()

Returns

getPermissionsAsync()

Returns

Web Support

Chrome iframe usage

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