Taking Photos/Recording Videos

Camera Functions

The Camera provides certain functions which are available through a ref object:

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

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

To use these functions, you need to wait until the onInitialized event has been fired.

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, enable flash, prioritize speed over quality, disable the shutter sound and more using the TakePhotoOptions parameter.

This function returns a PhotoFile which is stored in a temporary directory and can either be displayed using <Image> or <FastImage>, uploaded to a backend, or saved to the Camera Roll using react-native-cameraroll.

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

You can customize capture options such as video codec, file type, enable flash and more using the RecordVideoOptions parameter.

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, uploaded to a backend, or saved to the Camera Roll using react-native-cameraroll.

To pause/resume the recordings, you can use pauseRecording() and resumeRecording():

await camera.current.pauseRecording()
...
await camera.current.resumeRecording()

🚀 Next section: Frame Processors