Move Guides to docs/guides directory (#96)
* Move Guides to docs/guides directory * Rename sidebar * Fix api/ links * Update SETUP.mdx
This commit is contained in:
Marc Rousavy
GitHub
32
docs/docs/INDEX.mdx
Normal file
32
docs/docs/INDEX.mdx
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
id: index
|
||||
title: Welcome to the VisionCamera documentation!
|
||||
sidebar_label: Welcome
|
||||
slug: /
|
||||
---
|
||||
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
<div>
|
||||
<img align="right" width="283" src={useBaseUrl("img/example_intro.png")} />
|
||||
</div>
|
||||
|
||||
**Quick Links**
|
||||
|
||||
* [Guides](./guides/)
|
||||
* [API](./api/)
|
||||
* [Example](https://github.com/cuvent/react-native-vision-camera/tree/main/example)
|
||||
|
||||
<a href="https://cuvent.com"><img height="40" src={useBaseUrl("img/cuvent-logo-text.svg")} /></a>
|
||||
<br/>
|
||||
<a align="center" href="https://github.com/mrousavy?tab=followers">
|
||||
<img src="https://img.shields.io/github/followers/mrousavy?label=Follow%20%40mrousavy&style=social" />
|
||||
</a>
|
||||
<br />
|
||||
<a align="center" href="https://twitter.com/mrousavy">
|
||||
<img src="https://img.shields.io/twitter/follow/mrousavy?label=Follow%20%40mrousavy&style=social" />
|
||||
</a>
|
||||
<br/>
|
||||
<a align="center" href="https://twitter.com/cuventtech">
|
||||
<img src="https://img.shields.io/twitter/follow/cuventtech?label=Follow%20%40cuventtech&style=social" />
|
||||
</a>
|
||||
@@ -40,7 +40,7 @@ The most important actions are:
|
||||
|
||||
## Taking Photos
|
||||
|
||||
To take a photo, simply use the Camera's [`takePhoto(...)`](api/classes/camera.camera-1#takephoto) function:
|
||||
To take a photo, simply use the Camera's [`takePhoto(...)`](../api/classes/camera.camera-1#takephoto) function:
|
||||
|
||||
```ts
|
||||
const photo = await camera.current.takePhoto({
|
||||
@@ -48,9 +48,9 @@ const photo = await camera.current.takePhoto({
|
||||
})
|
||||
```
|
||||
|
||||
You can customize capture options such as [automatic red-eye reduction](api/interfaces/photofile.takephotooptions#enableautoredeyereduction), [automatic image stabilization](api/interfaces/photofile.takephotooptions#enableautostabilization), [combining images from constituent physical camera devices](api/interfaces/photofile.takephotooptions#enablevirtualdevicefusion) to create a single high quality fused image, [enable flash](api/interfaces/photofile.takephotooptions#flash), [prioritize speed over quality](api/interfaces/photofile.takephotooptions#qualityprioritization) and more using the `options` parameter. (See [`TakePhotoOptions`](api/interfaces/photofile.takephotooptions))
|
||||
You can customize capture options such as [automatic red-eye reduction](../api/interfaces/photofile.takephotooptions#enableautoredeyereduction), [automatic image stabilization](../api/interfaces/photofile.takephotooptions#enableautostabilization), [combining images from constituent physical camera devices](../api/interfaces/photofile.takephotooptions#enablevirtualdevicefusion) to create a single high quality fused image, [enable flash](../api/interfaces/photofile.takephotooptions#flash), [prioritize speed over quality](../api/interfaces/photofile.takephotooptions#qualityprioritization) and more using the `options` parameter. (See [`TakePhotoOptions`](../api/interfaces/photofile.takephotooptions))
|
||||
|
||||
This function returns a [`PhotoFile`](api/interfaces/photofile.photofile-1) which contains a [`path`](api/interfaces/photofile.photofile-1#path) property you can display in your App using an `<Image>` or `<FastImage>`.
|
||||
This function returns a [`PhotoFile`](../api/interfaces/photofile.photofile-1) which contains a [`path`](../api/interfaces/photofile.photofile-1#path) property you can display in your App using an `<Image>` or `<FastImage>`.
|
||||
|
||||
:::note
|
||||
This will change with the upcoming React Native Re-Architecture, so that instead of writing a temporary file which you have to read again, this function will immediately return an Image HostObject on which you can directly interop with the underlying `UIImage`/`Bitmap` for faster image capture. See [issue #69](https://github.com/cuvent/react-native-vision-camera/issues/69)
|
||||
@@ -58,7 +58,7 @@ This will change with the upcoming React Native Re-Architecture, so that instead
|
||||
|
||||
### Taking Snapshots
|
||||
|
||||
Compared to iOS, Cameras on Android tend to be slower in image capture. If you care about speed, you can use the Camera's [`takeSnapshot(...)`](api/classes/camera.camera-1#takesnapshot) function (Android only) which simply takes a snapshot of the Camera View instead of actually taking a photo through the Camera lens.
|
||||
Compared to iOS, Cameras on Android tend to be slower in image capture. If you care about speed, you can use the Camera's [`takeSnapshot(...)`](../api/classes/camera.camera-1#takesnapshot) function (Android only) which simply takes a snapshot of the Camera View instead of actually taking a photo through the Camera lens.
|
||||
|
||||
```ts
|
||||
const snapshot = await camera.current.takeSnapshot({
|
||||
@@ -73,7 +73,7 @@ While taking Snapshots is faster than taking Photos, the resulting image has way
|
||||
|
||||
## Recording Videos
|
||||
|
||||
To start a video recording, use the Camera's [`startRecording(...)`](api/classes/camera.camera-1#startrecording) function:
|
||||
To start a video recording, use the Camera's [`startRecording(...)`](../api/classes/camera.camera-1#startrecording) function:
|
||||
|
||||
```ts
|
||||
camera.current.startRecording({
|
||||
@@ -83,29 +83,29 @@ camera.current.startRecording({
|
||||
})
|
||||
```
|
||||
|
||||
For any error that occured _while recording the video_, the `onRecordingError` callback will be invoked with a [`CaptureError`](api/classes/cameraerror.cameracaptureerror) and the recording is therefore cancelled.
|
||||
For any error that occured _while recording the video_, the `onRecordingError` callback will be invoked with a [`CaptureError`](../api/classes/cameraerror.cameracaptureerror) and the recording is therefore cancelled.
|
||||
|
||||
:::note
|
||||
Due to limitations of the React Native Bridge, this function can not be awaited. This means, any errors thrown while trying to start the recording (e.g. `capture/recording-in-progress`) can only be caught synchronously (`isBlockingSynchronousMethod`). This will change with the upcoming React Native Re-Architecture.
|
||||
:::
|
||||
|
||||
To stop the video recording, you can call [`stopRecording(...)`](api/classes/camera.camera-1#stoprecording):
|
||||
To stop the video recording, you can call [`stopRecording(...)`](../api/classes/camera.camera-1#stoprecording):
|
||||
|
||||
```ts
|
||||
await camera.current.stopRecording()
|
||||
```
|
||||
|
||||
Once a recording has been stopped, the `onRecordingFinished` callback passed to the `startRecording` function will be invoked with a [`VideoFile`](api/interfaces/videofile.videofile-1) which you can then use to display in a [`<Video>`](https://github.com/react-native-video/react-native-video) component.
|
||||
Once a recording has been stopped, the `onRecordingFinished` callback passed to the `startRecording` function will be invoked with a [`VideoFile`](../api/interfaces/videofile.videofile-1) which you can then use to display in a [`<Video>`](https://github.com/react-native-video/react-native-video) component.
|
||||
|
||||
## Focussing
|
||||
|
||||
To focus the camera to a specific point, simply use the Camera's [`focus(...)`](api/classes/camera.camera-1#focus) function:
|
||||
To focus the camera to a specific point, simply use the Camera's [`focus(...)`](../api/classes/camera.camera-1#focus) function:
|
||||
|
||||
```ts
|
||||
await camera.current.focus({ x: tapEvent.x, y: tapEvent.y })
|
||||
```
|
||||
|
||||
The focus function expects a [`Point`](api/interfaces/point.point-1) parameter which represents the location relative to the Camera View where you want to focus the Camera to. If you use react-native-gesture-handler, this will consist of the [`x`](https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/tap-gh#x) and [`y`](https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/tap-gh#y) properties of the tap event payload.
|
||||
The focus function expects a [`Point`](../api/interfaces/point.point-1) parameter which represents the location relative to the Camera View where you want to focus the Camera to. If you use react-native-gesture-handler, this will consist of the [`x`](https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/tap-gh#x) and [`y`](https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/tap-gh#y) properties of the tap event payload.
|
||||
|
||||
So for example, `{ x: 0, y: 0 }` will focus to the upper left corner, while `{ x: CAM_WIDTH, y: CAM_HEIGHT }` will focus to the bottom right corner.
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
id: setup
|
||||
title: Getting Started
|
||||
sidebar_label: Getting Started
|
||||
slug: /
|
||||
slug: /guides
|
||||
---
|
||||
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
@@ -51,7 +51,7 @@ Also, make sure you're using Swift 5.2 or above:
|
||||
2. If the `LIBRARY_SEARCH_PATH` value is set, make sure there is no explicit reference to Swift-5.0. If there is, remove it. See [this StackOverflow answer](https://stackoverflow.com/a/66281846/1123156).
|
||||
3. If the `SWIFT_VERSION` value is set, make sure it is set to `5.2` or higher.
|
||||
|
||||
> See [Troubleshooting](troubleshooting) if you're having problems
|
||||
> See [Troubleshooting](guides/troubleshooting) if you're having problems
|
||||
|
||||
### Android
|
||||
|
||||
@@ -75,7 +75,7 @@ compileSdkVersion = 30
|
||||
targetSdkVersion = 30
|
||||
```
|
||||
|
||||
> See [Troubleshooting](troubleshooting) if you're having problems
|
||||
> See [Troubleshooting](guides/troubleshooting) if you're having problems
|
||||
|
||||
## Permissions
|
||||
|
||||
@@ -117,4 +117,4 @@ The permission request status can have the following values:
|
||||
|
||||
<br />
|
||||
|
||||
#### 🎉 Hooray! You're ready to learn about [Camera Devices](devices)!
|
||||
#### 🎉 Hooray! You're ready to learn about [Camera Devices](guides/devices)!
|
||||
Reference in New Issue
Block a user