deb8beb688
* Bump the reanimated requirement to 2.2.0 and above * bump versions podfile * Simplify Frame Processor * Add `'worklet'` note
113 lines
4.5 KiB
Plaintext
113 lines
4.5 KiB
Plaintext
---
|
|
id: setup
|
|
title: Getting Started
|
|
sidebar_label: Getting Started
|
|
slug: /guides
|
|
---
|
|
|
|
import useBaseUrl from '@docusaurus/useBaseUrl';
|
|
|
|
<div>
|
|
<img align="right" width="283" src={useBaseUrl("img/example_intro.png")} />
|
|
</div>
|
|
|
|
## Installing the library
|
|
|
|
Install [**react-native-vision-camera**](https://www.npmjs.com/package/react-native-vision-camera) through npm:
|
|
|
|
```bash
|
|
npm i react-native-vision-camera
|
|
npx pod-install
|
|
```
|
|
|
|
VisionCamera requires **iOS 11 or higher**, and **Android-SDK version 21 or higher**. See [Troubleshooting](/docs/guides/troubleshooting) if you're having installation issues.
|
|
|
|
> **(Optional)** If you want to use [**Frame Processors**](/docs/guides/frame-processors), you need to install [**react-native-reanimated**](https://github.com/software-mansion/react-native-reanimated) 2.2.0 or higher.
|
|
|
|
## Updating manifests
|
|
|
|
To use a Camera or Microphone you must first specify that your app requires camera and microphone permissions.
|
|
|
|
### iOS
|
|
|
|
Open your project's `Info.plist` and add the following lines inside the outermost `<dict>` tag:
|
|
|
|
```xml
|
|
<key>NSCameraUsageDescription</key>
|
|
<string>$(PRODUCT_NAME) needs access to your Camera to record videos and capture photos.</string>
|
|
<key>NSMicrophoneUsageDescription</key>
|
|
<string>$(PRODUCT_NAME) needs access to your Microphone to record videos with audio.</string>
|
|
```
|
|
|
|
### Android
|
|
|
|
Open your project's `AndroidManifest.xml` and add the following lines inside the `<manifest>` tag:
|
|
|
|
```xml
|
|
<uses-permission android:name="android.permission.CAMERA" />
|
|
<uses-permission android:name="android.permission.RECORD_AUDIO" />
|
|
```
|
|
|
|
## Getting/Requesting Permissions
|
|
|
|
VisionCamera also provides functions to easily get and request Microphone and Camera permissions.
|
|
|
|
### Getting Permissions
|
|
|
|
Simply use the **get** functions to find out if a user has granted or denied permission before:
|
|
|
|
```ts
|
|
const cameraPermission = await Camera.getCameraPermissionStatus()
|
|
const microphonePermission = await Camera.getMicrophonePermissionStatus()
|
|
```
|
|
|
|
A permission status can have the following values:
|
|
|
|
* `authorized`: Your app is authorized to use said permission. Continue with [**using the `<Camera>` view**](#use-the-camera-view).
|
|
* `not-determined`: Your app has not yet requested permission from the user. [Continue by calling the **request** functions.](#requesting-permissions)
|
|
* `denied`: Your app has already requested permissions from the user, but was explicitly denied. You cannot use the **request** functions again, but you can use the [`Linking` API](https://reactnative.dev/docs/linking#opensettings) to redirect the user to the Settings App where he can manually grant the permission.
|
|
* `restricted`: (iOS only) Your app cannot use the Camera or Microphone because that functionality has been restricted, possibly due to active restrictions such as parental controls being in place.
|
|
|
|
### Requesting Permissions
|
|
|
|
Use the **request** functions to prompt the user to give your app permission to use the Camera or Microphone.
|
|
|
|
:::note
|
|
The **request** functions only have effect if the current permission status is `not-determined`.
|
|
:::
|
|
|
|
```ts
|
|
const newCameraPermission = await Camera.requestCameraPermission()
|
|
const newMicrophonePermission = await Camera.requestMicrophonePermission()
|
|
```
|
|
|
|
The permission request status can have the following values:
|
|
|
|
* `authorized`: Your app is authorized to use said permission. Continue with [**using the `<Camera>` view**](#use-the-camera-view).
|
|
* `denied`: The user explicitly denied the permission request alert. You cannot use the **request** functions again, but you can use the [`Linking` API](https://reactnative.dev/docs/linking#opensettings) to redirect the user to the Settings App where he can manually grant the permission.
|
|
* `restricted`: (iOS only) Your app cannot use the Camera or Microphone because that functionality has been restricted, possibly due to active restrictions such as parental controls being in place.
|
|
|
|
## Use the `<Camera>` view
|
|
|
|
If your app has permission to use the Camera and Microphone, simply use the [`useCameraDevices(...)`](/docs/api/modules/hooks_usecameradevices) hook to get a Camera device (see [Camera Devices](/docs/guides/devices)) and mount the `<Camera>` view:
|
|
|
|
```tsx
|
|
function App() {
|
|
const devices = useCameraDevices()
|
|
const device = devices.back
|
|
|
|
if (device == null) return <LoadingView />
|
|
return (
|
|
<Camera
|
|
style={StyleSheet.absoluteFill}
|
|
device={device}
|
|
isActive={true}
|
|
/>
|
|
)
|
|
}
|
|
```
|
|
|
|
<br />
|
|
|
|
#### 🎉 Hooray! You're ready to learn about [Camera Devices](/docs/guides/devices)!
|