105 lines
3.6 KiB
Plaintext
105 lines
3.6 KiB
Plaintext
---
|
|
id: taking-photos
|
|
title: Taking Photos
|
|
sidebar_label: Taking Photos
|
|
---
|
|
|
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
|
|
|
<div class="image-container">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
|
|
<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 Functions
|
|
|
|
The Camera provides certain functions which are available through 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}
|
|
/>
|
|
)
|
|
}
|
|
```
|
|
|
|
To use these functions, you need to wait until the [`onInitialized`](/docs/api/interfaces/CameraProps#oninitialized) event has been fired.
|
|
|
|
## 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()
|
|
```
|
|
|
|
You can customize capture options such as [automatic red-eye reduction](/docs/api/interfaces/TakePhotoOptions#enableautoredeyereduction), [automatic image stabilization](/docs/api/interfaces/TakePhotoOptions#enableautostabilization), [enable flash](/docs/api/interfaces/TakePhotoOptions#flash), [prioritize speed over quality](/docs/api/interfaces/TakePhotoOptions#qualityprioritization), [disable the shutter sound](/docs/api/interfaces/TakePhotoOptions#enableshuttersound) and more using the [`TakePhotoOptions`](/docs/api/interfaces/TakePhotoOptions) parameter.
|
|
|
|
This function returns a [`PhotoFile`](/docs/api/interfaces/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](https://github.com/react-native-cameraroll/react-native-cameraroll).
|
|
|
|
### Flash
|
|
|
|
The [`takePhoto(...)`](/docs/api/classes/Camera#takephoto) function can be configured to enable the [flash](/docs/api/interfaces/TakePhotoOptions#flash) automatically (when the scene is dark), always or never, which will only be used for this specific capture request:
|
|
|
|
```ts
|
|
const photo = await camera.current.takePhoto({
|
|
flash: 'on' // 'auto' | 'off'
|
|
})
|
|
```
|
|
|
|
Note that flash is only available on camera devices where [`hasFlash`](/docs/api/interfaces/CameraDevice#hasflash) is `true`; for example most front cameras don't have a flash.
|
|
|
|
### Fast Capture
|
|
|
|
The [`takePhoto(...)`](/docs/api/classes/Camera#takephoto) function can be configured for faster capture at the cost of lower quality:
|
|
|
|
```ts
|
|
const photo = await camera.current.takePhoto({
|
|
qualityPrioritization: 'speed',
|
|
flash: 'off',
|
|
enableShutterSound: false
|
|
})
|
|
```
|
|
|
|
## 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](https://github.com/react-native-cameraroll/react-native-cameraroll) for this:
|
|
|
|
```ts
|
|
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(...)`](https://reactnative.dev/docs/network#using-fetch) to read the local file as a Blob:
|
|
|
|
```ts
|
|
const file = await camera.current.takePhoto()
|
|
const result = await fetch(`file://${file.path}`)
|
|
const data = await result.blob();
|
|
```
|
|
|
|
<br />
|
|
|
|
#### 🚀 Next section: [Recording Videos](recording-videos)
|