Run Participants and Collaboration in Angular

Build the people-facing part of a room with mediasfu-angular@2.3.1: open the participant list, admit people, respond to requests, assign room authority, message the room, run polls, organize breakouts, use the whiteboard, and control recording.

This guide begins after your application has an authorized room session. Follow the Angular room lifecycle first. Keep room creation and account credentials on your backend.

Start with the supplied room experience

MediasfuGeneric already brings the participant, waiting, request, messaging, poll, breakout, whiteboard, and recording workspaces into one room. Use that experience for the first release so its controls share the same participant, role, socket, and media state.

The current pre-join component still checks its credential input before calling custom create or join callbacks. Do not put an account key in an Angular app to make that screen work. Complete the approved backend handoff described in the room lifecycle guide before mounting the supplied room.

Open package workspaces from your Angular controls

The launcher services toggle package-owned workspaces. Inject them into the component that already owns your current room state.

import { Component } from '@angular/core';
import {
  LaunchBreakoutRooms,
  LaunchConfigureWhiteboard,
  LaunchMessages,
  LaunchParticipants,
  LaunchPoll,
  LaunchRecording,
  LaunchRequests,
  LaunchWaiting,
} from 'mediasfu-angular';

@Component({
  selector: 'app-room-tools',
  template: `
    <button (click)="openParticipants()">People</button>
    <button (click)="openMessages()">Messages</button>
    <button (click)="openPolls()">Polls</button>
  `,
})
export class RoomToolsComponent {
  participantsVisible = false;
  waitingVisible = false;
  requestsVisible = false;
  messagesVisible = false;
  pollVisible = false;
  breakoutsVisible = false;
  whiteboardVisible = false;
  recordingVisible = false;

  constructor(
    private readonly participants: LaunchParticipants,
    private readonly waiting: LaunchWaiting,
    private readonly requests: LaunchRequests,
    private readonly messages: LaunchMessages,
    private readonly polls: LaunchPoll,
    private readonly breakouts: LaunchBreakoutRooms,
    private readonly whiteboard: LaunchConfigureWhiteboard,
    private readonly recording: LaunchRecording,
  ) {}

  openParticipants() {
    this.participants.launchParticipants({
      isParticipantsModalVisible: this.participantsVisible,
      updateIsParticipantsModalVisible: (value) => this.participantsVisible = value,
    });
  }

  openMessages() {
    this.messages.launchMessages({
      isMessagesModalVisible: this.messagesVisible,
      updateIsMessagesModalVisible: (value) => this.messagesVisible = value,
    });
  }

  openPolls() {
    this.polls.launchPoll({
      isPollModalVisible: this.pollVisible,
      updateIsPollModalVisible: (value) => this.pollVisible = value,
    });
  }
}

Use the same pattern for waiting, requests, breakouts, whiteboard, and recording. Opening a workspace is not proof that its action succeeded. Keep the workspace connected to the current room state and wait for the resulting participant, poll, breakout, whiteboard, or recording update.

Participant authority

The supplied room uses these public surfaces:

ParticipantsModal for the participant list and available participant actions;
WaitingRoomModal to admit or reject waiting people;
RequestsModal to respond to room requests;
CoHostModal for co-host responsibilities;
PanelistsModalComponent to add, remove, and focus panelists; and
PermissionsModalComponent to apply individual or room permission changes.

Only show an action when the current room role permits it. A successful click must result in updated room state; closing a modal or changing a local array is not proof of a server-authorized change.

Task	Observable success	If it fails
Admit or reject	The person leaves the waiting list and either appears in the room or receives the rejection state.	Keep the item visible until a room update arrives; explain lost authority or connection.
Mute or restrict	The participant and affected media control show the new server state.	Restore the control to the current room value and allow a deliberate retry.
Remove	The participant receives the removal state and disappears for remaining users.	Do not report success from a local list change. Refresh current participants.
Assign co-host or panelist	The new role and permitted controls appear for that person.	Keep the previous role and explain that the assignment was not accepted.
Change permission	The affected control follows the new permission for the target participant.	Restore the previous value and keep unrelated permissions unchanged.

Messages and polls

MessagesModal owns the room message view. Send only while the user is still in the room, distinguish room-wide and direct recipients, and wait for the current message state before showing a send as complete.

For polls, the root package exports the complete create, vote, and end services:

import {
  HandleCreatePoll,
  HandleEndPoll,
  HandleVotePoll,
} from 'mediasfu-angular';

export class PollActions {
  constructor(
    private readonly createPoll: HandleCreatePoll,
    private readonly votePoll: HandleVotePoll,
    private readonly endPoll: HandleEndPoll,
  ) {}

  create(options: Parameters<HandleCreatePoll['handleCreatePoll']>[0]) {
    return this.createPoll.handleCreatePoll(options);
  }

  vote(options: Parameters<HandleVotePoll['handleVotePoll']>[0]) {
    return this.votePoll.handleVotePoll(options);
  }

  end(options: Parameters<HandleEndPoll['handleEndPoll']>[0]) {
    return this.endPoll.handleEndPoll(options);
  }
}

Disable duplicate submission while a poll action is pending. Show the poll as created, voted, or ended only after the room's poll update arrives.

Breakouts, whiteboard, and recording

For a breakout session, the host opens BreakoutRoomsModal, confirms the assignments, starts the session, observes each participant's destination, and stops the session before clearing app-owned assignment drafts. A reconnect must load current breakout state instead of starting another session.

For whiteboarding, open ConfigureWhiteboardModal, start the shared board from the current room, and render Whiteboard. Stop the shared board before discarding app-owned drawing tools or exports. A local canvas alone is not a shared whiteboard.

For recording, open RecordingModal, explain what will be captured, collect the consent your product requires, and use the package recording controls. Show recording as active only after the room confirms it. On stop, wait for the stopped state and follow your backend's retention and access policy.

Cleanup and reconnect

When a participant leaves or the room ends, close package workspaces and clear app-owned selections, pending actions, drafts, timers, and temporary exports. After a reconnect, reload current room state before enabling moderation, collaboration, or recording controls. Never replay a previous action merely because its response was interrupted.

Release checklist

Build and test your Angular application, then run this release checklist in a real multi-user room before shipping.

Start with the supplied room experience​

Open package workspaces from your Angular controls​

Participant authority​

Messages and polls​

Breakouts, whiteboard, and recording​

Cleanup and reconnect​

Release checklist​