Preview
The Preview View​
The <Camera>
component renders a Preview view for the Camera.
It can be styled like any other view, although in most cases you would want to just use style={{ flex: 1 }}
.
Resize Mode​
The Preview's scaling mode can be configured through the resizeMode
property, which can be either "cover"
(center-crop to fill the view) or "contain"
(scale to fit inside the view, potentially with black spacings).
Disable Preview​
If you don't need to display a Preview, you can set preview={false}
.
Since the Preview is a separate output stream, disabling it will save resources.
Skia Frame Processors will disable the native Preview to use a custom Skia Canvas instead.
Start/Stop Events​
When starting/stopping the Camera session or when switching Camera devices (e.g. from front -> back), the Preview View will momentarily stop receiving frames and appears "frozen".
To get notified about pauses in the preview view, use the onPreviewStarted
and onPreviewStopped
events:
<Camera
{...props}
onPreviewStarted={() => console.log('Preview started!')}
onPreviewStopped={() => console.log('Preview stopped!')}
/>
Preview Frame Rate (FPS)​
The Preview view is running at the same frame rate as the Video stream, configured by the fps
prop, or a value close to 30 FPS by default.
<Camera {...props} fps={60} />
See FPS for more information.
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 aSurfaceView
for rendering. This is more efficient and supports HDR rendering, but doesn't support masks, transparency, rotations or clipping."texture-view"
: Uses aTextureView
for rendering. This is less efficient and doesn't support HDR rendering, but supports masks, transparency, rotations and clipping.
<Camera {...props} androidPreviewViewType="texture-view" />