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)
const device = await getDefaultCameraDevice('back')
// [!code ++]
const previewOutput = VisionCamera.createPreviewOutput()

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

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 />.