222 lines
6.6 KiB
Plaintext
222 lines
6.6 KiB
Plaintext
---
|
|
id: setup
|
|
title: Getting Started
|
|
sidebar_label: Getting Started
|
|
slug: /guides
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs'
|
|
import TabItem from '@theme/TabItem'
|
|
import useBaseUrl from '@docusaurus/useBaseUrl'
|
|
|
|
<div class="image-container">
|
|
<img 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:
|
|
|
|
<Tabs
|
|
groupId="environment"
|
|
defaultValue="rn"
|
|
values={[
|
|
{label: 'React Native', value: 'rn'},
|
|
{label: 'Expo', value: 'expo'}
|
|
]}>
|
|
<TabItem value="rn">
|
|
|
|
```bash
|
|
npm i react-native-vision-camera
|
|
npx pod-install
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="expo">
|
|
|
|
```bash
|
|
expo install react-native-vision-camera
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
VisionCamera requires **iOS 12 or higher**, and **Android-SDK version 26 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-worklets-core](https://github.com/margelo/react-native-worklets-core) 0.2.0 or higher.
|
|
|
|
## Updating manifests
|
|
|
|
To use the Camera or Microphone you must first specify that your app requires camera and microphone permissions.
|
|
|
|
<Tabs
|
|
groupId="environment"
|
|
defaultValue="rn"
|
|
values={[
|
|
{label: 'React Native', value: 'rn'},
|
|
{label: 'Expo', value: 'expo'}
|
|
]}>
|
|
<TabItem value="rn">
|
|
|
|
### 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.</string>
|
|
|
|
<!-- optionally, if you want to record audio: -->
|
|
<key>NSMicrophoneUsageDescription</key>
|
|
<string>$(PRODUCT_NAME) needs access to your Microphone.</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" />
|
|
|
|
<!-- optionally, if you want to record audio: -->
|
|
<uses-permission android:name="android.permission.RECORD_AUDIO" />
|
|
```
|
|
|
|
</TabItem>
|
|
<TabItem value="expo">
|
|
|
|
### Managed Expo
|
|
|
|
Add the VisionCamera plugin to your Expo config (`app.json`, `app.config.json` or `app.config.js`):
|
|
|
|
```json
|
|
{
|
|
"name": "my app",
|
|
"plugins": [
|
|
[
|
|
"react-native-vision-camera",
|
|
{
|
|
"cameraPermissionText": "$(PRODUCT_NAME) needs access to your Camera.",
|
|
|
|
// optionally, if you want to record audio:
|
|
"enableMicrophonePermission": true,
|
|
"microphonePermissionText": "$(PRODUCT_NAME) needs access to your Microphone."
|
|
}
|
|
]
|
|
]
|
|
}
|
|
```
|
|
|
|
Finally, compile the mods:
|
|
|
|
```bash
|
|
expo prebuild
|
|
```
|
|
|
|
To apply the changes, build a new binary with EAS:
|
|
|
|
```bash
|
|
eas build
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
## Getting/Requesting Permissions
|
|
|
|
Next, ask the user for Camera or Microphone permissions using the Permissions API:
|
|
|
|
|
|
<Tabs
|
|
groupId="component-style"
|
|
defaultValue="hooks"
|
|
values={[
|
|
{label: 'Hooks API', value: 'hooks'},
|
|
{label: 'Imperative API', value: 'imperative'}
|
|
]}>
|
|
<TabItem value="hooks">
|
|
|
|
Simply use the `useCameraPermission` or `useMicrophonePermission` hook:
|
|
|
|
```ts
|
|
const { hasPermission, requestPermission } = useCameraPermission()
|
|
```
|
|
|
|
And if you want to use the microphone:
|
|
|
|
```ts
|
|
const { hasPermission, requestPermission } = useMicrophonePermission()
|
|
```
|
|
|
|
There could be three states to this:
|
|
|
|
1. First time opening the app, `hasPermission` is false. Call `requestPermission()` now.
|
|
2. User already granted permission, `hasPermission` is true. Continue with [using the `<Camera>` view](#use-the-camera-view).
|
|
3. User explicitly denied permission, `hasPermission` is false and `requestPermission()` will return false. Tell the user that he needs to grant Camera Permission, potentially by using the [`Linking` API](https://reactnative.dev/docs/linking#opensettings) to open the App Settings.
|
|
|
|
</TabItem>
|
|
<TabItem value="imperative">
|
|
|
|
|
|
### 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:
|
|
|
|
* `granted`: 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`: 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:
|
|
|
|
* `granted`: 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`: 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.
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
## Use the `<Camera>` view
|
|
|
|
If your app has permission to use the Camera and Microphone, simply use the [`useCameraDevice(...)`](/docs/api#usecameradevice) hook to get a Camera device (see [Camera Devices](/docs/guides/devices)) and mount the `<Camera>` view:
|
|
|
|
```tsx
|
|
function App() {
|
|
const device = useCameraDevice('back')
|
|
|
|
if (device == null) return <NoCameraDeviceError />
|
|
return (
|
|
<Camera
|
|
style={StyleSheet.absoluteFill}
|
|
device={device}
|
|
isActive={true}
|
|
/>
|
|
)
|
|
}
|
|
```
|
|
|
|
<br />
|
|
|
|
#### 🎉 Hooray! You're ready to learn about [Camera Devices](/docs/guides/devices)!
|