Interface: CameraProps
Hierarchy​
-
ViewProps
↳
CameraProps
Properties​
androidPreviewViewType​
• Optional
androidPreviewViewType: "surface-view"
| "texture-view"
Specifies the implementation mode for the Preview View on Android.
"surface-view"
: Uses aSurfaceView
for rendering. This is more efficient and supports HDR rendering, but doesn't support masks, transparency, rotations or clipping."texture-view"
: Uses aTextureView
for rendering. This is less efficient and doesn't support HDR rendering, but supports masks, transparency, rotations and clipping.
Default
'surface-view'
Defined in​
types/CameraProps.ts:185
audio​
• Optional
audio: boolean
Enables audio capture for video recordings (see "Recording Videos")
Note: Requires audio permission.
Defined in​
types/CameraProps.ts:85
codeScanner​
• Optional
codeScanner: CodeScanner
A CodeScanner that can detect QR-Codes or Barcodes using platform-native APIs.
See
See the Code Scanner documentation for more information
Example
const codeScanner = useCodeScanner({
codeTypes: ['qr', 'ean-13'],
onCodeScanned: (codes) => {
console.log(`Scanned ${codes.length} codes!`)
}
})
return <Camera {...props} codeScanner={codeScanner} />
Defined in​
types/CameraProps.ts:401
device​
• device: CameraDevice
The Camera Device to use.
See the Camera Devices section in the documentation for more information about Camera Devices.
Example
const device = useCameraDevice('back')
if (device == null) return <NoCameraErrorView />
return (
<Camera
device={device}
isActive={true}
style={StyleSheet.absoluteFill}
/>
)
Defined in​
types/CameraProps.ts:53
enableBufferCompression​
• Optional
enableBufferCompression: boolean
Enables or disables lossy buffer compression for the video stream.
If you only use video
or a frameProcessor
, this
can increase the efficiency and lower memory usage of the Camera.
If buffer compression is enabled, the video pipeline will try to use a lossy-compressed pixel format instead of the normal one.
If you use a frameProcessor
, you might need to change how pixels
are read inside your native frame processor function as this is different
from the usual yuv
or rgb
layout.
If buffer compression is not available but this property is enabled, the normal pixel formats will be used and no error will be thrown.
Platform
iOS
Default
- true // if frameProcessor={undefined}
- false // otherwise
Defined in​
types/CameraProps.ts:241
enableDepthData​
• Optional
enableDepthData: boolean
Enables or disables depth data delivery for photo capture.
Make sure the given format
supports depth data (see format.supportsDepthCapture
).
Default
false
Defined in​
types/CameraProps.ts:268
enableFpsGraph​
• Optional
enableFpsGraph: boolean
If true
, show a debug view to display the FPS of the Video Pipeline (Frame Processor).
This is useful for debugging your Frame Processor's speed.
Default
false
Defined in​
types/CameraProps.ts:284
enableLocation​
• Optional
enableLocation: boolean
Enables location streaming to add GPS EXIF tags to captured photos and videos.
Note: Requires location permission.
Note: This property will throw a system/location-not-enabled
error if the Location APIs are not enabled at build-time.
See the "GPS Location Tags" documentation for more information.
Defined in​
types/CameraProps.ts:107
enablePortraitEffectsMatteDelivery​
• Optional
enablePortraitEffectsMatteDelivery: boolean
A boolean specifying whether the photo render pipeline is prepared for portrait effects matte delivery.
When enabling this, you must also set enableDepthData
to true
.
Platform
iOS 12.0+
Default
false
Defined in​
types/CameraProps.ts:277
enableZoomGesture​
• Optional
enableZoomGesture: boolean
Enables or disables the native pinch to zoom gesture.
If you want to implement a custom zoom gesture, see the Zooming with Reanimated documentation.
Default
false
Defined in​
types/CameraProps.ts:138
exposure​
• Optional
exposure: number
Specifies the Exposure bias of the current camera. A lower value means darker images, a higher value means brighter images.
The Camera will still continue to auto-adjust exposure and focus, but will premultiply the exposure setting with the provided value here.
This values ranges from device.minExposure
to device.maxExposure
.
The value between min- and max supported exposure is considered the default, neutral value.
Defined in​
types/CameraProps.ts:151
format​
• Optional
format: CameraDeviceFormat
Selects a given format. By default, the best matching format is chosen. See CameraDeviceFormat
The format defines the possible values for properties like:
fps
:format.minFps
...format.maxFps
videoHdr
:format.supportsVideoHdr
photoHdr
:format.supportsPhotoHdr
enableDepthData
:format.supportsDepthCapture
videoStabilizationMode
:format.videoStabilizationModes
In other words; enableDepthData
can only be set to true if format.supportsDepthCapture
is true.
Defined in​
types/CameraProps.ts:167
fps​
• Optional
fps: number
| [minFps: number, maxFps: number]
Specify a the number of frames per second this camera should stream frames at.
- If
fps
is a single number, the Camera will be streaming at a fixed FPS value. - If
fps
is a tuple/array, the Camera will be free to choose a FPS value betweenminFps
andmaxFps
, depending on current lighting conditions. Allowing a lowerminFps
value can result in better photos and videos, as the Camera can take more time to properly receive light for frames.
Make sure the given format
can stream at the target fps
value (see format.minFps
and format.maxFps
).
Defined in​
types/CameraProps.ts:196
frameProcessor​
• Optional
frameProcessor: ReadonlyFrameProcessor
| DrawableFrameProcessor
A worklet which will be called for every frame the Camera "sees".
See
See the Frame Processors documentation for more information
Example
const frameProcessor = useFrameProcessor((frame) => {
'worklet'
const faces = scanFaces(frame)
console.log(`Faces: ${faces}`)
}, [])
return <Camera {...cameraProps} frameProcessor={frameProcessor} />
Defined in​
types/CameraProps.ts:384
isActive​
• isActive: boolean
Whether the Camera should actively stream video frames, or not. See the documentation about the isActive
prop for more information.
This can be compared to a Video component, where isActive
specifies whether the video is paused or not.
Note
If you fully unmount the <Camera>
component instead of using isActive={false}
, the Camera will take a bit longer to start again. In return, it will use less resources since the Camera will be completely destroyed when unmounted.
Defined in​
types/CameraProps.ts:61
isMirrored​
• Optional
isMirrored: boolean
Enables or disables mirroring of outputs alongside the vertical axis.
Mirroring only affects the photo-, video-, or snapshot-output, but not preview. The Preview is always mirrored for front cameras, and not mirrored for back cameras.
Default
false (back camera), true (front camera)
Defined in​
types/CameraProps.ts:305
lowLightBoost​
• Optional
lowLightBoost: boolean
Enables or disables low-light boost on this camera device.
Enabling low light boost allows the FPS rate to be throttled to up to half of what it is set to to allow for more exposure in low light conditions.
On Android, lowLightBoost
might even use a vendor-specific "night-mode" extension to allow for even more visibility in low-light conditions.
Make sure the given device
supports low-light-boost (see device.supportsLowLightBoost
).
Defined in​
types/CameraProps.ts:252
onError​
• Optional
onError: (error
: CameraRuntimeError
) => void
Called when any kind of runtime error occured.
Type declaration​
â–¸ (error
): void
Parameters​
Name | Type |
---|---|
error | CameraRuntimeError |
Returns​
void
Defined in​
types/CameraProps.ts:311
onInitialized​
• Optional
onInitialized: () => void
Called when the camera session was successfully initialized and is ready for capture.
At this point, the Camera ref
can be used and methods like takePhoto(..)
can be called.
This is called everytime the device
or one of the outputs changes.
Type declaration​
â–¸ (): void
Returns​
void
Defined in​
types/CameraProps.ts:319
onOutputOrientationChanged​
• Optional
onOutputOrientationChanged: (outputOrientation
: Orientation
) => void
Called whenever the output orientation changed. This might happen even if the screen/interface rotation is locked.
See
See "Orientation"
Type declaration​
â–¸ (outputOrientation
): void
Parameters​
Name | Type |
---|---|
outputOrientation | Orientation |
Returns​
void
Defined in​
types/CameraProps.ts:356
onPreviewOrientationChanged​
• Optional
onPreviewOrientationChanged: (previewOrientation
: Orientation
) => void
Called whenever the preview orientation changed. This will happen whenever the screen/interface rotates.
See
See "Orientation"
Type declaration​
â–¸ (previewOrientation
): void
Parameters​
Name | Type |
---|---|
previewOrientation | Orientation |
Returns​
void
Defined in​
types/CameraProps.ts:363
onPreviewStarted​
• Optional
onPreviewStarted: () => void
Called when the Preview View has received it's first frame and is now started.
Note
This will only be called if preview
is true, and no Skia Frame Processor is used
Type declaration​
â–¸ (): void
Returns​
void
Defined in​
types/CameraProps.ts:337
onPreviewStopped​
• Optional
onPreviewStopped: () => void
Called when the Preview View has stoppped streaming frames and is now stopped.
Note
This will only be called if preview
is true, and no Skia Frame Processor is used
Type declaration​
â–¸ (): void
Returns​
void
Defined in​
types/CameraProps.ts:343
onShutter​
• Optional
onShutter: (event
: OnShutterEvent
) => void
Called just before a photo or snapshot is captured.
Inside this callback you can play a custom shutter sound or show visual feedback to the user.
Type declaration​
â–¸ (event
): void
Parameters​
Name | Type |
---|---|
event | OnShutterEvent |
Returns​
void
Defined in​
types/CameraProps.ts:349
onStarted​
• Optional
onStarted: () => void
Called when the camera started the session. (isActive={true}
)
At this point, outputs can start receiving frames from the Camera, but might not have received any yet.
Type declaration​
â–¸ (): void
Returns​
void
Defined in​
types/CameraProps.ts:325
onStopped​
• Optional
onStopped: () => void
Called when the camera stopped the session. (isActive={false}
)
At this point, outputs will stop receiving frames from the Camera.
Type declaration​
â–¸ (): void
Returns​
void
Defined in​
types/CameraProps.ts:331
onUIRotationChanged​
• Optional
onUIRotationChanged: (uiRotation
: number
) => void
Called whenever the target UI rotation/orientation changes.
Type declaration​
â–¸ (uiRotation
): void
Parameters​
Name | Type | Description |
---|---|---|
uiRotation | number | The degrees that UI elements need to be rotated by to appear up-right. |
Returns​
void
Defined in​
types/CameraProps.ts:368
outputOrientation​
• Optional
outputOrientation: OutputOrientation
Sets the orientation of all Camera Outputs (Photo, Snapshot and Video).
'preview'
: Use the same orientation as the preview view. If the device rotation is locked, the user cannot take photos or videos in different orientations.'device'
: Use whatever orientation the device is held in, even if the preview view is not rotated to that orientation. If the device rotation is locked, the user can still rotate his phone to take photos or videos in different orientations than the preview view.
Note
Preview orientation will not be affected by this property, as it is always dependant on screen orientation
Note
Frame Processors will not be affected by this property, as their buffer size (respective to Frame.orientation
) is always the same
See
See the Orientation documentation for more information
Default
'device'
Defined in​
types/CameraProps.ts:296
photo​
• Optional
photo: boolean
Enables photo capture with the takePhoto
function (see "Taking Photos")
Defined in​
types/CameraProps.ts:75
photoHdr​
• Optional
photoHdr: boolean
Enables or disables HDR Photo Capture via a double capture routine that combines low- and high exposure photos.
On Android, photoHdr
uses a vendor-specific "HDR" extension which is not compatible with videoHdr
,
so only one of video- or photo-HDR can be enabled at a time.
Make sure the given format
supports HDR (see format.supportsPhotoHdr
).
Defined in​
types/CameraProps.ts:211
photoQualityBalance​
• Optional
photoQualityBalance: "speed"
| "balanced"
| "quality"
Configures the photo pipeline for a specific quality balance prioritization.
'speed'
: Prioritizes fast capture speed over quality (faster edge-detection, distortion correction, AF/AE/AWB times, etc.)'balanced'
: A balanced set of prioritization configurations'quality'
: Prioritizes high quality capture over speed (higher accuracy edge-detection, distortion correction, AF/AE/AWB times, etc.)
Default
'balanced'
Defined in​
types/CameraProps.ts:220
pixelFormat​
• Optional
pixelFormat: "yuv"
| "rgb"
Specifies the pixel format of Frames streamed from a Frame Processor.
While 'yuv'
is the most efficient format, some ML models (such as TensorFlow Face Detection Models) require input Frames to be in RGB colorspace, otherwise they just output nonsense.
The following values are supported:
yuv
: The YUV (Y'CbCr 4:2:0 or NV21, 8-bit) format, either video- or full-range, depending on hardware capabilities. This is the most efficient format.rgb
: The RGB (RGBA or BGRA, 8-bit) format. This is less efficient format and sometimes requires explicit conversion.
Default
'yuv'
Defined in​
types/CameraProps.ts:98
preview​
• Optional
preview: boolean
Enables preview streaming.
Preview is enabled by default, and disabled when using a Skia Frame Processor as Skia will use the video stream as it's preview.
Default
true
Defined in​
types/CameraProps.ts:71
resizeMode​
• Optional
resizeMode: "cover"
| "contain"
Specifies the Preview's resize mode.
"cover"
: Keep aspect ratio and fill entire parent view (centered)."contain"
: Keep aspect ratio and make sure the entire content is visible inside the parent view, even if it introduces additional blank areas (centered).
Default
"cover"
Defined in​
types/CameraProps.ts:175
torch​
• Optional
torch: "off"
| "on"
Set the current torch mode.
Make sure the given device
has a torch (see device.hasTorch
).
Default
"off"
Defined in​
types/CameraProps.ts:118
video​
• Optional
video: boolean
Enables video capture with the startRecording
function (see "Recording Videos")
Defined in​
types/CameraProps.ts:79
videoHdr​
• Optional
videoHdr: boolean
Enables or disables HDR Video Streaming for Preview, Video and Frame Processor via a 10-bit wide-color pixel format.
Make sure the given format
supports HDR (see format.supportsVideoHdr
).
Defined in​
types/CameraProps.ts:202
videoStabilizationMode​
• Optional
videoStabilizationMode: VideoStabilizationMode
Specifies the video stabilization mode to use.
Make sure the given format
supports the given videoStabilizationMode
.
Defined in​
types/CameraProps.ts:258
zoom​
• Optional
zoom: number
Specifies the zoom factor of the current camera, in "factor"/scale.
This value ranges from minZoom
(e.g. 1
) to maxZoom
(e.g. 128
). It is recommended to set this value
to the CameraDevice's neutralZoom
per default and let the user zoom out to the fish-eye (ultra-wide) camera
on demand (if available)
Note: Linearly increasing this value always appears logarithmic to the user.
Default
1.0
Defined in​
types/CameraProps.ts:130