Docs/capturing (#70)

* Add capturing base doc

* Pin RNN version where Modal without animation works

* Add docs for Taking Photos/Recording Videos

docs/docs/CAPTURING.mdx

@@ -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)

docs/docs/FORMATS.mdx

@@ -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)

docs/sidebars.js

@@ -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'),
   },
 };

example/ios/Podfile.lock

@@ -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.8.4-snapshot.1439)
-  - ReactNativeNavigation/Core (7.11.3):
+  - 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

example/ios/VisionCameraExample.xcodeproj/project.pbxproj

@@ -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; };
+		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>"; };
-		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>"; };
+		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 */,
+				D82DF6231A53E8DE9A87D6B0 /* Pods-VisionCameraExample.debug.xcconfig */,
-				E00ACF0FDA8BF921659E2F9A /* Pods-VisionCameraExample.release.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 */,
+				3F377A9A5593490EC3E1131F /* [CP] Embed Pods Frameworks */,
-				7C9C6002E6AC8EB35F9BF291 /* [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 */ = {
+		D6355D2C1A82AA568E4170C4 /* [CP] Copy Pods Resources */ = {
-			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 */ = {
 			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;

example/package.json

@@ -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",

example/yarn.lock

@@ -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:
+react-native-navigation@7.8.4-snapshot.1439:
-  version "7.11.3"
+  version "7.8.4-snapshot.1439"
-  resolved "https://registry.yarnpkg.com/react-native-navigation/-/react-native-navigation-7.11.3.tgz#ea0c8553bedfbded4288561d5f0b4b6dce26affe"
+  resolved "https://registry.yarnpkg.com/react-native-navigation/-/react-native-navigation-7.8.4-snapshot.1439.tgz#34d124b16ec8a8a0c310a368286ddbfc1d5f95e9"
-  integrity sha512-3cCtHwa2Tqc5Uk4QFSfocfOgOSKcRgfVlZ1m40oFUGV8yx9TaqA9BlPyQnWtaaPz8lHgKA3pkUmXQpFq0zOQzw==
+  integrity sha512-lB4CjXMFZC/l/EfZLLHS60YZuli1T5by4krBtKMagAqUj7v4HcBTdftQch71DA4sUDnUPwyaPjfDfO7MHCmRng==
   dependencies:
     hoist-non-react-statics "3.x.x"
     lodash "4.17.x"