Blueprint - Compact Call Screen

Plan a compact React call for one-to-one or small-group conversations while keeping the room lifecycle and media workflow intact.

This page is a product blueprint, not a copy/paste tutorial. It explains how the parts fit together. Use the linked operation guides for complete, checked code.

This guide uses mediasfu-reactjs@4.3.7.

Prerequisites

• A working secure create and join flow.
• Camera and microphone permission on each target device.
• An application rule that identifies the host and ordinary participants.
• A tested participant-leave and host-end path.

Operation map

User experience	React operation or surface	Your application owns
Enter the call	ModernMediasfuGeneric with backend-backed create/join adapters	Authentication, invitation UI, room policy
See who is present	Live participants state or launchParticipants	Presence copy and compact layout
Use microphone and camera	clickAudio, clickVideo or supplied controls	Permission guidance and denied-state copy
Share a screen	clickScreenShare or supplied control	Product policy and cancellation guidance
Leave or end	Supplied role-aware confirmation flow	Navigation after teardown

Layout

Keep one dominant media region, a compact participant strip, and a bottom control row. Use the supplied room first. If the product only needs visual changes, use UI overrides rather than replacing the room.

VideoCard and MiniCard are current React exports for card-level composition. Reusing them keeps media rendering attached to the room workflow while your app owns styling and placement.

Build sequence

1. Mount ModernMediasfuGeneric with backend-backed create/join adapters.
2. Prove local and remote media between two users.
3. Apply compact card and control styling.
4. Add participant presence and explicit permission-denied states.
5. Keep the supplied semantic exit confirmation for participant leave and host end.

Recovery

• Explain how to retry after camera or microphone denial.
• Distinguish “connected without media” from “publishing media.”
• Keep the user in control when screen sharing is cancelled.
• Show a reconnect state without inventing participant or media data.

Validation and teardown

Test two real users in separate browser profiles or devices. Verify audio in both directions, video rendering, screen-share start and stop, participant churn, and poor-network recovery. A participant must leave through the room action; a host must use the end-for-everyone action. Confirm local tracks and app-owned call state are cleared afterward.

Continue with React participant workspaces and the React UI ownership ladder.