Docs/capturing (#70)

* Add capturing base doc

* Pin RNN version where Modal without animation works

* Add docs for Taking Photos/Recording Videos
This commit is contained in:
Marc Rousavy 2021-03-17 15:17:05 +01:00 committed by GitHub
parent 50cabe9306
commit b0069c23e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 155 additions and 46 deletions

109
docs/docs/CAPTURING.mdx Normal file
View File

@ -0,0 +1,109 @@
---
id: capturing
title: Taking Photos/Recording Videos
sidebar_label: Taking Photos/Recording Videos
---
import useBaseUrl from '@docusaurus/useBaseUrl';
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="283" height="535" style={{ float: 'right' }}>
<image href={useBaseUrl("img/demo_capture.gif")} x="18" y="33" width="247" height="469" />
<image href={useBaseUrl("img/frame.png")} width="283" height="535" />
</svg>
</div>
## Camera Actions
The Camera provides certain actions using member functions which are available by using a [ref object](https://reactjs.org/docs/refs-and-the-dom.html):
```tsx
function App() {
const camera = useRef<Camera>(null)
// ...
return (
<Camera
ref={camera}
{...cameraProps}
/>
)
}
```
The most important actions are:
* [Taking Photos](#taking-photos)
- [Taking Snapshots](#taking-snapshots)
* [Recording Videos](#recording-videos)
* [Focussing](#focussing)
## Taking Photos
To take a photo, simply use the Camera's [`takePhoto(...)`](api/classes/camera.camera-1#takephoto) function:
```ts
const photo = await camera.current.takePhoto({
flash: 'on'
})
```
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>`.
:::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)
:::
### 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.
:::note
While taking Snapshots is faster than taking Photos, the resulting image has way lower quality. You can combine both functions to create a Snapshot for presenting to the User at first, then deliver the actual Photo afterwards.
:::
## Recording Videos
To start a video recording, use the Camera's [`startRecording(...)`](api/classes/camera.camera-1#startrecording) function:
```ts
camera.current.startRecording({
flash: 'on',
onRecordingFinished: (video) => console.log(video),
onRecordingError: (error) => console.error(error),
})
```
For any error that occured _while recording the video_, the `onRecordingError` callback will be invoked with a [`CaptureError`](api/classes/captureerror-1) 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):
```ts
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.
## Focussing
To focus the camera to a specific point, simply use the Camera's [`focus(...)`](api/classes/camera.camera-1#focus) function:
```ts
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.
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.
Focussing adjusts auto-focus (AF) and auto-exposure (AE).
<br />
#### 🚀 Next section: [Frame Processors](frame-processors)

View File

@ -160,4 +160,4 @@ Other props that depend on the `format`:
<br />
#### 🚀 Next section: [Frame Processors](./frame-processors)
#### 🚀 Next section: [Taking Photos/Recording Videos](./capturing)

View File

@ -1,6 +1,6 @@
module.exports = {
someSidebar: {
Guides: ['setup', 'devices', 'formats', 'frame-processors', 'animated', 'errors', 'troubleshooting'],
Guides: ['setup', 'devices', 'formats', 'capturing', 'frame-processors', 'animated', 'errors', 'troubleshooting'],
API: require('./typedoc-sidebar.js'),
},
};

BIN
docs/static/img/demo_capture.gif vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 MiB

View File

@ -307,12 +307,12 @@ PODS:
- React-Core (= 0.63.4)
- React-cxxreact (= 0.63.4)
- React-jsi (= 0.63.4)
- ReactNativeNavigation (7.11.3):
- ReactNativeNavigation (7.8.4-snapshot.1439):
- React-Core
- React-RCTImage
- React-RCTText
- ReactNativeNavigation/Core (= 7.11.3)
- ReactNativeNavigation/Core (7.11.3):
- ReactNativeNavigation/Core (= 7.8.4-snapshot.1439)
- ReactNativeNavigation/Core (7.8.4-snapshot.1439):
- React-Core
- React-RCTImage
- React-RCTText
@ -506,7 +506,7 @@ EXTERNAL SOURCES:
SPEC CHECKSUMS:
boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
DoubleConversion: cde416483dac037923206447da6e1454df403714
FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
Flipper: c1ad50344bffdce628b1906b48f6e7cd06724236
@ -517,7 +517,7 @@ SPEC CHECKSUMS:
Flipper-RSocket: 602921fee03edacf18f5d6f3d3594ba477f456e5
FlipperKit: f42987ea58737ac0fb3fbc38f8e703452ba56940
Folly: b73c3869541e86821df3c387eb0af5f65addfab4
glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
RCTRequired: 082f10cd3f905d6c124597fd1c14f6f2655ff65e
@ -545,7 +545,7 @@ SPEC CHECKSUMS:
React-RCTText: 5c51df3f08cb9dedc6e790161195d12bac06101c
React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d
ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b
ReactNativeNavigation: 906b631a6847c26cacf5cb3791566f1fe205c65c
ReactNativeNavigation: 63321d37e8172bdcc1fbb93e77cffc74a0ba6d20
RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
RNReanimated: 5231286440b796e09df3bfa5c1b12b02bfe07664
RNStaticSafeAreaInsets: 6103cf09647fa427186d30f67b0f5163c1ae8252

View File

@ -10,7 +10,7 @@
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
4C39C56BAD484C67AA576FFA /* libPods-VisionCameraExample.a in Frameworks */ = {isa = PBXBuildFile; fileRef = CA3E69C5B9553B26FBA2DF04 /* libPods-VisionCameraExample.a */; };
1418D3321C8725E6B5FC766C /* libPods-VisionCameraExample.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7C172C3576DFA1EFFC0357F8 /* libPods-VisionCameraExample.a */; };
81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
B8F0E10825E0199F00586F16 /* File.swift in Sources */ = {isa = PBXBuildFile; fileRef = B8F0E10725E0199F00586F16 /* File.swift */; };
/* End PBXBuildFile section */
@ -23,12 +23,12 @@
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = VisionCameraExample/Images.xcassets; sourceTree = "<group>"; };
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = VisionCameraExample/Info.plist; sourceTree = "<group>"; };
13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = VisionCameraExample/main.m; sourceTree = "<group>"; };
47F7ED3B7971BE374F7B8635 /* Pods-VisionCameraExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-VisionCameraExample.debug.xcconfig"; path = "Target Support Files/Pods-VisionCameraExample/Pods-VisionCameraExample.debug.xcconfig"; sourceTree = "<group>"; };
7C172C3576DFA1EFFC0357F8 /* libPods-VisionCameraExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-VisionCameraExample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = VisionCameraExample/LaunchScreen.storyboard; sourceTree = "<group>"; };
B8F0E10625E0199F00586F16 /* VisionCameraExample-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "VisionCameraExample-Bridging-Header.h"; sourceTree = "<group>"; };
B8F0E10725E0199F00586F16 /* File.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = File.swift; sourceTree = "<group>"; };
CA3E69C5B9553B26FBA2DF04 /* libPods-VisionCameraExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-VisionCameraExample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
E00ACF0FDA8BF921659E2F9A /* Pods-VisionCameraExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-VisionCameraExample.release.xcconfig"; path = "Target Support Files/Pods-VisionCameraExample/Pods-VisionCameraExample.release.xcconfig"; sourceTree = "<group>"; };
D82DF6231A53E8DE9A87D6B0 /* Pods-VisionCameraExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-VisionCameraExample.debug.xcconfig"; path = "Target Support Files/Pods-VisionCameraExample/Pods-VisionCameraExample.debug.xcconfig"; sourceTree = "<group>"; };
EC2ABEB83E509E61726A8E69 /* Pods-VisionCameraExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-VisionCameraExample.release.xcconfig"; path = "Target Support Files/Pods-VisionCameraExample/Pods-VisionCameraExample.release.xcconfig"; sourceTree = "<group>"; };
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
/* End PBXFileReference section */
@ -38,7 +38,7 @@
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
4C39C56BAD484C67AA576FFA /* libPods-VisionCameraExample.a in Frameworks */,
1418D3321C8725E6B5FC766C /* libPods-VisionCameraExample.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@ -66,7 +66,7 @@
children = (
ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
ED2971642150620600B7C4FE /* JavaScriptCore.framework */,
CA3E69C5B9553B26FBA2DF04 /* libPods-VisionCameraExample.a */,
7C172C3576DFA1EFFC0357F8 /* libPods-VisionCameraExample.a */,
);
name = Frameworks;
sourceTree = "<group>";
@ -74,8 +74,8 @@
6B9684456A2045ADE5A6E47E /* Pods */ = {
isa = PBXGroup;
children = (
47F7ED3B7971BE374F7B8635 /* Pods-VisionCameraExample.debug.xcconfig */,
E00ACF0FDA8BF921659E2F9A /* Pods-VisionCameraExample.release.xcconfig */,
D82DF6231A53E8DE9A87D6B0 /* Pods-VisionCameraExample.debug.xcconfig */,
EC2ABEB83E509E61726A8E69 /* Pods-VisionCameraExample.release.xcconfig */,
);
path = Pods;
sourceTree = "<group>";
@ -116,14 +116,14 @@
isa = PBXNativeTarget;
buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "VisionCameraExample" */;
buildPhases = (
4F0A6FC082772762E3E4C96C /* [CP] Check Pods Manifest.lock */,
8CCB88D3394D79DC3E33EBBD /* [CP] Check Pods Manifest.lock */,
FD10A7F022414F080027D42C /* Start Packager */,
13B07F871A680F5B00A75B9A /* Sources */,
13B07F8C1A680F5B00A75B9A /* Frameworks */,
13B07F8E1A680F5B00A75B9A /* Resources */,
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
C1D60D28B925C94BD88E79D7 /* [CP] Copy Pods Resources */,
7C9C6002E6AC8EB35F9BF291 /* [CP] Embed Pods Frameworks */,
3F377A9A5593490EC3E1131F /* [CP] Embed Pods Frameworks */,
D6355D2C1A82AA568E4170C4 /* [CP] Copy Pods Resources */,
);
buildRules = (
);
@ -193,7 +193,25 @@
shellPath = /bin/sh;
shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
};
4F0A6FC082772762E3E4C96C /* [CP] Check Pods Manifest.lock */ = {
3F377A9A5593490EC3E1131F /* [CP] Embed Pods Frameworks */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-VisionCameraExample/Pods-VisionCameraExample-frameworks.sh",
"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
);
name = "[CP] Embed Pods Frameworks";
outputPaths = (
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-VisionCameraExample/Pods-VisionCameraExample-frameworks.sh\"\n";
showEnvVarsInLog = 0;
};
8CCB88D3394D79DC3E33EBBD /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
@ -215,25 +233,7 @@
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
7C9C6002E6AC8EB35F9BF291 /* [CP] Embed Pods Frameworks */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-VisionCameraExample/Pods-VisionCameraExample-frameworks.sh",
"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
);
name = "[CP] Embed Pods Frameworks";
outputPaths = (
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-VisionCameraExample/Pods-VisionCameraExample-frameworks.sh\"\n";
showEnvVarsInLog = 0;
};
C1D60D28B925C94BD88E79D7 /* [CP] Copy Pods Resources */ = {
D6355D2C1A82AA568E4170C4 /* [CP] Copy Pods Resources */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
@ -320,7 +320,7 @@
/* Begin XCBuildConfiguration section */
13B07F941A680F5B00A75B9A /* Debug */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = 47F7ED3B7971BE374F7B8635 /* Pods-VisionCameraExample.debug.xcconfig */;
baseConfigurationReference = D82DF6231A53E8DE9A87D6B0 /* Pods-VisionCameraExample.debug.xcconfig */;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
@ -345,7 +345,7 @@
};
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = E00ACF0FDA8BF921659E2F9A /* Pods-VisionCameraExample.release.xcconfig */;
baseConfigurationReference = EC2ABEB83E509E61726A8E69 /* Pods-VisionCameraExample.release.xcconfig */;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;

View File

@ -17,7 +17,7 @@
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-gesture-handler": "^1.10.3",
"react-native-navigation": "^7.11.3",
"react-native-navigation": "7.8.4-snapshot.1439",
"react-native-reanimated": "^2.0.0",
"react-native-static-safe-area-insets": "^2.1.1",
"react-native-vector-icons": "^8.0.0",

View File

@ -4565,10 +4565,10 @@ react-native-gesture-handler@^1.10.3:
invariant "^2.2.4"
prop-types "^15.7.2"
react-native-navigation@^7.11.3:
version "7.11.3"
resolved "https://registry.yarnpkg.com/react-native-navigation/-/react-native-navigation-7.11.3.tgz#ea0c8553bedfbded4288561d5f0b4b6dce26affe"
integrity sha512-3cCtHwa2Tqc5Uk4QFSfocfOgOSKcRgfVlZ1m40oFUGV8yx9TaqA9BlPyQnWtaaPz8lHgKA3pkUmXQpFq0zOQzw==
react-native-navigation@7.8.4-snapshot.1439:
version "7.8.4-snapshot.1439"
resolved "https://registry.yarnpkg.com/react-native-navigation/-/react-native-navigation-7.8.4-snapshot.1439.tgz#34d124b16ec8a8a0c310a368286ddbfc1d5f95e9"
integrity sha512-lB4CjXMFZC/l/EfZLLHS60YZuli1T5by4krBtKMagAqUj7v4HcBTdftQch71DA4sUDnUPwyaPjfDfO7MHCmRng==
dependencies:
hoist-non-react-statics "3.x.x"
lodash "4.17.x"