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