Back to React Native Vision Camera

The Photo Output

docs/content/docs/photo-output.mdx

5.2.03.0 KB
Original Source

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

The CameraPhotoOutput allows capturing processed- and RAW-Photos.

Creating a Photo Output

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

tsx
function App() {
  const device = useCameraDevice('back')
  // [!code ++]
  const photoOutput = usePhotoOutput({ /* options */ })

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      isActive={true}
      device={device}
      // [!code ++]
      outputs={[photoOutput]}
    />
  )
}
</Tab> <Tab value="useCamera(...) (hook)"> ```tsx function App() { const device = useCameraDevice('back') // [!code ++] const photoOutput = usePhotoOutput({ /* options */ })

const camera = useCamera({ isActive: true, device: device, // [!code ++] outputs: [photoOutput], }) }

</Tab>
<Tab value="CameraSession (imperative)">
```tsx
const session = await VisionCamera.createCameraSession(false)
// [!code ++]
const photoOutput = VisionCamera.createPhotoOutput({ /* options */ })

await session.configure([
  {
    input: 'back',
    outputs: [
      // [!code ++]
      { output: photoOutput, mirrorMode: 'auto' }
    ],
    constraints: []
  }
], {})
await session.start()
</Tab> </Tabs>

See PhotoOutputOptions for a full list of configuration options for the Photo Output.

Capturing Photos

Capturing Photos in-memory

To capture a Photo in-memory, use capturePhoto(...):

ts
const photo = await photoOutput.capturePhoto(
  { /*  options  */ },
  { /* callbacks */ }
)
// ...
photo.dispose()

[!WARNING] Make sure to dispose the Photo when you no longer use it, as otherwise the JS Runtime might not immediately delete it, possibly exhausting system resources or stalling the Camera:

See "A Photo" to understand how the Photo type works, and how to use it.

Capturing Photos to a file

To capture a photo and directly save it to a temporary file, use capturePhotoToFile(...):

ts
const { filePath } = await photoOutput.capturePhotoToFile(
  { /*  options  */ },
  { /* callbacks */ }
)

filePath is a plain filesystem path, not a file:// URL. If another library expects a URI, prepend file:// at the call site.

See CapturePhotoSettings for a full list of configuration options, and CapturePhotoCallbacks for a full list of callbacks for the capture method.