feat: Add supportedMultiCamDeviceCombinations (with fixed nitrogen __element) (#3821)

* chore: Upgrade to Nitro 0.35.6 for nitrogen `__element` fix

* specs

* Reapply "feat: Add `supportedMultiCamDeviceCombinations`" (#3820)

This reverts commit 7586e98.

* fix: Update specs what

Author: mrousavy

apps/simple-camera/ios/Podfile.lock

@@ -72,7 +72,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - ReactNativeDependencies
     - Yoga
-  - NitroModules (0.35.5):
+  - NitroModules (0.35.6):
     - hermes-engine
     - RCTRequired
     - RCTTypeSafety
@@ -2756,7 +2756,7 @@ SPEC CHECKSUMS:
   MLKitVision: fa8dea9012ac59497c79ddbe9ebf32051047ac4c
   nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
   NitroImage: bf3c19ea96629e5ab1665f61d720efc0df53377a
-  NitroModules: 2ece7b1523f5e1952c5bcea7c318df11b8ac856b
+  NitroModules: 1985a9de2cf4a6de1265c5936b7cc9d7f30e45d8
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
   RCTDeprecation: 3280799c14232a56e5a44f92981a8ee33bc69fd9
   RCTRequired: 9854a51b0f65ccf43ea0b744df4d70fce339db32

apps/simple-camera/package.json

@@ -27,7 +27,7 @@
     "react-native": "0.84.0",
     "react-native-gesture-handler": "^2.30.0",
     "react-native-nitro-image": "0.14.0",
-    "react-native-nitro-modules": "0.35.5",
+    "react-native-nitro-modules": "0.35.6",
     "react-native-reanimated": "4.3.0",
     "react-native-safe-area-context": "^5.7.0",
     "react-native-screens": "^4.24.0",

bun.lock

@@ -5,7 +5,7 @@ description: Using multiple Camera Devices in a single Camera Session
 
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
 
-A [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) allows attaching multiple connections to stream from multiple [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice)s at the same time - if the system supports it.
+A [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession) allows attaching multiple connections to stream from multiple [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice)s at the same time (e.g. Picture-in-Picture mode via front + back Camera) - if the system supports it.
 
 ### Creating a Multi-Camera Session
 
@@ -19,14 +19,35 @@ if (VisionCamera.supportsMultiCamSessions) {
 
 ### Using multiple Connections
 
-With a multi-cam [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession), you can now attach multiple [`CameraSessionConnection`](/api/react-native-vision-camera/interfaces/CameraSessionConnection)s - for example to stream and capture from the Front- and Back-Camera at the same time, attach both devices:
+Due to hardware constraints, not every [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) can be paired with every other [`CameraDevice`](/api/react-native-vision-camera/hybrid-objects/CameraDevice) - therefore VisionCamera exposes a fixed array of supported combinations via [`CameraDeviceFactory.supportedMultiCamDeviceCombinations`](/api/react-native-vision-camera/hybrid-objects/CameraDeviceFactory#supportedmulticamdevicecombinations) upfront:
 
 ```ts
-const session = ...
-const frontDevice = useCameraDevice('front')
-const backDevice = useCameraDevice('back')
-const frontPreview = usePreviewOutput()
-const backPreview = usePreviewOutput()
+if (!VisionCamera.supportsMultiCamSessions)
+  return
+
+const deviceFactory = await VisionCamera.createDeviceFactory()
+const frontAndBackCombination =
+  deviceFactory.supportedMultiCamDeviceCombinations.find((devices) => {
+    return (
+      devices.some((d) => d.position === 'front') &&
+      devices.some((d) => d.position === 'back')
+    )
+  })
+if (frontAndBackCombination == null)
+  return
+
+const frontDevice = frontAndBackCombination.find((d) => d.position === 'front')
+const backDevice = frontAndBackCombination.find((d) => d.position === 'back')
+```
+
+Then, knowing `frontDevice` and `backDevice` can be used simultaneously in a Multi-Cam session, create the [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession), and attach the [`CameraSessionConnection`](/api/react-native-vision-camera/interfaces/CameraSessionConnection)s:
+
+```ts
+const session = await VisionCamera.createCameraSession(true)
+const frontPreviewOutput = VisionCamera.createPreviewOutput()
+const frontPhotoOutput = VisionCamera.createPhotoOutput({})
+const backPreviewOutput = VisionCamera.createPreviewOutput()
+const backPhotoOutput = VisionCamera.createPhotoOutput({})
 
 const [frontController, backController] = await session.configure([
   // Front Camera
@@ -51,6 +72,26 @@ const [frontController, backController] = await session.configure([
 await session.start()
 ```
 
-Then, ensure you display both `frontPreview` and `backPreview` in separate [`<NativePreviewView />`](/api/react-native-vision-camera/views/NativePreviewView) views.
+Each returned [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController) correlates to the connection at that index - e.g. `frontController` allows zooming/exposure/focus the `frontDevice`, and vice-versa.
+
+Then, ensure you display both `frontPreviewOutput` and `backPreviewOutput` in separate [`<NativePreviewView />`](/api/react-native-vision-camera/views/NativePreviewView) views:
+
+```tsx
+function App() {
+  const frontPreviewOutput = ...
+  const backPreviewOutput = ...
 
-Each returned [`CameraController`](/api/react-native-vision-camera/hybrid-objects/CameraController) correlates to the connection at that index.
+  return (
+    <View style={StyleSheet.absoluteFill}>
+      <NativePreviewView
+        style={{ flex: 1 }}
+        previewOutput={frontPreviewOutput}
+      />
+      <NativePreviewView
+        style={{ flex: 1 }}
+        previewOutput={backPreviewOutput}
+      />
+    </View>
+  )
+}
+```