Camera

A powerful <Camera> component.

Read the VisionCamera documentation for more information.

The <Camera> component's most important (and therefore required) properties are:

• device: Specifies the CameraDevice to use. Get a CameraDevice by using the useCameraDevices() hook, or manually by using the Camera.getAvailableCameraDevices() function.
• isActive: A boolean value that specifies whether the Camera should actively stream video frames or not. This can be compared to a Video component, where isActive specifies whether the video is paused or not. If you fully unmount the <Camera> component instead of using isActive={false}, the Camera will take a bit longer to start again.

Example

function App() {
  const devices = useCameraDevices('wide-angle-camera')
  const device = devices.back

  if (device == null) return <LoadingView />
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
    />
  )
}

Component

Hierarchy

• PureComponent<CameraProps>

  ↳ Camera

Methods

focus

▸ focus(point): Promise<void>

Focus the camera to a specific point in the coordinate system.

Throws

CameraRuntimeError When any kind of error occured while focussing. Use the code property to get the actual error

Example

await camera.current.focus({
  x: tapEvent.x,
  y: tapEvent.y
})

Parameters

Name	Type	Description
point	Point	The point to focus to. This should be relative to the Camera view's coordinate system, and expressed in Pixel on iOS and Points on Android. (0, 0) means top left. (CameraView.width, CameraView.height) means bottom right. Make sure the value doesn't exceed the CameraView's dimensions.

Returns

Promise<void>

Defined in

Camera.tsx:280

---

getAvailableVideoCodecs

▸ getAvailableVideoCodecs(fileType?): Promise<CameraVideoCodec[]>

Get a list of video codecs the current camera supports for a given file type. Returned values are ordered by efficiency (descending).

Example

const codecs = await camera.current.getAvailableVideoCodecs("mp4")

Throws

CameraRuntimeError When any kind of error occured while getting available video codecs. Use the ParameterError.code | code property to get the actual error

Platform

iOS

Parameters

Name	Type
fileType?	VideoFileType

Returns

Promise<CameraVideoCodec[]>

Defined in

Camera.tsx:298

---

pauseRecording

▸ pauseRecording(): Promise<void>

Pauses the current video recording.

Throws

CameraCaptureError When any kind of error occured while pausing the video recording. Use the code property to get the actual error

Example

// Start
await camera.current.startRecording()
await timeout(1000)
// Pause
await camera.current.pauseRecording()
await timeout(500)
// Resume
await camera.current.resumeRecording()
await timeout(2000)
// Stop
const video = await camera.current.stopRecording()

Returns

Promise<void>

Defined in

Camera.tsx:205

---

resumeRecording

▸ resumeRecording(): Promise<void>

Resumes a currently paused video recording.

Throws

CameraCaptureError When any kind of error occured while resuming the video recording. Use the code property to get the actual error

Example

// Start
await camera.current.startRecording()
await timeout(1000)
// Pause
await camera.current.pauseRecording()
await timeout(500)
// Resume
await camera.current.resumeRecording()
await timeout(2000)
// Stop
const video = await camera.current.stopRecording()

Returns

Promise<void>

Defined in

Camera.tsx:233

---

startRecording

▸ startRecording(options): void

Start a new video recording.

Records in the following formats:

• iOS: QuickTime (.mov)
• Android: MPEG4 (.mp4)

Blocking

This function is synchronized/blocking.

Throws

CameraCaptureError When any kind of error occured while starting the video recording. Use the code property to get the actual error

Example

camera.current.startRecording({
  onRecordingFinished: (video) => console.log(video),
  onRecordingError: (error) => console.error(error),
})
setTimeout(() => {
  camera.current.stopRecording()
}, 5000)

Parameters

Name	Type
options	RecordVideoOptions

Returns

void

Defined in

Camera.tsx:168

---

stopRecording

▸ stopRecording(): Promise<void>

Stop the current video recording.

Throws

CameraCaptureError When any kind of error occured while stopping the video recording. Use the code property to get the actual error

Example

await camera.current.startRecording()
setTimeout(async () => {
 const video = await camera.current.stopRecording()
}, 5000)

Returns

Promise<void>

Defined in

Camera.tsx:254

---

takePhoto

▸ takePhoto(options?): Promise<PhotoFile>

Take a single photo and write it's content to a temporary file.

Throws

CameraCaptureError When any kind of error occured while capturing the photo. Use the code property to get the actual error

Example

const photo = await camera.current.takePhoto({
  qualityPrioritization: 'quality',
  flash: 'on',
  enableAutoRedEyeReduction: true
})

Parameters

Name	Type
options?	TakePhotoOptions

Returns

Promise<PhotoFile>

Defined in

Camera.tsx:111

---

takeSnapshot

▸ takeSnapshot(options?): Promise<PhotoFile>

Take a snapshot of the current preview view.

This can be used as an alternative to takePhoto() if speed is more important than quality

Throws

CameraCaptureError When any kind of error occured while taking a snapshot. Use the code property to get the actual error

Platform

Android

Example

const photo = await camera.current.takeSnapshot({
  quality: 85,
  skipMetadata: true
})

Parameters

Name	Type
options?	TakeSnapshotOptions

Returns

Promise<PhotoFile>

Defined in

Camera.tsx:135

---

getAvailableCameraDevices

▸ Static getAvailableCameraDevices(): Promise<CameraDevice[]>

Get a list of all available camera devices on the current phone.

Throws

CameraRuntimeError When any kind of error occured while getting all available camera devices. Use the code property to get the actual error

Example

const devices = await Camera.getAvailableCameraDevices()
const filtered = devices.filter((d) => matchesMyExpectations(d))
const sorted = devices.sort(sortDevicesByAmountOfCameras)
return {
  back: sorted.find((d) => d.position === "back"),
  front: sorted.find((d) => d.position === "front")
}

Returns

Promise<CameraDevice[]>

Defined in

Camera.tsx:334

---

getCameraPermissionStatus

▸ Static getCameraPermissionStatus(): Promise<CameraPermissionStatus>

Gets the current Camera Permission Status. Check this before mounting the Camera to ensure the user has permitted the app to use the camera.

To actually prompt the user for camera permission, use requestCameraPermission().

Throws

CameraRuntimeError When any kind of error occured while getting the current permission status. Use the code property to get the actual error

Returns

Promise<CameraPermissionStatus>

Defined in

Camera.tsx:349

---

getMicrophonePermissionStatus

▸ Static getMicrophonePermissionStatus(): Promise<CameraPermissionStatus>

Gets the current Microphone-Recording Permission Status. Check this before mounting the Camera to ensure the user has permitted the app to use the microphone.

To actually prompt the user for microphone permission, use requestMicrophonePermission().

Throws

CameraRuntimeError When any kind of error occured while getting the current permission status. Use the code property to get the actual error

Returns

Promise<CameraPermissionStatus>

Defined in

Camera.tsx:364

---

installFrameProcessorBindings

▸ Static installFrameProcessorBindings(): void

Install JSI Bindings for Frame Processors

Returns

void

Defined in

Camera.tsx:312

---

requestCameraPermission

▸ Static requestCameraPermission(): Promise<CameraPermissionRequestResult>

Shows a "request permission" alert to the user, and resolves with the new camera permission status.

If the user has previously blocked the app from using the camera, the alert will not be shown and "denied" will be returned.

Throws

CameraRuntimeError When any kind of error occured while requesting permission. Use the code property to get the actual error

Returns

Promise<CameraPermissionRequestResult>

Defined in

Camera.tsx:379

---

requestMicrophonePermission

▸ Static requestMicrophonePermission(): Promise<CameraPermissionRequestResult>

Shows a "request permission" alert to the user, and resolves with the new microphone permission status.

If the user has previously blocked the app from using the microphone, the alert will not be shown and "denied" will be returned.

Throws

CameraRuntimeError When any kind of error occured while requesting permission. Use the code property to get the actual error

Returns

Promise<CameraPermissionRequestResult>

Defined in

Camera.tsx:394