Camera Outputs

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

A CameraOutput is the base-class for all outputs a CameraDevice can stream to using a CameraSession. VisionCamera provides 5 core outputs:

• CameraPhotoOutput: See "The Photo Output"
• CameraVideoOutput: See "The Video Output"
• CameraFrameOutput: See "The Frame Output"
• CameraDepthFrameOutput: See "The Depth Output"
• CameraPreviewOutput: See "The Preview Output"

Connecting a CameraOutput to a CameraSession

To connect a CameraOutput to a CameraSession, simply add it in the output connections array:

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

function App() {
  const photoOutput = ...
  const videoOutput = ...

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      isActive={true}
      device="back"
      // [!code ++]
      outputs={[photoOutput, videoOutput]}
    />
  )
}

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

</Tab>
<Tab value="CameraSession (imperative)">
```tsx
const session = await VisionCamera.createCameraSession(false)
const photoOutput = ...
const videoOutput = ...

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

Resolutions

A Camera hardware provides a single stream, which is configured at a specific resolution. Each CameraOutput specifies its own target resolution (either specified by the user, or internally configured by VisionCamera), so VisionCamera internally configures the Camera hardware to most closely match the CameraOutput's target resolution. For example, to configure both Video and Photo outputs to stream in 4k, set your targetResolution to CommonResolutions.UHD_16_9:

<Tabs items={["Hooks", "Imperative"]} groupId="hooks-or-imperative" persist> <Tab value="Hooks">

const photoOutput = usePhotoOutput({
  targetResolution: CommonResolutions.UHD_16_9
})
const videoOutput = usePhotoOutput({
  targetResolution: CommonResolutions.UHD_16_9
})

When multiple CameraOutputs are connected to a CameraSession, output resolutions are negotiated across outputs to find the closest matching Camera stream format.

[!TIP] See "Constraints API" for more information.

Output readiness

Often a CameraOutput only becomes usable after it has been connected to the CameraSession - in this case, use the onConfigured={...} callback:

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

function App() {
  const output = ...

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      isActive={true}
      device="back"
      outputs={[output]}
      // [!code ++:3]
      onConfigured={() => {
        output.doSomething()
      }}
    />
  )
}

const camera = useCamera({ isActive: true, device: 'back', outputs: [output], // [!code ++:3] onConfigured() { output.doSomething() } }) }

</Tab>
<Tab value="CameraSession (imperative)">
```tsx
const session = await VisionCamera.createCameraSession(false)
const output = ...

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