The Preview Output

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

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

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

[!NOTE] The <Camera /> view already creates a CameraPreviewOutput (+ <NativePreviewView />) for you, automatically.

</Tab>

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

</Tab>
<Tab value="CameraSession (imperative)">
```tsx
const session = await VisionCamera.createCameraSession(false)
// [!code ++]
const previewOutput = VisionCamera.createPreviewOutput()

await session.configure([
  {
    input: 'back',
    outputs: [
      // [!code ++]
      { 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 (
    // [!code ++:4]
    <NativePreviewView
      style={StyleSheet.absoluteFill}
      previewOutput={previewOutput}
    />
  )
}

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