Camera Outputs

Understanding what Camera Outputs are, how to configure their resolutions, and how to add them to a Camera Session

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

Connecting a CameraOutput to a CameraSession

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

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

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

  const camera = useCamera({
    isActive: true,
    device: "back",
    outputs: [photoOutput, videoOutput],
  })
}
const session = await VisionCamera.createCameraSession(false)
const device = await getDefaultCameraDevice('back')
const photoOutput = ...
const videoOutput = ...

await session.configure([
  {
    input: device,
    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:

const photoOutput = usePhotoOutput({
  targetResolution: CommonResolutions.UHD_16_9
})
const videoOutput = usePhotoOutput({
  targetResolution: CommonResolutions.UHD_16_9
})
const photoOutput = createPhotoOutput({
  targetResolution: CommonResolutions.UHD_16_9
})
const videoOutput = createPhotoOutput({
  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:

function App() {
  const output = ...

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      isActive={true}
      device="back"
      outputs={[output]}
      onConfigured={() => {
        output.doSomething()
      }}
    />
  )
}
function App() {
  const output = ...

  const camera = useCamera({
    isActive: true,
    device: 'back',
    outputs: [output],
    onConfigured() {
      output.doSomething()
    }
  })
}
const session = await VisionCamera.createCameraSession(false)
const device = await getDefaultCameraDevice('back')
const output = ...

await session.configure([
  {
    input: device,
    outputs: [
      { output: output, mirrorMode: 'auto' }
    ],
    constraints: []
  }
], {})
await session.start()
output.doSomething()

On this page

Connecting a CameraOutput to a CameraSessionResolutionsOutput readiness