Skip to main content

Taking Photos/Recording Videos

Camera Actions​

The Camera provides certain actions using member functions which are available by using a ref object:

function App() {
  const camera = useRef<Camera>(null)
  // ...

  return (
    <Camera
      ref={camera}
      {...cameraProps}
    />
  )
}

The most important actions are:

Taking Photos​

To take a photo you first have to enable photo capture:

<Camera {...props} photo={true} />

Then, simply use the Camera's takePhoto(...) function:

const photo = await camera.current.takePhoto({
  flash: 'on'
})

You can customize capture options such as automatic red-eye reduction, automatic image stabilization, combining images from constituent physical camera devices to create a single high quality fused image, enable flash, prioritize speed over quality and more using the options parameter. (See TakePhotoOptions)

This function returns a PhotoFile which contains a path property you can display in your App using an <Image> or <FastImage>.

Taking Snapshots​

Compared to iOS, Cameras on Android tend to be slower in image capture. If you care about speed, you can use the Camera's takeSnapshot(...) function (Android only) which simply takes a snapshot of the Camera View instead of actually taking a photo through the Camera lens.

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

While taking snapshots is faster than taking photos, the resulting image has way lower quality. You can combine both functions to create a snapshot to present to the user at first, then deliver the actual high-res photo afterwards.

note

The takeSnapshot function also works with photo={false}. For this reason VisionCamera will automatically fall-back to snapshot capture if you are trying to use more use-cases than the Camera natively supports. (see "The supportsParallelVideoProcessing prop")

Recording Videos​

To start a video recording you first have to enable video capture:

<Camera
  {...props}
  video={true}
  audio={true} // <-- optional
/>

Then, simply use the Camera's startRecording(...) function:

camera.current.startRecording({
  flash: 'on',
  onRecordingFinished: (video) => console.log(video),
  onRecordingError: (error) => console.error(error),
})

For any error that occured while recording the video, the onRecordingError callback will be invoked with a CaptureError and the recording is therefore cancelled.

To stop the video recording, you can call stopRecording(...):

await camera.current.stopRecording()

Once a recording has been stopped, the onRecordingFinished callback passed to the startRecording function will be invoked with a VideoFile which you can then use to display in a <Video> component.


🚀 Next section: Frame Processors​