From 2d66d5893c7b79b81b52afe76f2032a36836ed32 Mon Sep 17 00:00:00 2001 From: Marc Rousavy Date: Mon, 25 Sep 2023 12:57:03 +0200 Subject: [PATCH] docs: New V3 docs for new API (#1842) * docs: New V3 docs for new API * fix: Prefer Wide-Angle unless explicitly opted-out * docs: Update DEVICES * Finish Devices docs * Switch links * Revert "Switch links" This reverts commit 06f196ae0e67787cbd5768e125be6d0a3cb5bbc9. * docs: New LIFECYCLE * docs: New CAPTURING docs * Update Worklets links * docs: Update TROUBLESHOOTING and ZOOMING * fix: Update `getAvailableCameraDevices()` usages * docs: Update FORMATS * Update Errors.kt * docs: Fix broken links * docs: Update references to old hooks * docs: Create Frame Processor Tips * docs: Auto-dark mode * fix: Fix FPS filter * feat: Add `'max'` flag to format filter * fix: Use loop * fix: Fix bug in `getCameraFormat` * fix: Find best aspect ratio as well * fix: Switch between formats on FPS change * Update FRAME_PROCESSOR_PLUGIN_LIST.mdx * Add FPS graph explanation * feat: Support HDR filter * docs: Add HDR docs * docs: Add Video Stabilization * docs: Update Skia docs * Skia links * Add Skia labels * Update SKIA_FRAME_PROCESSORS.mdx * docs: Add Performance * Update some wording * Update headers / and zoom * Add examples for devices * fix highlights * fix: Expose `Frame` * docs: Update FP docs * Update links * Update FRAME_PROCESSOR_CREATE_PLUGIN_IOS.mdx --- README.md | 5 +- docs/docs/guides/CAPTURING.mdx | 26 +- docs/docs/guides/DEVICES.mdx | 267 +++++++++++++----- docs/docs/guides/ERRORS.mdx | 2 +- docs/docs/guides/FOCUSING.mdx | 6 +- docs/docs/guides/FORMATS.mdx | 203 ++++++++----- docs/docs/guides/FRAME_PROCESSORS.mdx | 190 +++++++------ .../FRAME_PROCESSORS_CREATE_OVERVIEW.mdx | 4 +- docs/docs/guides/FRAME_PROCESSORS_SKIA.mdx | 134 +++------ docs/docs/guides/FRAME_PROCESSORS_TIPS.mdx | 69 +++++ .../FRAME_PROCESSOR_CREATE_PLUGIN_ANDROID.mdx | 4 +- .../FRAME_PROCESSOR_CREATE_PLUGIN_IOS.mdx | 2 +- .../guides/FRAME_PROCESSOR_PLUGIN_LIST.mdx | 1 + docs/docs/guides/HDR.mdx | 83 ++++++ docs/docs/guides/LIFECYCLE.mdx | 37 +-- docs/docs/guides/MOCKING.mdx | 7 +- docs/docs/guides/PERFORMANCE.mdx | 137 +++++++++ docs/docs/guides/SETUP.mdx | 52 +++- docs/docs/guides/SKIA_FRAME_PROCESSORS.mdx | 67 ----- docs/docs/guides/STABILIZATION.mdx | 79 ++++++ docs/docs/guides/TROUBLESHOOTING.mdx | 36 ++- docs/docs/guides/ZOOMING.mdx | 71 ++--- docs/docusaurus.config.js | 3 + docs/sidebars.js | 4 + docs/static/img/action_mode_demo.gif | Bin 0 -> 3185439 bytes docs/static/img/demo_drawing.mp4 | Bin 0 -> 1433779 bytes docs/static/img/hdr_comparison.png | Bin 0 -> 637132 bytes docs/static/img/hdr_photo_demo.webp | Bin 0 -> 109976 bytes docs/static/img/sdr_comparison.png | Bin 0 -> 589824 bytes .../main/java/com/mrousavy/camera/Errors.kt | 6 +- package/example/src/CameraPage.tsx | 18 +- package/ios/CameraError.swift | 6 +- package/ios/CameraViewManager.m | 1 - package/src/Camera.tsx | 11 +- package/src/CameraDevice.ts | 23 +- package/src/CameraProps.ts | 10 +- package/src/Frame.ts | 32 ++- package/src/PhotoFile.ts | 2 +- package/src/devices/getCameraDevice.ts | 50 ++-- package/src/devices/getCameraFormat.ts | 135 +++++---- package/src/hooks/useCameraDevice.ts | 5 +- package/src/index.ts | 2 +- 42 files changed, 1199 insertions(+), 591 deletions(-) create mode 100644 docs/docs/guides/FRAME_PROCESSORS_TIPS.mdx create mode 100644 docs/docs/guides/HDR.mdx create mode 100644 docs/docs/guides/PERFORMANCE.mdx delete mode 100644 docs/docs/guides/SKIA_FRAME_PROCESSORS.mdx create mode 100644 docs/docs/guides/STABILIZATION.mdx create mode 100644 docs/static/img/action_mode_demo.gif create mode 100644 docs/static/img/demo_drawing.mp4 create mode 100644 docs/static/img/hdr_comparison.png create mode 100644 docs/static/img/hdr_photo_demo.webp create mode 100644 docs/static/img/sdr_comparison.png diff --git a/README.md b/README.md index e6acb2d..ed8356f 100644 --- a/README.md +++ b/README.md @@ -50,10 +50,9 @@ You're looking at the V3 version of VisionCamera, which features a full rewrite ```tsx function App() { - const devices = useCameraDevices('wide-angle-camera') - const device = devices.back + const device = useCameraDevice('back') - if (device == null) return + if (device == null) return return ( -## Camera Actions +## Camera Functions -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): +The Camera provides certain functions which are available through a [ref object](https://reactjs.org/docs/refs-and-the-dom.html): ```tsx function App() { @@ -31,17 +31,17 @@ function App() { } ``` -The most important actions are: +To use these functions, you need to wait until the [`onInitialized`](/docs/api/interfaces/CameraProps#oninitialized) event has been fired. -* [Taking Photos](#taking-photos) -* [Recording Videos](#recording-videos) - -## Taking Photos +### Taking Photos To take a photo you first have to enable photo capture: ```tsx - + ``` Then, simply use the Camera's [`takePhoto(...)`](/docs/api/classes/Camera#takephoto) function: @@ -52,11 +52,11 @@ const photo = await camera.current.takePhoto({ }) ``` -You can customize capture options such as [automatic red-eye reduction](/docs/api/interfaces/TakePhotoOptions#enableautoredeyereduction), [automatic image stabilization](/docs/api/interfaces/TakePhotoOptions#enableautostabilization), [combining images from constituent physical camera devices](/docs/api/interfaces/TakePhotoOptions#enablevirtualdevicefusion) to create a single high quality fused image, [enable flash](/docs/api/interfaces/TakePhotoOptions#flash), [prioritize speed over quality](/docs/api/interfaces/TakePhotoOptions#qualityprioritization) and more using the `options` parameter. (See [`TakePhotoOptions`](/docs/api/interfaces/TakePhotoOptions)) +You can customize capture options such as [automatic red-eye reduction](/docs/api/interfaces/TakePhotoOptions#enableautoredeyereduction), [automatic image stabilization](/docs/api/interfaces/TakePhotoOptions#enableautostabilization), [enable flash](/docs/api/interfaces/TakePhotoOptions#flash), [prioritize speed over quality](/docs/api/interfaces/TakePhotoOptions#qualityprioritization), [disable the shutter sound](/docs/api/interfaces/TakePhotoOptions#enableshuttersound) and more using the [`TakePhotoOptions`](/docs/api/interfaces/TakePhotoOptions) parameter. -This function returns a [`PhotoFile`](/docs/api/interfaces/PhotoFile) which contains a [`path`](/docs/api/interfaces/PhotoFile#path) property you can display in your App using an `` or ``. +This function returns a [`PhotoFile`](/docs/api/interfaces/PhotoFile) which is stored in a temporary directory and can either be displayed using `` or ``, uploaded to a backend, or saved to the Camera Roll using [react-native-cameraroll](https://github.com/react-native-cameraroll/react-native-cameraroll). -## Recording Videos +### Recording Videos To start a video recording you first have to enable video capture: @@ -78,6 +78,8 @@ camera.current.startRecording({ }) ``` +You can customize capture options such as [video codec](/docs/api/interfaces/RecordVideoOptions#videoCodec), [file type](/docs/api/interfaces/RecordVideoOptions#fileType), [enable flash](/docs/api/interfaces/RecordVideoOptions#flash) and more using the [`RecordVideoOptions`](/docs/api/interfaces/RecordVideoOptions) parameter. + For any error that occured _while recording the video_, the `onRecordingError` callback will be invoked with a [`CaptureError`](/docs/api/classes/CameraCaptureError) and the recording is therefore cancelled. To stop the video recording, you can call [`stopRecording(...)`](/docs/api/classes/Camera#stoprecording): @@ -86,7 +88,7 @@ To stop the video recording, you can call [`stopRecording(...)`](/docs/api/class await camera.current.stopRecording() ``` -Once a recording has been stopped, the `onRecordingFinished` callback passed to the `startRecording` function will be invoked with a [`VideoFile`](/docs/api/interfaces/VideoFile) which you can then use to display in a [`