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>.

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​