The Preview Output

The CameraPreviewOutput allows streaming a Camera feed into a Preview, which may be connected to a Preview View to display a Camera feed to the user.

Creating a Preview Output

function App() {
  const device = useCameraDevice('back')
  const previewOutput = usePreviewOutput()

  const camera = useCamera({
    isActive: true,
    device: device,
    outputs: [previewOutput],
  })
}

const session = await VisionCamera.createCameraSession(false)
const previewOutput = VisionCamera.createPreviewOutput()

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

Preview Resolution

A CameraPreviewOutput does not have a configurable target resolution - since it can never display more pixels than the screen has, it simply prefers any Camera Format that is at least as large as the screen.

This preference is only a small bias in resolution negotiation - a Preview can be upscaled cheaply, whereas a recording's resolution cannot be recovered after capture. If you list a { resolutionBias: ... } constraint for a recording output (e.g. a CameraVideoOutput targeting 1080p), it takes priority over the Preview's preference and the session streams at your requested resolution:

const constraints = [
  { resolutionBias: videoOutput }
]

Connecting the Preview Output to a View

To display the Camera feed to the user, you must connect the CameraPreviewOutput to a <NativePreviewView />:

function App() {
  const previewOutput = usePreviewOutput()

  return (
    <NativePreviewView
      style={StyleSheet.absoluteFill}
      previewOutput={previewOutput}
    />
  )
}

See "Views: <NativePreviewView />" for more information about <NativePreviewView />.