Skip to main content

Class: Camera

A powerful <Camera> component.​

Read the VisionCamera documentation for more information.

The <Camera> component's most important properties are:

  • device: Specifies the CameraDevice to use. Get a CameraDevice by using the useCameraDevice(..) hook, or manually by using the CameraDevices.getAvailableCameraDevices CameraDevices.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 device = useCameraDevice('back')

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

Component

Hierarchy​

  • PureComponent<CameraProps, CameraState>

    ↳ Camera

Methods​

focus​

â–¸ focus(point): Promise<void>

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

Parameters​

NameTypeDescription
pointPointThe point to focus to. This should be relative to the Camera view's coordinate system and is expressed in points. * (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>

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
})

Defined in​

Camera.tsx:306

pauseRecording​

â–¸ pauseRecording(): Promise<void>

Pauses the current video recording.

Returns​

Promise<void>

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()

Defined in​

Camera.tsx:231

resumeRecording​

â–¸ resumeRecording(): Promise<void>

Resumes a currently paused video recording.

Returns​

Promise<void>

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()

Defined in​

Camera.tsx:259

startRecording​

â–¸ startRecording(options): void

Start a new video recording.

Parameters​

NameType
optionsRecordVideoOptions

Returns​

void

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)

Defined in​

Camera.tsx:171

stopRecording​

â–¸ stopRecording(): Promise<void>

Stop the current video recording.

Returns​

Promise<void>

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)

Defined in​

Camera.tsx:280

takePhoto​

â–¸ takePhoto(options?): Promise<PhotoFile>

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

Parameters​

NameType
options?TakePhotoOptions

Returns​

Promise<PhotoFile>

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
})

Defined in​

Camera.tsx:131

addCameraDevicesChangedListener​

â–¸ Static addCameraDevicesChangedListener(listener): EmitterSubscription

Adds a listener that gets called everytime the Camera Devices change, for example when an external Camera Device (USB or continuity Camera) gets plugged in or plugged out.

If you use Hooks, use the useCameraDevices() hook instead.

Parameters​

NameType
listener(newDevices: CameraDevice[]) => void

Returns​

EmitterSubscription

Defined in​

Camera.tsx:340

getAvailableCameraDevices​

â–¸ Static getAvailableCameraDevices(): CameraDevice[]

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

If you use Hooks, use the useCameraDevices(..) hook instead.

  • For Camera Devices attached to the phone, it is safe to assume that this will never change.
  • For external Camera Devices (USB cameras, Mac continuity cameras, etc.) the available Camera Devices could change over time when the external Camera device gets plugged in or plugged out, so use addCameraDevicesChangedListener(...) to listen for such changes.

Returns​

CameraDevice[]

Example

const devices = Camera.getAvailableCameraDevices()
const backCameras = devices.filter((d) => d.position === "back")
const frontCameras = devices.filter((d) => d.position === "front")

Defined in​

Camera.tsx:331

getCameraPermissionStatus​

â–¸ Static getCameraPermissionStatus(): 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().

Returns​

CameraPermissionStatus

Defined in​

Camera.tsx:349

getMicrophonePermissionStatus​

â–¸ Static getMicrophonePermissionStatus(): 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().

Returns​

CameraPermissionStatus

Defined in​

Camera.tsx:358

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.

Returns​

Promise<CameraPermissionRequestResult>

Throws

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

Defined in​

Camera.tsx:369

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.

Returns​

Promise<CameraPermissionRequestResult>

Throws

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

Defined in​

Camera.tsx:384