Photo HDR - React Native Vision Camera

import { Tab, Tabs } from 'fumadocs-ui/components/tabs'

Photo HDR fuses multiple Frames together to capture Photos in a higher dynamic range, allowing for much brighter highlights and deeper shadows. In most HDR pipelines, an underexposed Frame, a regular exposed Frame, and an overexposed Frame are captured at the same time, and merged together at ISP-level.

Capture HDR Photos

To capture HDR Photos, ensure your currently selected CameraDevice supports Photo HDR, and enable a { photoHDR: ... } constraint:

<Tabs items={["<Camera /> (view)", "useCamera(...) (hook)", "CameraSession (imperative)"]} groupId="api-style" persist> <Tab value="<Camera /> (view)">

tsx

function App() {
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      isActive={true}
      device="back"
      constraints={[
        // [!code ++]
        { photoHDR: true }
      ]}
    />
  )
}

</Tab> <Tab value="useCamera(...) (hook)"> ```tsx function App() { const camera = useCamera({ isActive: true, device: 'back', constraints: [ // [!code ++] { photoHDR: true } ] }) } ``` </Tab> <Tab value="CameraSession (imperative)"> ```tsx const device = ... const session = ...

const controllers = await session.configure([ { input: device, outputs: [], constraints: [ // [!code ++] { photoHDR: true } ] } ], {})

</Tab>
</Tabs>

#### HDR Camera Extensions

Some Android Phones have vendor-specific [`CameraExtension`](/api/react-native-vision-camera/hybrid-objects/CameraExtension)s.
If the phone has a [`'hdr'`](/api/react-native-vision-camera/type-aliases/CameraExtensionType) extension, you can enable it to capture HDR [`Photo`](/api/react-native-vision-camera/hybrid-objects/Photo)s. This does not require enabling Photo HDR via the [`{ photoHDR: ... }`](/api/react-native-vision-camera/interfaces/PhotoHDRConstraint) constraint, but instead just requires the extension to be enabled:

```tsx
function App() {
  const device = ...
  const extensions = useCameraExtensions(device)
  const hdrExtension = extensions.find((e) => e.type === 'hdr')

  return (
    <Camera
      {...props}
      // [!code ++]
      cameraExtension={hdrExtension}
    />
  )
}

[!TIP] See "Camera Extensions" for more information.