Skip to main content

Taking Photos

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

You can customize capture options such as automatic red-eye reduction, enable flash, 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.

Resolution​

Photos are always captured in the resolution of the currently selected format (See "Formats"). By default the Camera will select a format with the highest photo resolution available.

If you want to use a custom resolution, configure the Camera to use a format that matches the desired photoResolution:

const format = useCameraFormat(device, [
  { photoResolution: { width: 1280, height: 720 } }
])

return <Camera {...props} format={format} />

Flash​

The takePhoto(...) function can be configured to enable the flash automatically (when the scene is dark), always or never, which will only be used for this specific capture request:

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

Note that flash is only available on camera devices where hasFlash is true; for example most front cameras don't have a flash.

Quality Balance​

The photo capture pipeline can be configured to prioritize speed over quality, quality over speed or balance both quality and speed using the qualityBalance prop. If set to speed, the Camera pipeline will capture photos faster at the cost of lower quality:

return <Camera {...props} qualityBalance="speed" />

Taking Snapshots​

In addition to photo capture VisionCamera also supports snapshot capture, which can take photos at speeds of up to just 16 milliseconds. A snapshot is grabbed from the Preview View of the Camera, and will not perform any AE/AF/AWB precapture sequences.

To take a snapshot simply use the Camera's takeSnapshot(..) function:

const snapshot = await camera.current.takeSnapshot({
  quality: 90
})
note

On iOS, snapshot capture requires video to be enabled.

Saving the Photo to the Camera Roll​

Since the Photo is stored as a temporary file, you need to save it to the Camera Roll to permanentely store it. You can use react-native-cameraroll for this:

const file = await camera.current.takePhoto()
await CameraRoll.save(`file://${file.path}`, {
  type: 'photo',
})

Getting the Photo's data​

To get the Photo's pixel data, you can use fetch(...) to read the local file as a Blob:

const file = await camera.current.takePhoto()
const result = await fetch(`file://${file.path}`)
const data = await result.blob();

🚀 Next section: Recording Videos​