Skip to content

[bug] Web VideoTrackRenderer prevents parent component click events #625

Closed as not planned
@AoEiuV020

Description

@AoEiuV020

Describe the bug
I've encountered an issue with VideoTrackRenderer on the web where it blocks click events for the parent component.
Notably, this problem only appears on the web; in my testing on Windows and Linux, it works as expected.
Additionally, other child elements within the parent component still respond correctly to parent click events based on their positions.

Here's a code snippet that demonstrates the issue:
https://github.com/AoEiuV020/livekit_meeting/blob/rendererClick/lib/widgets/participant.dart#L145

  @override
  Widget build(BuildContext ctx) => Container(
        foregroundDecoration: BoxDecoration(
          border: widget.participant.isSpeaking && !isScreenShare
              ? Border.all(
                  width: 5,
                  color: LKColors.lkBlue,
                )
              : null,
        ),
        decoration: BoxDecoration(
          color: Theme.of(ctx).cardColor,
        ),
        child: InkWell(
                onTap: () => context.showErrorDialog(
                    'clicked video: ${widget.participant.identity}'),
          child: Stack(
            children: [
              // Video
              activeVideoTrack != null && !activeVideoTrack!.muted
                  ? VideoTrackRenderer(
                      renderMode: VideoRenderMode.auto,
                      activeVideoTrack!,
                      fit: RTCVideoViewObjectFit.RTCVideoViewObjectFitContain,
                    )
                  : const NoVideoWidget(),
              // Bottom bar
              Align(
                alignment: Alignment.bottomCenter,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    ...extraWidgets(isScreenShare),
                    ParticipantInfoWidget(
                      title: widget.participant.name.isNotEmpty
                          ? '${widget.participant.name} (${widget.participant.identity})'
                          : widget.participant.identity,
                      audioAvailable: audioPublication?.muted == false &&
                          audioPublication?.subscribed == true,
                      connectionQuality: widget.participant.connectionQuality,
                      isScreenShare: isScreenShare,
                      enabledE2EE: widget.participant.isEncrypted,
                    ),
                  ],
                ),
              ),
              if (widget.showStatsLayer)
                Positioned(
                    top: 130,
                    right: 30,
                    child: ParticipantStatsWidget(
                      participant: widget.participant,
                    )),
            ],
          ),
        ),
      );

image

To Reproduce

Expected behavior

Platform information

Flutter version: 3.24.3
Plugin version: 2.2.8
Flutter target OS: Android
Flutter target OS version: 14
Flutter console log:

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions