d3105fa207
* chore: Upgrade a lot of dependencies for `./` * chore: Upgrade a lot of dependencies for `./example` * chore: Upgrade a lot of dependencies for `./docs` * Use new `EventEmitter` syntax (`.remove()`) * Update Podfile.lock * docs: Use watch mode * docs: Replace all relative links with absolute * Fix all links * Update docusaurus.config.js * Upgrade docusaurus-plugin-typedoc to fix docs build * Update yarn.lock * Upgrade typescript to 4.4.3 * Fix error unknown * Update package.json * Upgrade typedoc * Upgrade a few more deps * Fix deprecated sidebar syntax * Update Gemfile.lock
114 lines
4.2 KiB
Plaintext
114 lines
4.2 KiB
Plaintext
---
|
|
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)
|