react-native-vision-camera/docs/docs/guides/CAPTURING.mdx

---
id: capturing
title: Taking Photos/Recording Videos
sidebar_label: Taking Photos/Recording Videos
---

import useBaseUrl from '@docusaurus/useBaseUrl';

<div>
  <svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
    <image href={useBaseUrl("img/demo_capture.gif")} x="18" y="33" width="247" height="469"  />
    <image href={useBaseUrl("img/frame.png")} width="283" height="535" />
  </svg>
</div>

## Camera Actions

The Camera provides certain actions using member functions which are available by using a [ref object](https://reactjs.org/docs/refs-and-the-dom.html):

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

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

The most important actions are:

* [Taking Photos](#taking-photos)
  - [Taking Snapshots](#taking-snapshots)
* [Recording Videos](#recording-videos)

## Taking Photos

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

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

Then, simply use the Camera's [`takePhoto(...)`](/docs/api/classes/Camera#takephoto) function:

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

You can customize capture options such as [automatic red-eye reduction](/docs/api/interfaces/TakePhotoOptions#enableautoredeyereduction), [automatic image stabilization](/docs/api/interfaces/TakePhotoOptions#enableautostabilization), [combining images from constituent physical camera devices](/docs/api/interfaces/TakePhotoOptions#enablevirtualdevicefusion) to create a single high quality fused image, [enable flash](/docs/api/interfaces/TakePhotoOptions#flash), [prioritize speed over quality](/docs/api/interfaces/TakePhotoOptions#qualityprioritization) and more using the `options` parameter. (See [`TakePhotoOptions`](/docs/api/interfaces/TakePhotoOptions))

This function returns a [`PhotoFile`](/docs/api/interfaces/PhotoFile) which contains a [`path`](/docs/api/interfaces/PhotoFile#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(...)`](/docs/api/classes/Camera#takesnapshot) function (Android only) which simply takes a snapshot of the Camera View instead of actually taking a photo through the Camera lens.

```ts
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"](/docs/guides/devices#the-supportsparallelvideoprocessing-prop))
:::

## Recording Videos

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

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

Then, simply use the Camera's [`startRecording(...)`](/docs/api/classes/Camera#startrecording) function:

```ts
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`](/docs/api/classes/CameraCaptureError) and the recording is therefore cancelled.

To stop the video recording, you can call [`stopRecording(...)`](/docs/api/classes/Camera#stoprecording):

```ts
await camera.current.stopRecording()
```

Once a recording has been stopped, the `onRecordingFinished` callback passed to the `startRecording` function will be invoked with a [`VideoFile`](/docs/api/interfaces/VideoFile) which you can then use to display in a [`<Video>`](https://github.com/react-native-video/react-native-video) component.

<br />

#### 🚀 Next section: [Frame Processors](frame-processors)