feat: ✨ VisionCamera V4 ✨

.github/ISSUE_TEMPLATE/BUILD_ERROR.yml

@@ -32,10 +32,10 @@ body:
       render: json
       placeholder: >
         "dependencies": {
-          "react-native": "^0.72.3",
-          "react-native-reanimated": "^3.4.2",
-          "react-native-vision-camera": "^3.0.0",
-          "react-native-worklets-core": "^0.2.0",
+          "react-native": "^0.73.4",
+          "react-native-reanimated": "^3.9.0",
+          "react-native-vision-camera": "^4.0.0",
+          "react-native-worklets-core": "^1.0.0",
           ...
         },
     validations:

.github/workflows/build-android.yml

@@ -6,15 +6,13 @@ on:
       - main
     paths:
       - '.github/workflows/build-android.yml'
-      - 'package/cpp/**'
       - 'package/android/**'
       - 'package/example/android/**'
       - 'package/yarn.lock'
       - 'package/example/yarn.lock'
   pull_request:
     paths:
       - '.github/workflows/build-android.yml'
-      - 'package/cpp/**'
       - 'package/android/**'
       - 'package/example/android/**'
       - 'package/yarn.lock'
@@ -96,8 +94,8 @@ jobs:
         run: yarn install --frozen-lockfile
       - name: Install node_modules for example/
         run: yarn install --frozen-lockfile --cwd example
-      - name: Remove react-native-worklets-core
-        run: yarn remove react-native-worklets-core --cwd example
+      - name: Remove worklets, skia and reanimated
+        run: yarn remove react-native-worklets-core @shopify/react-native-skia react-native-reanimated --cwd ..
 
       - name: Restore Gradle cache
         uses: actions/cache@v4

.github/workflows/build-ios.yml

@@ -6,14 +6,12 @@ on:
       - main
     paths:
       - '.github/workflows/build-ios.yml'
-      - 'package/cpp/**'
       - 'package/ios/**'
       - 'package/*.podspec'
       - 'package/example/ios/**'
   pull_request:
     paths:
       - '.github/workflows/build-ios.yml'
-      - 'package/cpp/**'
       - 'package/ios/**'
       - 'package/*.podspec'
       - 'package/example/ios/**'
@@ -98,8 +96,8 @@ jobs:
             ${{ runner.os }}-yarn-
       - name: Install node_modules for example/
         run: yarn install --frozen-lockfile --cwd ..
-      - name: Remove react-native-worklets-core
-        run: yarn remove react-native-worklets-core --cwd ..
+      - name: Remove worklets, skia and reanimated
+        run: yarn remove react-native-worklets-core @shopify/react-native-skia react-native-reanimated --cwd ..
 
       - name: Restore buildcache
         uses: mikehardy/buildcache-action@v2

.github/workflows/validate-cpp.yml

@@ -6,13 +6,11 @@ on:
       - main
     paths:
       - '.github/workflows/validate-cpp.yml'
-      - 'package/cpp/**'
       - 'package/android/src/main/cpp/**'
       - 'package/ios/**'
   pull_request:
     paths:
       - '.github/workflows/validate-cpp.yml'
-      - 'package/cpp/**'
       - 'package/android/src/main/cpp/**'
       - 'package/ios/**'
 
@@ -23,7 +21,6 @@ jobs:
     strategy:
       matrix:
         path:
-          - 'package/cpp'
           - 'package/android/src/main/cpp'
           - 'package/ios'
     steps:
@@ -33,5 +30,5 @@ jobs:
         with:
           clang-format-version: '16'
           check-path: ${{ matrix.path }}
-          clang-format-style-path: package/cpp/.clang-format
+          clang-format-style-path: package/.clang-format
 

README.md

@@ -41,7 +41,7 @@ cd ios && pod install
 * [Guides](https://react-native-vision-camera.com/docs/guides)
 * [API](https://react-native-vision-camera.com/docs/api)
 * [Example](./package/example/)
-* [Frame Processor Plugins](https://react-native-vision-camera.com/docs/guides/frame-processor-plugins)
+* [Frame Processor Plugins](https://react-native-vision-camera.com/docs/guides/frame-processor-plugins-community)
 
 ### ShadowLens
 

docs/README.md

@@ -4,21 +4,21 @@ This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern
 
 ## Installation
 
-```console
+```sh
 yarn install
 ```
 
 ## Local Development
 
-```console
+```sh
 yarn start
 ```
 
 This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
 
 ## Build
 
-```console
+```sh
 yarn build
 ```
 

docs/docs/guides/CODE_SCANNING.mdx

@@ -119,16 +119,9 @@ render() {
 </TabItem>
 </Tabs>
 
-## Separate Output
-
-Since the Code Scanner is a separate camera output (just like photo or video), it cannot be attached simultaneously with photo and video enabled.
-You need to disable either `photo`, `video`, or the `codeScanner`.
-
 ## Code result
 
-The Code Scanner will call your [`onCodeScanned`](/docs/api/interfaces/CodeScanner#oncodescanned) callback with all detected codes ([`Code`](/docs/api/interfaces/Code)), including their decoded string value, and their coordinates on the screen relative to the Preview.
-
-<br />
+The Code Scanner will call your [`onCodeScanned`](/docs/api/interfaces/CodeScanner#oncodescanned) callback with all detected codes ([`Code`](/docs/api/interfaces/Code)), including their decoded string value, and their coordinates on the screen relative to subject area of the Code Scanner (the [`frame`](/docs/api/interfaces/Code#frame)).
 
 ## UPC-A vs EAN-13 codes
 

docs/docs/guides/DEVICES.mdx

@@ -20,11 +20,14 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
 Camera Devices are the physical (or "virtual") devices that can be used to record videos or capture photos.
 
 * **Physical**: A physical Camera Device is a **camera lens on your phone**. Different physical Camera Devices have different specifications, such as different capture formats, resolutions, zoom levels, and more. Some phones have multiple physical Camera Devices.
-
-  > Examples: _"Backside Wide-Angle Camera"_, _"Frontside Wide-Angle Camera (FaceTime HD)"_, _"Ultra-Wide-Angle back camera"_
+  Examples:
+  - "Backside Wide-Angle Camera"
+  - "Frontside Wide-Angle Camera (FaceTime HD)"
+  - "Ultra-Wide-Angle back camera"
 * **Virtual**: A virtual camera device is a **combination of one or more physical camera devices**, and provides features such as _virtual-device-switchover_ while zooming (see video on the right) or _combined photo delivery_ from all physical cameras to produce higher quality images.
-
-  > Examples: _"Triple-Camera"_, _"Dual-Wide-Angle Camera"_
+  Examples:
+  - "Triple-Camera"
+  - "Dual-Wide-Angle Camera"
 
 ## Select the default Camera
 
@@ -48,7 +51,7 @@ const device = useCameraDevice('back')
 
 ```ts
 const devices = Camera.getAvailableCameraDevices()
-const device = devices.find((d) => d.position === 'back')
+const device = getCameraDevice(devices, 'back')
 ```
 
 </TabItem>
@@ -91,15 +94,15 @@ A [`CameraDevice`](/docs/api/interfaces/CameraDevice) consists of the following
 
 Here's a list of some Camera Devices an iPhone 13 Pro has:
 
-- Back Wide Angle Camera (`['wide-angle-camera']`)
-- Back Ultra-Wide Angle Camera (`['ultra-wide-angle-camera']`)
-- Back Telephoto Camera (`['telephoto-camera']`)
-- Back Dual Camera (Wide + Telephoto)
-- Back Dual-Wide Camera (Ultra-Wide + Wide)
-- Back Triple Camera (Ultra-Wide + Wide + Telephoto)
-- Back LiDAR Camera (Wide + LiDAR-Depth)
-- Front Wide Angle (`['wide-angle-camera']`)
-- Front True-Depth (Wide + Depth)
+- Back Wide Angle Camera **1x** (`['wide-angle-camera']`)
+- Back Ultra-Wide Angle Camera **0.5x** (`['ultra-wide-angle-camera']`)
+- Back Telephoto Camera **3x** (`['telephoto-camera']`)
+- Back Dual Camera **1x** + **3x** (`['wide-angle-camera', 'telephoto-camera']`)
+- Back Dual-Wide Camera **0.5x** + **1x** (`['ultra-wide-angle-camera', 'wide-angle-camera']`)
+- Back Triple Camera **0.5x** + **1x** + **3x** (`['ultra-wide-angle-camera', 'wide-angle-camera', 'telephoto-camera']`)
+- Back LiDAR Camera **1x** (`['wide-angle-camera']` + depth)
+- Front Wide Angle **1x** (`['wide-angle-camera']`)
+- Front True-Depth **1x** (`['wide-angle-camera']` + depth)
 
 ### Selecting Multi-Cams
 

docs/docs/guides/ERRORS.mdx

@@ -49,7 +49,7 @@ The `CameraError` type is a baseclass type for all other errors and provides the
   * `cause.stacktrace?`: A native Java stacktrace for the cause. (Android only)
   * `cause.cause?`: The cause that caused this cause. (Recursive) (Optional)
 
-:::note
+:::info
 See [the `CameraError.ts` file](https://github.com/mrousavy/react-native-vision-camera/blob/main/package/src/CameraError.ts) for a list of all possible error codes
 :::
 

docs/docs/guides/EXPOSURE.mdx

@@ -16,9 +16,9 @@ Values for the `exposure` prop range from [`device.minExposure`](/docs/api/inter
 
 Instead of manually adjusting ISO and Exposure-Duration, this acts as an "exposure compensation bias", meaning the Camera will still continuously automatically adjust exposure as it goes, but premultiplies the given exposure value to it's ISO and Exposure Duration settings.
 
-### Examples
-
-![Exposure Example (-2, 0, 2)](/img/exposure.jpg)
+|              `exposure={-2}`               |                  `exposure={0}`                 |               `exposure={2}`               |
+|--------------------------------------------|-------------------------------------------------|--------------------------------------------|
+| ![Exposure -2](/img/exposure-negative.jpg) | ![Exposure Neutral](/img/exposure-neutral.jpg)  |   ![Exposure +2](/img/exposure-plus.jpg)   |
 
 ### Animating
 

docs/docs/guides/FOCUSING.mdx

@@ -16,7 +16,7 @@ So for example, `{ x: 0, y: 0 }` will focus to the upper left corner, while `{ x
 
 Focussing adjusts auto-focus (AF) and auto-exposure (AE).
 
-:::note
+:::warning
 `focus(...)` will fail if the selected Camera device does not support focusing (see [`CameraDevice.supportsFocus`](/docs/api/interfaces/CameraDevice#supportsfocus))
 :::
 

docs/docs/guides/FORMATS.mdx

@@ -42,7 +42,6 @@ To get all available formats, simply use the `CameraDevice`'s [`formats` propert
 - [`videoHeight`](/docs/api/interfaces/CameraDeviceFormat#videoheight)/[`videoWidth`](/docs/api/interfaces/CameraDeviceFormat#videoWidth): The resolution that will be used for recording videos and streaming into frame processors. This also affects the preview's aspect ratio. Choose a format with your desired resolution.
 - [`minFps`](/docs/api/interfaces/CameraDeviceFormat#minfps)/[`maxFps`](/docs/api/interfaces/CameraDeviceFormat#maxfps): A range of possible values for the `fps` property. For example, if your format has `minFps: 1` and `maxFps: 60`, you can either use `fps={30}`, `fps={60}` or any other value in between for recording videos and streaming into frame processors.
 - [`videoStabilizationModes`](/docs/api/interfaces/CameraDeviceFormat#videostabilizationmodes): All supported Video Stabilization Modes, digital and optical. If this specific format contains your desired [`VideoStabilizationMode`](/docs/api/#videostabilizationmode), you can pass it to your `<Camera>` via the [`videoStabilizationMode` property](/docs/api/interfaces/CameraProps#videoStabilizationMode).
-- [`pixelFormats`](/docs/api/interfaces/CameraDeviceFormat#pixelformats): All supported Pixel Formats. If this specific format contains your desired [`PixelFormat`](/docs/api/#PixelFormat), you can pass it to your `<Camera>` via the [`pixelFormat` property](/docs/api/interfaces/CameraProps#pixelFormat).
 - [`supportsVideoHdr`](/docs/api/interfaces/CameraDeviceFormat#supportsvideohdr): Whether this specific format supports true 10-bit HDR for video capture. If this is `true`, you can enable `videoHdr` on your `<Camera>`.
 - [`supportsPhotoHdr`](/docs/api/interfaces/CameraDeviceFormat#supportsphotohdr): Whether this specific format supports HDR for photo capture. It will use multiple captures to fuse over-exposed and under-exposed Images together to form one HDR photo. If this is `true`, you can enable `photoHdr` on your `<Camera>`.
 - [`supportsDepthCapture`](/docs/api/interfaces/CameraDeviceFormat#supportsdepthcapture): Whether this specific format supports depth data capture. For devices like the TrueDepth/LiDAR cameras, this will always be true.
@@ -213,4 +212,4 @@ Other props that depend on the `format`:
 
 <br />
 
-#### 🚀 Next section: [Taking Photos](./taking-photos)
+#### 🚀 Next section: [Preview](./preview)