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

113 lines
4.6 KiB
Plaintext
Raw Normal View History

---
id: devices
title: Camera Devices
sidebar_label: Camera Devices
---
2021-02-22 05:57:38 -07:00
2021-03-04 09:02:14 -07:00
import useBaseUrl from '@docusaurus/useBaseUrl';
2021-02-22 05:57:38 -07:00
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
2021-03-04 09:02:14 -07:00
<image href={useBaseUrl("img/demo.gif")} x="18" y="33" width="247" height="469" />
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
</svg>
2021-02-22 05:57:38 -07:00
</div>
### What are camera devices?
Camera devices are the physical (or "virtual") devices that can be used to record videos or capture photos.
* **Physical**: A physical camera device is a **camera lens on your phone**. Different physical camera devices have different specifications, such as different capture formats, field of views, frame rates, focal lengths, and more. Some phones have multiple physical camera devices.
2021-02-22 05:57:38 -07:00
> Examples: _"Backside Wide-Angle Camera"_, _"Frontside Wide-Angle Camera (FaceTime HD)"_, _"Ultra-Wide-Angle back camera"_.
2021-02-24 13:59:44 -07:00
* **Virtual**: A virtual camera device is a **combination of one or more physical camera devices**, and provides features such as _virtual-device-switchover_ while zooming or _combined photo delivery_ from all physiscal cameras to produce higher quality images.
2021-02-22 05:57:38 -07:00
> Examples: _"Triple-Camera"_, _"Dual-Wide-Angle Camera"_
### Get available camera devices
To get a list of all available camera devices, use the `getAvailableCameraDevices` function:
```ts
const devices = await Camera.getAvailableCameraDevices()
```
:::note
See the [`CameraDevice` type](https://github.com/cuvent/react-native-vision-camera/blob/main/src/CameraDevice.ts) for more information about a Camera Device
:::
2021-02-22 06:02:28 -07:00
A camera device (`CameraDevice`) contains a list of physical device types this camera device consists of.
2021-02-22 05:57:38 -07:00
Example:
* For a single Wide-Angle camera, this would be `["wide-angle-camera"]`
* For a Triple-Camera, this would be `["wide-angle-camera", "ultra-wide-angle-camera", "telephoto-camera"]`
You can use the helper function `parsePhysicalDeviceTypes` to convert a list of physical devices to a single device descriptor type which can also describe virtual devices:
```ts
console.log(device.devices)
// --> ["wide-angle-camera", "ultra-wide-angle-camera", "telephoto-camera"]
const deviceType = parsePhysicalDeviceTypes(device.devices)
console.log(deviceType)
// --> "triple-camera"
```
2021-03-04 09:03:07 -07:00
The `CameraDevice` type also contains other useful information describing a camera device, such as `position` ("front", "back", ...), `hasFlash`, it's `formats` (See [Camera Formats](formats)), and more.
2021-02-22 06:02:28 -07:00
:::caution
Make sure to be careful when filtering out unneeded camera devices, since not every phone supports all camera device types. Some phones don't even have front-cameras. You always want to have a camera device, even when it's not the one that has the best features.
:::
2021-02-22 05:57:38 -07:00
### The `useCameraDevices` hook
2021-02-22 05:57:38 -07:00
VisionCamera provides a hook to make camera device selection a lot easier. You can specify a device type to only find devices with the given type:
2021-02-22 05:57:38 -07:00
2021-02-22 06:35:59 -07:00
```tsx
2021-02-22 05:57:38 -07:00
function App() {
const devices = useCameraDevices('wide-angle-camera')
const device = devices.back
2021-02-22 06:35:59 -07:00
2021-03-01 04:41:49 -07:00
if (device == null) return <LoadingView />
2021-02-22 06:35:59 -07:00
return (
<Camera
style={StyleSheet.absoluteFill}
device={device}
/>
)
2021-02-22 05:57:38 -07:00
}
```
Or just return the "best matching camera device". This function prefers camera devices with more physical cameras, and always ranks "wide-angle" physical camera devices first.
> Example: `triple-camera` > `dual-wide-camera` > `dual-camera` > `wide-angle-camera` > `ultra-wide-angle-camera` > `telephoto-camera` > ...
2021-02-22 06:35:59 -07:00
```tsx
2021-02-22 05:57:38 -07:00
function App() {
const devices = useCameraDevices()
const device = devices.back
2021-02-22 06:35:59 -07:00
2021-03-01 04:41:49 -07:00
if (device == null) return <LoadingView />
2021-02-22 06:35:59 -07:00
return (
<Camera
style={StyleSheet.absoluteFill}
device={device}
/>
)
2021-02-22 05:57:38 -07:00
}
```
2021-02-23 02:52:13 -07:00
### The `supportsPhotoAndVideoCapture` prop
2021-06-07 07:04:49 -06:00
Camera devices provide the [`supportsPhotoAndVideoCapture` property](/docs/api/interfaces/cameradevice.cameradevice-1#supportsphotoandvideocapture) which determines whether the device supports enabling photo- and video-capture at the same time.
While every iOS device supports this feature, there are some older Android devices which only allow enabling one of each - either photo capture or video capture. (Those are `LEGACY` devices, see [this table](https://developer.android.com/reference/android/hardware/camera2/CameraDevice#regular-capture).)
:::note
2021-06-07 07:04:49 -06:00
If `supportsPhotoAndVideoCapture` is `false` but you still need photo- and video-capture at the same time, you can fall back to _snapshot capture_ (see [**"Taking Snapshots"**](/docs/guides/capturing#taking-snapshots)) instead.
:::
<br />
#### 🚀 Next section: [Camera Lifecycle](lifecycle)