VideoCardOptions class

Configuration options for the VideoCard widget.

Provides properties to customize the video participant card display, including video stream rendering, name badge, animated waveform, video/audio controls, and mirror mode for local camera.

Core Display Properties:

name: Participant display name
participant: Participant model (used for mute state, audio level, permissions)
parameters: VideoCardParameters providing runtime state (audioDecibels, socket, etc.)
videoStream: MediaStream containing video track; if null, renders audio-only fallback
remoteProducerId: Producer ID for video stream (used for track identification)
eventType: Meeting type (video/broadcast/chat/conference/webinar) affecting controls visibility

Video Rendering:

forceFullDisplay: If true, forces video fill entire card (ignores aspect ratio)
doMirror: If true, applies horizontal flip (CSS scaleX(-1)) for local camera
backgroundColor: Fallback background color when no video (default: #2c678f blue)

Audio Visualization:

barColor: Waveform bar color (default: red); animated based on audio levels
Waveform displays when: video paused/off + participant unmuted + audio detected

Controls/Info Overlays:

showControls: If true, displays audio/video toggle buttons (default: true)
showInfo: If true, displays participant name badge (default: true)
controlsPosition: Button placement: 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' (default: 'topLeft')
infoPosition: Name badge placement: same options (default: 'topRight')
videoInfoComponent: Custom widget override for info area (replaces name badge)
videoControlsComponent: Custom widget override for controls area (replaces buttons)

Avatar/Image (for audio-only fallback):

imageSource: Participant image URL for MiniCard avatar
roundedImage: If true, renders circular avatar (default: false)
imageStyle: Map styling for avatar container
textColor: Name badge text color (default: black)

Media Control:

controlUserMedia: Function handling mute/video toggle actions; default=controlMedia
- Checks host/coHost permissions via coHostResponsibility
- Sends socket events to control remote participants
- Only host/coHost with media permission can control others

Builder Hooks (5):

customBuilder: Full widget replacement; receives VideoCardOptions
wrapperBuilder: Override Stack wrapper; receives stackChildren + default
containerBuilder: Override Container; receives child + default
infoBuilder: Override name badge/waveform overlay; receives nameBadge + waveform + default
overlayBuilder: Override waveform overlay; receives waveform + default
waveformBuilder: Override animated bars; receives animationControllers + default

Styling Properties:

containerPadding/containerMargin/containerAlignment/containerDecoration: Outer container layout
overlayDecoration: BoxDecoration for waveform overlay layer
overlayPadding: Padding for overlay content
nameContainerDecoration: BoxDecoration for name badge container
nameContainerPadding: Padding for name badge text
nameTextStyle: TextStyle override for name text

Usage Patterns:

Basic Video Card:

VideoCard(
  options: VideoCardOptions(
    parameters: parameters,
    name: 'John Doe',
    remoteProducerId: 'producer-123',
    eventType: EventType.conference,
    videoStream: mediaStream,
    participant: participant,
  ),
)

Local Camera (Mirrored):

VideoCard(
  options: VideoCardOptions(
    parameters: parameters,
    name: 'You',
    remoteProducerId: 'local-producer',
    eventType: EventType.conference,
    videoStream: localStream,
    participant: localParticipant,
    doMirror: true,
  ),
)

Hide Controls (View-Only):

VideoCard(
  options: VideoCardOptions(
    parameters: parameters,
    name: 'John Doe',
    remoteProducerId: 'producer-123',
    eventType: EventType.broadcast,
    videoStream: mediaStream,
    participant: participant,
    showControls: false,
  ),
)

Custom Controls Overlay:

VideoCard(
  options: VideoCardOptions(
    parameters: parameters,
    name: 'John Doe',
    remoteProducerId: 'producer-123',
    eventType: EventType.conference,
    videoStream: mediaStream,
    participant: participant,
    videoControlsComponent: Row(
      children: [
        IconButton(icon: Icon(Icons.mic_off), onPressed: muteAction),
        IconButton(icon: Icon(Icons.videocam_off), onPressed: videoOffAction),
        IconButton(icon: Icon(Icons.pin), onPressed: pinAction),
      ],
    ),
  ),
)

Builder Hook Override:

VideoCard(
  options: VideoCardOptions(
    parameters: parameters,
    name: 'John Doe',
    remoteProducerId: 'producer-123',
    eventType: EventType.conference,
    videoStream: mediaStream,
    participant: participant,
    containerBuilder: (context, child, defaultContainer) {
      return Stack(
        children: [
          defaultContainer,
          Positioned(
            bottom: 8,
            right: 8,
            child: Icon(Icons.verified, color: Colors.blue),
          ),
        ],
      );
    },
  ),
)

Override Integration: Integrates with MediasfuUICustomOverrides for global styling:

overrides: MediasfuUICustomOverrides(
  videoCardOptions: ComponentOverride<VideoCardOptions>(
    builder: (existingOptions) => VideoCardOptions(
      parameters: existingOptions.parameters,
      name: existingOptions.name,
      remoteProducerId: existingOptions.remoteProducerId,
      eventType: existingOptions.eventType,
      videoStream: existingOptions.videoStream,
      participant: existingOptions.participant,
      containerDecoration: BoxDecoration(
        border: Border.all(color: Colors.gold, width: 2),
        borderRadius: BorderRadius.circular(12),
      ),
      barColor: Colors.cyan,
    ),
  ),
),

Waveform Display Logic:

Waveform visible when: !forceFullDisplay && participant.muted == false && audioDetected
Displays 9 animated bars representing audio levels
Bar heights animate based on audioDecibels from parameters.audioDecibels
Hidden when video active or participant muted

Permission-Based Controls:

Host (islevel='2') can always control others
CoHost (islevel='1') can control if coHostResponsibility includes media permission
Participants (islevel='0') can only control themselves
Socket event 'controlMedia' emitted when controlling remote participants

Audio Decibel Integration:

Uses AudioDecibelCheck component to monitor real-time audio levels
Polls parameters.audioDecibels list every 2 seconds
Matches by participant.name against audioDecibels[i].name
Updates waveform animation controllers based on detected level

Constructors

VideoCardOptions({required VideoCardParameters parameters, required String name, Color barColor = const Color.fromARGB(255, 232, 46, 46), Color textColor = const Color.fromARGB(255, 25, 25, 25), String imageSource = '', bool roundedImage = false, Map<String, dynamic> imageStyle = const {}, required String remoteProducerId, required EventType eventType, bool forceFullDisplay = false, required MediaStream? videoStream, bool showControls = true, bool showInfo = true, Widget? videoInfoComponent, Widget? videoControlsComponent, String controlsPosition = 'topLeft', String infoPosition = 'topRight', required Participant participant, Color backgroundColor = const Color(0xFF2c678f), bool doMirror = false, ControlMediaType controlUserMedia = controlMedia, VideoCardType? customBuilder, EdgeInsetsGeometry? containerPadding, EdgeInsetsGeometry? containerMargin, AlignmentGeometry? containerAlignment, BoxDecoration? containerDecoration, BoxDecoration? overlayDecoration, EdgeInsetsGeometry? overlayPadding, BoxDecoration? nameContainerDecoration, EdgeInsetsGeometry? nameContainerPadding, TextStyle? nameTextStyle, VideoCardWrapperBuilder? wrapperBuilder, VideoCardContainerBuilder? containerBuilder, VideoCardInfoBuilder? infoBuilder, VideoCardOverlayBuilder? overlayBuilder, VideoCardWaveformBuilder? waveformBuilder})

Properties

backgroundColor → Color: final
barColor → Color: final
containerAlignment → AlignmentGeometry?: final
containerBuilder → VideoCardContainerBuilder?: final
containerDecoration → BoxDecoration?: final
containerMargin → EdgeInsetsGeometry?: final
containerPadding → EdgeInsetsGeometry?: final
controlsPosition → String: final
controlUserMedia → ControlMediaType: final
customBuilder → VideoCardType?: final
doMirror → bool: final
eventType → EventType: final
forceFullDisplay → bool: final
hashCode → int: The hash code for this object.
no setterinherited
imageSource → String: final
imageStyle → Map<String, dynamic>: final
infoBuilder → VideoCardInfoBuilder?: final
infoPosition → String: final
name → String: final
nameContainerDecoration → BoxDecoration?: final
nameContainerPadding → EdgeInsetsGeometry?: final
nameTextStyle → TextStyle?: final
overlayBuilder → VideoCardOverlayBuilder?: final
overlayDecoration → BoxDecoration?: final
overlayPadding → EdgeInsetsGeometry?: final
parameters → VideoCardParameters: final
participant → Participant: final
remoteProducerId → String: final
roundedImage → bool: final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
showControls → bool: final
showInfo → bool: final
textColor → Color: final
videoControlsComponent → Widget?: final
videoInfoComponent → Widget?: final
videoStream → MediaStream?: final
waveformBuilder → VideoCardWaveformBuilder?: final
wrapperBuilder → VideoCardWrapperBuilder?: final

Methods

noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toString() → String: A string representation of this object.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited

VideoCardOptions class

Constructors

Properties

Methods

Operators

video_card library