Create SETUP.md

README.md

@@ -1,6 +1,7 @@
 <table>
 <tr>
 <th>README</th>
+<th><a href="./docs/SETUP.md">SETUP</a></th>
 <th><a href="./docs/DEVICES.md">DEVICES</a></th>
 <th><a href="./docs/FORMATS.md">FORMATS</a></th>
 <th><a href="./docs/FRAME_PROCESSORS.md">FRAME_PROCESSORS</a></th>
@@ -71,4 +72,4 @@ function App() {
 
 <br />
 
-#### 🚀 Get started by learning about [Devices](./docs/DEVICES.md)!
+#### 🚀 Get started by [setting up permissions](./docs/SETUP.md)!

docs/DEVICES.md

@@ -1,6 +1,7 @@
 <table>
 <tr>
 <th><a href="../README.md">README</a></th>
+<th><a href="./SETUP.md">SETUP</a></th>
 <th>DEVICES</th>
 <th><a href="./FORMATS.md">FORMATS</a></th>
 <th><a href="./FRAME_PROCESSORS.md">FRAME_PROCESSORS</a></th>
@@ -60,10 +61,6 @@ The `CameraDevice` type also contains other useful information describing a came
 
 Make sure to carefully filter out unneeded camera devices, since not every phone supports all camera device types. Some phones don't even have front-cameras.
 
-<div>
-  <img align="right" width="35%" src="../img/11_back.png">
-</div>
-
 ### `useCameraDevices` hook
 
 The react-native-vision-camera library provides a hook to make camera device selection a lot easier.

docs/ERRORS.md

@@ -1,6 +1,7 @@
 <table>
 <tr>
 <th><a href="../README.md">README</a></th>
+<th><a href="./SETUP.md">SETUP</a></th>
 <th><a href="./DEVICES.md">DEVICES</a></th>
 <th><a href="./FORMATS.md">FORMATS</a></th>
 <th><a href="./FRAME_PROCESSORS.md">FRAME_PROCESSORS</a></th>

docs/FORMATS.md

@@ -1,6 +1,7 @@
 <table>
 <tr>
 <th><a href="../README.md">README</a></th>
+<th><a href="./SETUP.md">SETUP</a></th>
 <th><a href="./DEVICES.md">DEVICES</a></th>
 <th>FORMATS</th>
 <th><a href="./FRAME_PROCESSORS.md">FRAME_PROCESSORS</a></th>

docs/FRAME_PROCESSORS.md

@@ -1,6 +1,7 @@
 <table>
 <tr>
 <th><a href="../README.md">README</a></th>
+<th><a href="./SETUP.md">SETUP</a></th>
 <th><a href="./DEVICES.md">DEVICES</a></th>
 <th><a href="./FORMATS.md">FORMATS</a></th>
 <th>FRAME_PROCESSORS</th>

docs/SETUP.md

@@ -0,0 +1,92 @@
+<table>
+<tr>
+<th><a href="../README.md">README</a></th>
+<th>SETUP</th>
+<th><a href="./DEVICES.md">DEVICES</a></th>
+<th><a href="./FORMATS.md">FORMATS</a></th>
+<th><a href="./FRAME_PROCESSORS.md">FRAME_PROCESSORS</a></th>
+<th><a href="./ANIMATED.md">ANIMATED</a></th>
+<th><a href="./ERRORS.md">ERRORS</a></th>
+</tr>
+</table>
+
+<br/>
+
+<h1 align="center">Setup</h1>
+
+<div>
+  <img align="right" width="35%" src="../img/11_back.png">
+</div>
+
+## Installing the library
+
+Install react-native-vision-camera through npm:
+
+```sh
+npm i react-native-vision-camera
+npx pod-install
+```
+
+## 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" />
+```
+
+## Permissions
+
+react-native-vision-camera 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 mounting 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: You can only use **request** functions 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 mounting the `<Camera>` view.
+* `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.
+
+<br />
+
+#### 🎉 Hooray! You're ready to learn about [devices](./DEVICES.md)!