Skip to main content

Preview

The Preview View​

The <Camera> React component renders a Preview view for the Camera.

FPS​

The Preview view is running at the same frame rate as the Video stream, configured by the fps prop, or 30 FPS by default.

<Camera {...props} fps={60} />

Resolution​

On iOS, the Video resolution also determines the Preview resolution, so if you Camera format has a low Video resolution, your Preview will also be in low resolution:

const lowResolutionFormat = useCameraFormat(device, [
  { videoResolution: { width: 640, height: 480 } },
])

On Android, the Preview will always be in full HD, or the Preview View's size, whichever is smaller.

Overlays and Masks​

On Android, the Preview View supports two implementation modes which are controllable through the androidPreviewViewType prop:

  • "surface-view": Uses a SurfaceView for rendering. This is more efficient and supports HDR rendering, but doesn't support masks, transparency, rotations or clipping.
  • "texture-view": Uses a TextureView for rendering. This is less efficient and doesn't support HDR rendering, but supports masks, transparency, rotations and clipping.
<Camera {...props} androidPreviewViewType="texture-view" />

🚀 Next section: Taking Photos​