102 lines
3.3 KiB
Plaintext
102 lines
3.3 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)
|
|
* [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>`.
|
|
|
|
## 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.
|
|
|
|
To pause/resume the recordings, you can use `pauseRecording()` and `resumeRecording()`:
|
|
|
|
```ts
|
|
await camera.current.pauseRecording()
|
|
...
|
|
await camera.current.resumeRecording()
|
|
```
|
|
|
|
<br />
|
|
|
|
#### 🚀 Next section: [Frame Processors](frame-processors)
|