---
title: The Preview Output
description: Streaming a Camera feed into a Preview
---

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

The [`CameraPreviewOutput`](/api/react-native-vision-camera/hybrid-objects/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 />`](/api/react-native-vision-camera/views/Camera) view already creates a [`CameraPreviewOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPreviewOutput) (+ [`<NativePreviewView />`](/api/react-native-vision-camera/views/NativePreviewView)) for you, automatically.
</Tab>
<Tab value="useCamera(...) (hook)">
```tsx
function App() {
  const device = useCameraDevice('back')
  // [!code ++]
  const previewOutput = usePreviewOutput()

  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()
```
</Tab>
</Tabs>

### Preview Resolution

A [`CameraPreviewOutput`](/api/react-native-vision-camera/hybrid-objects/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](constraints) - a Preview can be upscaled cheaply, whereas a recording's resolution cannot be recovered after capture. If you list a [`{ resolutionBias: ... }`](/api/react-native-vision-camera/interfaces/ResolutionBiasConstraint) constraint for a recording output (e.g. a [`CameraVideoOutput`](/api/react-native-vision-camera/hybrid-objects/CameraVideoOutput) targeting 1080p), it takes priority over the Preview's preference and the session streams at your requested resolution:

```tsx
const constraints = [
  { resolutionBias: videoOutput }
]
```

### Connecting the Preview Output to a View

To display the Camera feed to the user, you must connect the [`CameraPreviewOutput`](/api/react-native-vision-camera/hybrid-objects/CameraPreviewOutput) to a [`<NativePreviewView />`](/api/react-native-vision-camera/views/NativePreviewView):

```tsx
function App() {
  const previewOutput = usePreviewOutput()

  return (
    // [!code ++:4]
    <NativePreviewView
      style={StyleSheet.absoluteFill}
      previewOutput={previewOutput}
    />
  )
}
```

See ["Views: &lt;NativePreviewView /&gt;"](nativepreview-view) for more information about `<NativePreviewView />`.
