The Video Output

Capturing Videos using the Video Output

The CameraVideoOutput allows capturing Videos, optionally with Audio.

Creating a Video Output

function App() {
  const device = useCameraDevice('back')
  const videoOutput = useVideoOutput({ /* options */ })

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      isActive={true}
      device={device}
      outputs={[videoOutput]}
    />
  )
}
function App() {
  const device = useCameraDevice('back')
  const videoOutput = useVideoOutput({ /* options */ })

  const camera = useCamera({
    isActive: true,
    device: device,
    outputs: [videoOutput],
  })
}
const session = await HybridCameraFactory.createCameraSession(false)
const device = await getDefaultCameraDevice('back')
const videoOutput = HybridCameraFactory.createVideoOutput({ /* options */ })

await session.configure([
  {
    input: device,
    outputs: [
      { output: videoOutput, mirrorMode: 'auto' }
    ],
    config: {}
  }
], {})
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:

const videoOutput = useVideoOutput({
  enableAudio: true
})
const videoOutput = HybridCameraFactory.createVideoOutput({
  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:

const videoOutput = useVideoOutput({
  enablePersistentRecorder: true
})
const videoOutput = HybridCameraFactory.createVideoOutput({
  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.

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.