Skip to main content

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 a SurfaceView for rendering. This is more efficient and supports HDR rendering, but doesn't support masks, transparency, rotations or clipping.
  • "texture-view": Uses a TextureView 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:184

audio​

• Optional audio: boolean

Enables audio capture for video recordings (see "Recording Videos")

Note: Requires audio permission.

Defined in​

types/CameraProps.ts:84

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:423

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:52

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:263

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:290

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:306

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:106

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:299

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:137

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:150

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:

In other words; enableDepthData can only be set to true if format.supportsDepthCapture is true.

Defined in​

types/CameraProps.ts:166

fps​

• Optional fps: number

Specify a fixed number of frames per second this camera should stream frames at.

fps is just a shorthand for setting minFps and maxFps to the same value. For setting a variable FPS range, use minFps and maxFps instead of fps. Setting a variable FPS range can be beneficial for better exposure and quality in low-light conditions.

Make sure the given format can stream at the target fps value (see format.minFps and format.maxFps).

Defined in​

types/CameraProps.ts:194

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:406

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:60

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:327

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:274

maxFps​

• Optional maxFps: number

Specifies the maximum amount of frames per second this camera should stream frames at.

Under good/bright lighting conditions, the Camera can increase it's frame rate as it does not need a lot of light to expose frames.

However under low/dark lighting conditions, the Camera might throttle it's frame rate to receive more light. This can be controlled via minFps:

  • if minFps is the same value as maxFps, the Camera will not throttle FPS.
  • if minFps is a lower value than maxFps (e.g. minFps={20} maxFps={30}), the Camera can choose between 20 FPS and 30 FPS depending on lighting conditions.

Make sure this value is not higher than the given format's format.maxFps value.

Defined in​

types/CameraProps.ts:218

minFps​

• Optional minFps: number

Specifies the minimum amount of frames per second this camera should stream frames at.

Under low/dark lighting conditions, the Camera will throttle it's frame rate to receive more light, and minFps sets the minimum value for this.

Make sure this value is not lower than the given format's format.minFps value.

Defined in​

types/CameraProps.ts:203

onError​

• Optional onError: (error: CameraRuntimeError) => void

Called when any kind of runtime error occured.

Type declaration​

â–¸ (error): void

Parameters​
NameType
errorCameraRuntimeError
Returns​

void

Defined in​

types/CameraProps.ts:333

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:341

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​
NameType
outputOrientationOrientation
Returns​

void

Defined in​

types/CameraProps.ts:378

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​
NameType
previewOrientationOrientation
Returns​

void

Defined in​

types/CameraProps.ts:385

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:359

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:365

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​
NameType
eventOnShutterEvent
Returns​

void

Defined in​

types/CameraProps.ts:371

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:347

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:353

onUIRotationChanged​

• Optional onUIRotationChanged: (uiRotation: number) => void

Called whenever the target UI rotation/orientation changes.

Type declaration​

â–¸ (uiRotation): void

Parameters​
NameTypeDescription
uiRotationnumberThe degrees that UI elements need to be rotated by to appear up-right.
Returns​

void

Defined in​

types/CameraProps.ts:390

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:318

photo​

• Optional photo: boolean

Enables photo capture with the takePhoto function (see "Taking Photos")

Defined in​

types/CameraProps.ts:74

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:233

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:242

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:97

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:70

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:174

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:117

video​

• Optional video: boolean

Enables video capture with the startRecording function (see "Recording Videos")

Defined in​

types/CameraProps.ts:78

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:224

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:280

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:129