From b0069c23e13b137cc34330b3a5d7b5f7a9727cc7 Mon Sep 17 00:00:00 2001 From: Marc Rousavy Date: Wed, 17 Mar 2021 15:17:05 +0100 Subject: [PATCH] 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 | 109 ++++++++++++++++++ docs/docs/FORMATS.mdx | 2 +- docs/sidebars.js | 2 +- docs/static/img/demo_capture.gif | Bin 0 -> 4353000 bytes example/ios/Podfile.lock | 12 +- .../project.pbxproj | 66 +++++------ example/package.json | 2 +- example/yarn.lock | 8 +- 8 files changed, 155 insertions(+), 46 deletions(-) create mode 100644 docs/docs/CAPTURING.mdx create mode 100644 docs/static/img/demo_capture.gif diff --git a/docs/docs/CAPTURING.mdx b/docs/docs/CAPTURING.mdx new file mode 100644 index 0000000..e55358f --- /dev/null +++ b/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'; + +
+ + + + +
+ +## 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(null) + // ... + + return ( + + ) +} +``` + +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 `` or ``. + +:::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 [`