feat: cam object fit

[Aldiwildan77]

Changes to the Cam Component’s object-fit

Previously, the <Cam /> component was hardcoded with object-fit: cover, which forced the video to fill its container. This approach resulted in parts of the video being cropped—often giving a “zoomed-in” appearance.

Key Changes

1. Dynamic object-fit via Props

• Before:
  The component always used object-fit: cover.

• Now:
  The component accepts an objectFit prop, allowing you to dynamically set the CSS property.

  • cover:
    The video fills the container while maintaining its aspect ratio. If the container’s aspect ratio differs from the video, some parts of the video will be cropped.
  • contain:
    The video is scaled to fit entirely within the container without cropping, potentially adding letterboxing (space).

2. Enhanced Flexibility

• Context-Based Display:
  You can now easily switch between a full-bleed immersive preview (cover) and a mode that displays the entire video frame (contain).

• Adaptability:
  This dynamic approach adapts the video display based on the application’s requirements or user preferences.

3. Separation of Concerns

• Layout Management:
  The parent container controls the overall layout and size.

• Component Focus:
  The component focuses solely on video rendering. This separation improves reusability and makes integration into various designs easier.

Example Usage

Below is an example of how to use the updated component with dynamic object-fit:

<Cam
  mirrored={currentFacingMode === 'user'}
  objectFit="contain" // Dynamically sets the object-fit to 'contain' or 'cover'
  autoPlay
  playsInline
  muted
/>

Summary

This change improves the overall flexibility of the component, ensuring that you can easily switch between different display modes to meet the needs of your application or user interface design.