Skip to main content

Camera Formats

What are camera formats?​

Each camera device (see "Camera Devices") provides a number of formats that have different specifications. There are formats specifically designed for high-resolution photo capture (but lower FPS), or formats that are designed for slow-motion video capture which have frame-rates of up to 240 FPS (but lower resolution).

What if I don't want to choose a format?​

If you don't want to specify a Camera Format, you don't have to. The Camera automatically chooses the best matching format for the current camera device. This is why the Camera's format property is optional.

🚀 Continue with: Taking Photos

Choosing custom formats​

To understand a bit more about camera formats, you first need to understand a few "general camera basics":

  • Each camera device is built differently, e.g. front-facing Cameras often don't have resolutions as high as the Cameras on the back. (see "Camera Devices")
  • Formats are designed for specific use-cases, here are some examples for formats on a Camera Device:
    • 4k Photos, 4k Videos, 30 FPS (high quality)
    • 4k Photos, 1080p Videos, 60 FPS (high FPS)
    • 4k Photos, 1080p Videos, 240 FPS (ultra high FPS/slow motion)
    • 720p Photos, 720p Videos, 30 FPS (smaller buffers/e.g. faster face detection)
  • Each app has different requirements, so the format filtering is up to you.
  • The videoResolution and videoAspectRatio options also affect the preview, as preview is also running in the video stream.

To get all available formats, simply use the CameraDevice's formats property. These are a CameraFormat's props:

  • photoHeight/photoWidth: The resolution that will be used for taking photos. Choose a format with your desired resolution.
  • videoHeight/videoWidth: The resolution that will be used for recording videos and streaming into frame processors. This also affects the preview's aspect ratio. Choose a format with your desired resolution.
  • minFps/maxFps: A range of possible values for the fps property. For example, if your format has minFps: 1 and maxFps: 60, you can either use fps={30}, fps={60} or any other value in between for recording videos and streaming into frame processors.
  • videoStabilizationModes: All supported Video Stabilization Modes, digital and optical. If this specific format contains your desired VideoStabilizationMode, you can pass it to your <Camera> via the videoStabilizationMode property.
  • pixelFormats: All supported Pixel Formats. If this specific format contains your desired PixelFormat, you can pass it to your <Camera> via the pixelFormat property.
  • supportsVideoHdr: Whether this specific format supports true 10-bit HDR for video capture. If this is true, you can enable videoHdr on your <Camera>.
  • supportsPhotoHdr: Whether this specific format supports HDR for photo capture. It will use multiple captures to fuse over-exposed and under-exposed Images together to form one HDR photo. If this is true, you can enable photoHdr on your <Camera>.
  • supportsDepthCapture: Whether this specific format supports depth data capture. For devices like the TrueDepth/LiDAR cameras, this will always be true.
  • ...and more. See the CameraDeviceFormat type for all supported properties.

You can either find a matching format manually by looping through your CameraDevice's formats property, or by using the helper functions from VisionCamera:

const device = ...
const format = useCameraFormat(device, [
  { videoAspectRatio: 16 / 9 },
  { videoResolution: { width: 3048, height: 2160 } },
  { fps: 60 }
])

The filter is ordered by priority (descending), so if there is no format that supports both 4k and 60 FPS, the function will prefer 4k@30FPS formats over 1080p@60FPS formats, because 4k is a more important requirement than 60 FPS.

If you want to record slow-motion videos, you want a format with a really high FPS setting, for example:

const device = ...
const format = useCameraFormat(device, [
  { fps: 240 }
])

If there is no format that has exactly 240 FPS, the closest thing to it will be used.

You can also use the 'max' flag to just use the maximum available resolution:

const device = ...
const format = useCameraFormat(device, [
  { videoResolution: 'max' },
  { photoResolution: 'max' }
])

Templates​

For common use-cases, VisionCamera also exposes pre-defined Format templates:

const device = ...
const format = useCameraFormat(device, Templates.Snapchat)

Camera Props​

The Camera View provides a few props that depend on the specified format. For example, you can only set the fps prop to a value that is supported by the current format. So if you have a format that supports 240 FPS, you can set the fps to 240:

function App() {
  // ...
  const format = ...
  const fps = format.maxFps >= 240 ? 240 : format.maxFps

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      format={format}
      fps={fps}
    />
  )
}

Other props that depend on the format:

  • fps: Specifies the frame rate to use
  • videoHdr: Enables HDR video capture and preview
  • photoHdr: Enables HDR photo capture
  • lowLightBoost: Enables a night-mode/low-light-boost for photo or video capture and preview
  • videoStabilizationMode: Specifies the video stabilization mode to use for the video pipeline
  • pixelFormat: Specifies the pixel format to use for the video pipeline

🚀 Next section: Taking Photos​