expo-camera provides a React component that renders a preview of 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.
The component is also capable of detecting faces and bar codes appearing in the preview.
Usage
import { Camera, CameraType } from 'expo-camera';
import { useState } from 'react';
import { Button, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default function App() {
const [type, setType] = useState(CameraType.back);
const [permission, requestPermission] = Camera.useCameraPermissions();
if (!permission) {
// Camera permissions are still loading
return <View />;
}
if (!permission.granted) {
// Camera permissions are not granted yet
return (
<View style={styles.container}>
<Text style={{ textAlign: 'center' }}>We need your permission to show the camera</Text>
<Button onPress={requestPermission} title="grant permission" />
</View>
);
}
function toggleCameraType() {
setType(current => (current === CameraType.back ? CameraType.front : CameraType.back));
}
return (
<View style={styles.container}>
<Camera style={styles.camera} type={type}>
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.button} onPress={toggleCameraType}>
<Text style={styles.text}>Flip Camera</Text>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
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',
},
});
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 base84 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 you 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';Component
Camera Type: React.Component CameraProps
Props
autoFocus: State of camera auto focus. Use one of AutoFocus.value. When AutoFocus.on, auto focus will be enabled, when AutoFocus.off, it won't add focus will lock as it was in the moment of change, but it can be adjusted on some devices via focusDepth prop.
onCameraReady: Callback invoked when camera preview has been set.
onMountError: Callback invoked when camera preview could not been started.
onResponseiveOrientationChanged: Callback invoked when responsive orientation changes. Only applicable if responsiverOrientationWhenOrientationLocked is true
pictureSize: A string representing the sie of pictures takePictureAsync will take. Available sizes can be fetched with getAvailablePictureSizeAsync.
responsiverOrientationWhenOrientationLocked (Only for: ios): Whether to allow responsive orientation of the camera when the screen orientation is locked (i.e. when set true landscape photos will be taken if the devices is turned that way, even if the app or device orientation is locked to portrait)
type: Camera facing. Use one of CameraType. When CameraType.front, use the front-facing camera. When cameraType.back, use the back-facing camera.
videoStabilizationMode (Only for: ios): The video stablilization mode used for a video recording. Use one of VideoStabilization.value. You can read more about each stabilization type in Apple Documentation.
whiteBalance: Camera white balance. Use one of WhiteBalance.value. If a device does not support any of these values previous one is used.
zoom: A value between 0 and 1 being a percentage of device's max zoom. 0 - not zoomed, 1 - maximum zoom.
Static Methods
getAvailableVideoCodecsAsync() (Only for: ios): Queries the device for the available video codecs that can be used in video recording.
Component Methods
pausePreview(): Pauses the camera preview. It is not recommended to use takePictureAsync when preview is paused.
recordAsync(options): 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 url 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.
resumePreview(): Resumes the camera preview.
stopRecording(): Stops recording if any is in progress.
Hooks
useCameraPermissions(options): Check or request permissions to access the camera. This uses both requestCameraPermissionsAsync and getCameraPermissionAsync to interact with the permissions.
const [status, requestPermission] = Camera.useCameraPermissions();Methods
Camera.getCameraPermissionAsync(): Checks user's permissions for accessing camera.
Camera.getPermissionsAsync()
Camera.requestCameraPermisiionAsync(): Asks the user to grant permissions for accessing camera. On iOS this will require apps to specify an NSCameraUsageDescription entry in the Info.plist
Interfaces
PermissionResponse: canAskAgain(boolean), expires(PermissionExpiration), granted(boolean), status(PermissionStatus)
Types
CameraRecordingOptins
- codec: This option specifies what codec to use when recording the video. See VideoCodec for the possible values
- maxDuration: Maximum video duration in seconds.
- maxFileSize: Maximum video file size in bytes.
- mirror: 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.
- mute: If preset, video will be recorded with no sound.
- quality: Specify the quality of recorded video.
