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!Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
💡Android devices can use one of two available Camera APIs: you can opt-in to usingCamera2
with theuseCamera2Api
prop.
→
expo install expo-camera
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
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 unmountCamera
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', }, });
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.
<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
A URL for an image to be shown while the camera is loading.
Optional • Type: string
• Default: 4:3.
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
Whether to use Android's Camera2 API. See Note
at the top of this page.
Optional • Type: number
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.
Returns a list of camera types ['front', 'back']
. This is useful for desktop browsers which only have front-facing cameras.
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.
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.
string
) - A string representing aspect ratio of sizes to be returned.Get picture sizes that are supported by the device for given ratio
.
Promise<string[]>
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.
Get aspect ratios that are supported by the device and can be passed via ratio
prop.
Promise<string[]>
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.
void
CameraRecordingOptions
) - A map of CameraRecordingOptions
type.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.
Promise<{ uri: string }>
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.
CameraPictureOptions
) - An object in form of CameraPictureOptions
type.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 theonCameraReady
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. UseFileSystem.copyAsync
to make a permanent copy of the image.
On web, theuri
is a base64 representation of the image because file system URLs are not supported in the browser. Theexif
data returned on web is a partial representation of theMediaTrackSettings
, if available.
Checks user's permissions for accessing camera.
Checks user's permissions for accessing microphone.
Deprecated. Deprecated. UsegetCameraPermissionsAsync
orgetMicrophonePermissionsAsync
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.
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.
Deprecated. UserequestCameraPermissionsAsync
orrequestMicrophonePermissionsAsync
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.
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 |
---|---|---|
message | string | - |
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 | Web
Only |
isImageMirror (optional) | boolean | Web
Only |
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 | Web
Only |
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).
|
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, 5*1000*1000 would be 5Mbps. |
Name | Type | Description |
---|---|---|
AutoFocus | AutoFocus | - |
FlashMode | FlashMode | - |
Type | CameraType | - |
VideoCodec | VideoCodec | - |
VideoQuality | VideoQuality | - |
VideoStabilization | VideoStabilization | - |
WhiteBalance | WhiteBalance | - |
Name | Type | Description |
---|---|---|
faces | Face[] | - |
Acceptable values are: 'never'
, number
.
Name | Type | Description |
---|---|---|
x | number | - |
y | number | - |
Name | Type | Description |
---|---|---|
canAskAgain | boolean | - |
expires | PermissionExpiration | - |
granted | boolean | - |
status | PermissionStatus | - |
auto
AutoFocus.auto = "auto"
off
AutoFocus.off = "off"
on
AutoFocus.on = "on"
singleShot
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"
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
WhiteBalance.cloudy = "cloudy"
continuous
WhiteBalance.continuous = "continuous"
fluorescent
WhiteBalance.fluorescent = "fluorescent"
incandescent
WhiteBalance.incandescent = "incandescent"
manual
WhiteBalance.manual = "manual"
shadow
WhiteBalance.shadow = "shadow"
sunny
WhiteBalance.sunny = "sunny"