The Video Output

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

The CameraVideoOutput allows capturing Videos, optionally with Audio.

Creating a Video Output

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

function App() {
  const device = useCameraDevice('back')
  // [!code ++]
  const videoOutput = useVideoOutput({ /* options */ })

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      isActive={true}
      device={device}
      // [!code ++]
      outputs={[videoOutput]}
    />
  )
}

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

</Tab>
<Tab value="CameraSession (imperative)">
```tsx
const session = await VisionCamera.createCameraSession(false)
const device = await getDefaultCameraDevice('back')
// [!code ++]
const videoOutput = VisionCamera.createVideoOutput({ /* options */ })

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

See VideoOutputOptions for a full list of configuration options for the Video Output.

Enabling Audio

By default, audio is disabled. To record audio from the microphone, set enableAudio to true:

<Tabs items={["Hooks", "Imperative"]} groupId="hooks-or-imperative" persist> <Tab value="Hooks">

const videoOutput = useVideoOutput({
  // [!code ++]
  enableAudio: true
})

[!WARNING] Enabling Audio requires microphone permission.

Persistent Video Outputs

By default, an active recording will be automatically stopped when the input CameraDevice changes (e.g. when the user flips the Camera from front to back). To continue an active recording even when the CameraDevice changes, set enablePersistentRecorder to true:

<Tabs items={["Hooks", "Imperative"]} groupId="hooks-or-imperative" persist> <Tab value="Hooks">

const videoOutput = useVideoOutput({
  // [!code ++]
  enablePersistentRecorder: true
})

[!NOTE] The Persistent Recorder uses a different, buffered pipeline for recording Videos, which introduces slight overhead. If possible, disable the persistent recorder by default for maximum efficiency.

File container format

By default, VisionCamera records to a QuickTime container (.mov) on iOS, and an MPEG-4 container (.mp4) on Android. You can configure iOS to also record to an MPEG-4 container by setting your VideoOutputOptions.fileType to 'mp4':

const videoOutput = useVideoOutput({ fileType: 'mp4' })

As Android does not support QuickTime containers (.mov), this option is iOS only.

Preparing a Recorder

Before recording a Video, you must first prepare a Recorder using createRecorder(...):

const recorder = await videoOutput.createRecorder({
  // ...options
})

See RecorderSettings for a full list of configuration options.

Recording a Video

Then, capture a video using Recorder.startRecording(...):

await recorder.startRecording(
  (path) => console.log(`Recording finished!`),
  (error) => console.error(`Recording error!`, error)
)

To finish the recording, use Recorder.stopRecording():

await recorder.stopRecording()

This method resolves once a stop has been requested. After the video recording has been fully written to a file, the onRecordingFinished callback passed to Recorder.startRecording(...) will be called.

[!TIP] See "The Recorder" to understand how the Recorder works, and how to use it.

Re-create your Recorder

[!WARNING] Don't re-use a Recorder. To start a new Video recording, you must create a new Recorder.