VisionCamera

Classes

• Camera
• CameraCaptureError
• CameraRuntimeError

Interfaces

• CameraDevice
• CameraDeviceFormat
• CameraProps
• Code
• CodeScanner
• DeviceFilter
• ErrorWithCause
• FormatFilter
• Frame
• PhotoFile
• Point
• RecordVideoOptions
• TakePhotoOptions
• VideoFile

Type Aliases

AutoFocusSystem

Ƭ AutoFocusSystem: "contrast-detection" | "phase-detection" | "none"

Indicates a format's autofocus system.

• "none": Indicates that autofocus is not available
• "contrast-detection": Indicates that autofocus is achieved by contrast detection. Contrast detection performs a focus scan to find the optimal position
• "phase-detection": Indicates that autofocus is achieved by phase detection. Phase detection has the ability to achieve focus in many cases without a focus scan. Phase detection autofocus is typically less visually intrusive than contrast detection autofocus

Defined in

CameraDevice.ts:35

---

CameraPermissionRequestResult

Ƭ CameraPermissionRequestResult: "granted" | "denied"

Defined in

Camera.tsx:18

---

CameraPermissionStatus

Ƭ CameraPermissionStatus: "granted" | "not-determined" | "denied" | "restricted"

Defined in

Camera.tsx:17

---

CameraPosition

Ƭ CameraPosition: "front" | "back" | "external"

Represents the camera device position.

• "back": Indicates that the device is physically located on the back of the phone
• "front": Indicates that the device is physically located on the front of the phone
• "external": The camera device is an external camera, and has no fixed facing relative to the phone. (e.g. USB or Continuity Cameras)

Defined in

CameraDevice.ts:11

---

CaptureError

Ƭ CaptureError: "capture/recording-in-progress" | "capture/no-recording-in-progress" | "capture/file-io-error" | "capture/create-temp-file-error" | "capture/create-recorder-error" | "capture/recorder-error" | "capture/video-not-enabled" | "capture/photo-not-enabled" | "capture/aborted" | "capture/unknown"

Defined in

CameraError.ts:31

---

CodeScannerError

Ƭ CodeScannerError: "code-scanner/not-compatible-with-outputs" | "code-scanner/code-type-not-supported" | "code-scanner/cannot-load-model"

Defined in

CameraError.ts:27

---

CodeType

Ƭ CodeType: "code-128" | "code-39" | "code-93" | "codabar" | "ean-13" | "ean-8" | "itf" | "upc-e" | "qr" | "pdf-417" | "aztec" | "data-matrix"

The type of the code to scan.

Defined in

CodeScanner.ts:4

---

DeviceError

Ƭ DeviceError: "device/configuration-error" | "device/no-device" | "device/invalid-device" | "device/microphone-unavailable" | "device/pixel-format-not-supported" | "device/low-light-boost-not-supported" | "device/focus-not-supported" | "device/camera-not-available-on-simulator"

Defined in

CameraError.ts:7

---

FormatError

Ƭ FormatError: "format/invalid-fps" | "format/invalid-hdr" | "format/incompatible-pixel-format-with-hdr-setting" | "format/invalid-format"

Defined in

CameraError.ts:16

---

FrameProcessor

Ƭ FrameProcessor: Object

Type declaration

Name	Type
frameProcessor	(frame: Frame) => void
type	"frame-processor"

Defined in

CameraProps.ts:8

---

Orientation

Ƭ Orientation: "portrait" | "portrait-upside-down" | "landscape-left" | "landscape-right"

Represents Orientation. Depending on the context, this might be a sensor orientation (relative to the phone's orentation), or view orientation.

• portrait: 0° (home-button at the bottom)
• landscape-left: 90° (home-button on the left)
• portrait-upside-down: 180° (home-button at the top)
• landscape-right: 270° (home-button on the right)

Defined in

Orientation.ts:10

---

ParameterError

Ƭ ParameterError: "parameter/invalid-parameter" | "parameter/unsupported-output" | "parameter/unsupported-input" | "parameter/invalid-combination"

Defined in

CameraError.ts:2

---

PermissionError

Ƭ PermissionError: "permission/microphone-permission-denied" | "permission/camera-permission-denied"

Defined in

CameraError.ts:1

---

PhysicalCameraDeviceType

Ƭ PhysicalCameraDeviceType: "ultra-wide-angle-camera" | "wide-angle-camera" | "telephoto-camera"

Indentifiers for a physical camera (one that actually exists on the back/front of the device)

• "ultra-wide-angle-camera": A built-in camera with a shorter focal length than that of a wide-angle camera. (focal length between below 24mm)
• "wide-angle-camera": A built-in wide-angle camera. (focal length between 24mm and 43mm)
• "telephoto-camera": A built-in camera device with a longer focal length than a wide-angle camera. (focal length between above 85mm)

Some Camera devices consist of multiple physical devices. They can be interpreted as logical devices, for example:

• "ultra-wide-angle-camera" + "wide-angle-camera" = dual wide-angle camera.
• "wide-angle-camera" + "telephoto-camera" = dual camera.
• "ultra-wide-angle-camera" + "wide-angle-camera" + "telephoto-camera" = triple camera.

Defined in

CameraDevice.ts:26

---

PixelFormat

Ƭ PixelFormat: "yuv" | "rgb" | "native" | "unknown"

Represents the pixel format of a Frame.

If you intend to read Pixels from this Frame or use an ML model for processing, make sure that you are using the expected PixelFormat, otherwise the plugin might not be able to properly understand the Frame's content.

Most ML models operate in either yuv (recommended) or rgb.

• yuv: Frame is in YUV pixel-format (Y'CbCr 4:2:0 or NV21, 8-bit)
• rgb: Frame is in RGB pixel-format (RGB or RGBA, 8-bit)
• native: Frame is in the Camera's native Hardware Buffer format (PRIVATE). This is the most efficient Format.
• unknown: Frame has unknown/unsupported pixel-format.

Defined in

PixelFormat.ts:14

---

SessionError

Ƭ SessionError: "session/camera-not-ready" | "session/camera-cannot-be-opened" | "session/camera-has-been-disconnected" | "session/audio-in-use-by-other-app" | "session/audio-session-failed-to-activate"

Defined in

CameraError.ts:21

---

SystemError

Ƭ SystemError: "system/camera-module-not-found" | "system/no-camera-manager" | "system/frame-processors-unavailable" | "system/view-not-found"

Defined in

CameraError.ts:42

---

UnknownError

Ƭ UnknownError: "unknown/unknown"

Defined in

CameraError.ts:47

---

VideoStabilizationMode

Ƭ VideoStabilizationMode: "off" | "standard" | "cinematic" | "cinematic-extended" | "auto"

Indicates a format's supported video stabilization mode. Enabling video stabilization may introduce additional latency into the video capture pipeline.

• "off": No video stabilization. Indicates that video should not be stabilized
• "standard": Standard software-based video stabilization. Standard video stabilization reduces the field of view by about 10%.
• "cinematic": Advanced software-based video stabilization. This applies more aggressive cropping or transformations than standard.
• "cinematic-extended": Extended software- and hardware-based stabilization that aggressively crops and transforms the video to apply a smooth cinematic stabilization.
• "auto": Indicates that the most appropriate video stabilization mode for the device and format should be chosen automatically

Defined in

CameraDevice.ts:46

Variables

Templates

• Const Templates: TTemplates

Predefined templates for use in useCameraFormat/getCameraFormat.

Example

const format = useCameraFormat(device, Templates.Snapchat)

Defined in

devices/Templates.ts:19

---

VisionCameraProxy

• Const VisionCameraProxy: TVisionCameraProxy = proxy

Defined in

FrameProcessorPlugins.ts:103

Functions

createFrameProcessor

▸ createFrameProcessor(frameProcessor, type): FrameProcessor

Create a new Frame Processor function which you can pass to the <Camera>. (See "Frame Processors")

Make sure to add the 'worklet' directive to the top of the Frame Processor function, otherwise it will not get compiled into a worklet.

Also make sure to memoize the returned object, so that the Camera doesn't reset the Frame Processor Context each time.

Parameters

Name	Type
frameProcessor	(frame: Frame) => void
type	"frame-processor"

Returns

FrameProcessor

Defined in

hooks/useFrameProcessor.ts:13

---

getCameraDevice

▸ getCameraDevice(devices, position, filter?): CameraDevice | undefined

Get the best matching Camera device that best satisfies your requirements using a sorting filter, or undefined if devices does not contain any devices.

Parameters

Name	Type	Description
devices	CameraDevice[]	-
position	CameraPosition	The position of the Camera device relative to the phone.
filter	DeviceFilter	The filter you want to use. The Camera device that matches your filter the closest will be returned

Returns

CameraDevice | undefined

The Camera device that matches your filter the closest, or undefined if no such Camera Device exists on the given position.

Example

const devices = Camera.getAvailableCameraDevices()
const device = getCameraDevice(devices, 'back', {
   physicalDevices: ['wide-angle-camera']
})

Defined in

devices/getCameraDevice.ts:38

---

getCameraFormat

▸ getCameraFormat(device, filters): CameraDeviceFormat

Get the best matching Camera format for the given device that satisfies your requirements using a sorting filter. By default, formats are sorted by highest to lowest resolution.

The filters are ranked by priority, from highest to lowest. This means the first item you pass will have a higher priority than the second, and so on.

Parameters

Name	Type	Description
device	CameraDevice	The Camera Device you're currently using
filters	FormatFilter[]	-

Returns

CameraDeviceFormat

The format that matches your filter the closest.

Example

const format = getCameraFormat(device, [
  { videoResolution: { width: 3048, height: 2160 } },
  { fps: 60 }
])

Defined in

devices/getCameraFormat.ts:113

---

isErrorWithCause

▸ isErrorWithCause(error): error is ErrorWithCause

Checks if the given error is of type ErrorWithCause

Parameters

Name	Type	Description
error	unknown	Any unknown object to validate

Returns

error is ErrorWithCause

true if the given error is of type ErrorWithCause

Defined in

CameraError.ts:165

---

runAsync

▸ runAsync(frame, func): void

Runs the given function asynchronously, while keeping a strong reference to the Frame.

For example, if you want to run a heavy face detection algorithm while still drawing to the screen at 60 FPS, you can use runAsync(...) to offload the face detection algorithm to a separate thread.

Parameters

Name	Type	Description
frame	Frame	The current Frame of the Frame Processor.
func	() => void	The function to execute.

Returns

void

Example

const frameProcessor = useFrameProcessor((frame) => {
  'worklet'
  console.log('New Frame')
  runAsync(frame, () => {
    'worklet'
    const faces = detectFaces(frame)
    const face = [faces0]
    console.log(`Detected a new face: ${face}`)
  })
})

Defined in

FrameProcessorPlugins.ts:185

---

runAtTargetFps

▸ runAtTargetFps<T>(fps, func): T | undefined

Runs the given function at the given target FPS rate.

For example, if you want to run a heavy face detection algorithm only once per second, you can use runAtTargetFps(1, ...) to throttle it to 1 FPS.

Type parameters

Name
T

Parameters

Name	Type	Description
fps	number	The target FPS rate at which the given function should be executed
func	() => T	The function to execute.

Returns

T | undefined

The result of the function if it was executed, or undefined otherwise.

Example

const frameProcessor = useFrameProcessor((frame) => {
  'worklet'
  console.log('New Frame')
  runAtTargetFps(5, () => {
    'worklet'
    const faces = detectFaces(frame)
    console.log(`Detected a new face: ${faces[0]}`)
  })
})

Defined in

FrameProcessorPlugins.ts:144

---

tryParseNativeCameraError

▸ tryParseNativeCameraError<T>(nativeError): CameraCaptureError | CameraRuntimeError | T

Tries to parse an error coming from native to a typed JS camera error.

Type parameters

Name
T

Parameters

Name	Type	Description
nativeError	T	The native error instance. This is a JSON in the legacy native module architecture.

Returns

CameraCaptureError | CameraRuntimeError | T

A CameraRuntimeError or CameraCaptureError, or the nativeError itself if it's not parsable

Method

Defined in

CameraError.ts:191

---

useCameraDevice

▸ useCameraDevice(position, filter?): CameraDevice | undefined

Get the best matching Camera device that best satisfies your requirements using a sorting filter.

Parameters

Name	Type	Description
position	CameraPosition	The position of the Camera device relative to the phone.
filter?	DeviceFilter	The filter you want to use. The Camera device that matches your filter the closest will be returned

Returns

CameraDevice | undefined

The Camera device that matches your filter the closest, or undefined if no such Camera Device exists on the given position.

Example

const device = useCameraDevice('back', {
   physicalDevices: ['wide-angle-camera']
})

Defined in

hooks/useCameraDevice.ts:18

---

useCameraDevices

▸ useCameraDevices(): CameraDevice[]

Get all available Camera Devices this phone has.

Camera Devices attached to this phone (back or front) are always available, while external devices might be plugged in or out at any point, so the result of this function might update over time.

Returns

CameraDevice[]

Defined in

hooks/useCameraDevices.ts:12

---

useCameraFormat

▸ useCameraFormat(device, filters): CameraDeviceFormat | undefined

Get the best matching Camera format for the given device that satisfies your requirements using a sorting filter. By default, formats are sorted by highest to lowest resolution.

The filters are ranked by priority, from highest to lowest. This means the first item you pass will have a higher priority than the second, and so on.

Parameters

Name	Type	Description
device	undefined | CameraDevice	The Camera Device you're currently using
filters	FormatFilter[]	-

Returns

CameraDeviceFormat | undefined

The format that matches your filter the closest.

Example

const device = useCameraDevice(...)
const format = useCameraFormat(device, [
  { videoResolution: { width: 3048, height: 2160 } },
  { fps: 60 }
])

Defined in

hooks/useCameraFormat.ts:23

---

useCameraPermission

▸ useCameraPermission(): PermissionState

Returns whether the user has granted permission to use the Camera, or not.

If the user doesn't grant Camera Permission, you cannot use the <Camera>.

Returns

PermissionState

Example

const { hasPermission, requestPermission } = useCameraPermission()

if (!hasPermission) {
  return <PermissionScreen onPress={requestPermission} />
} else {
  return <Camera ... />
}

Defined in

hooks/useCameraPermission.ts:33

---

useCodeScanner

▸ useCodeScanner(codeScanner): CodeScanner

Parameters

Name	Type
codeScanner	CodeScanner

Returns

CodeScanner

Defined in

hooks/useCodeScanner.ts:4

---

useFrameProcessor

▸ useFrameProcessor(frameProcessor, dependencies): FrameProcessor

Returns a memoized Frame Processor function wich you can pass to the <Camera>. (See "Frame Processors")

Make sure to add the 'worklet' directive to the top of the Frame Processor function, otherwise it will not get compiled into a worklet.

Parameters

Name	Type	Description
frameProcessor	(frame: Frame) => void	The Frame Processor
dependencies	DependencyList	The React dependencies which will be copied into the VisionCamera JS-Runtime.

Returns

FrameProcessor

The memoized Frame Processor.

Example

const frameProcessor = useFrameProcessor((frame) => {
  'worklet'
  const faces = scanFaces(frame)
  console.log(`Faces: ${faces}`)
}, [])

Defined in

hooks/useFrameProcessor.ts:50

---

useMicrophonePermission

▸ useMicrophonePermission(): PermissionState

Returns whether the user has granted permission to use the Microphone, or not.

If the user doesn't grant Audio Permission, you can use the <Camera> but you cannot record videos with audio (the audio={..} prop).

Returns

PermissionState

Example

const { hasPermission, requestPermission } = useMicrophonePermission()
const canRecordAudio = hasPermission

return <Camera video={true} audio={canRecordAudio} />

Defined in

hooks/useCameraPermission.ts:67