Video Stabilization

Understanding Video Stabilization and recording stabilized Videos

Video Stabilization applies software- and sometimes hardware-processing to stabilize Frames in the Camera.

Enable Video Stabilization

To enable Video Stabilization, find a CameraFormat that supports your desired VideoStabilizationMode via supportsVideoStabilizationMode(...):

const device = ...
const format = useCameraFormat(device, [
  { videoStabilizationMode: 'standard' }
])
const device = ...
const format = getCameraFormat(device, [
  { videoStabilizationMode: 'standard' }
])

Then, enable Video Stabilization in your Camera session:

function App() {
  const device = ...
  const format = useCameraFormat(device, [
    { videoStabilizationMode: 'standard' }
  ])
  const mode = format.supportsVideoStabilizationMode('standard')
    ? 'standard'
    : 'none'

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      isActive={true}
      device={device}
      format={format}
      videoStabilizationMode={mode}
    />
  )
}
function App() {
  const device = ...
  const format = useCameraFormat(device, [
    { videoStabilizationMode: 'standard' }
  ])
  const mode = format.supportsVideoStabilizationMode('standard')
    ? 'standard'
    : 'none'

  const camera = useCamera({
    isActive: true,
    device: device,
    format: format,
    videoStabilizationMode: mode
  })
}
const session = ...
const device = ...
const format = useCameraFormat(device, [
  { videoStabilizationMode: 'standard' }
])
const mode = format.supportsVideoStabilizationMode('standard')
  ? 'standard'
  : 'none'

const controllers = await session.configure([
  {
    input: device,
    outputs: [],
    config: {
      format: format,
      videoStabilizationMode: mode
    }
  }
], {})

Latency

Software-based VideoStabilizationModes keep a queue of Frames in-memory to adjust stabilization, which introduces latency in the Camera pipeline. The side-effect of this is that Frames arrive a few milliseconds/seconds later than when they were captured.