Build with MediaSFU Angular

Essential next steps

• API and reference documentation
• Choose standard, hybrid, or fully headless UI
• Headless and hybrid implementation
• Starter projects and showcases
• Framework examples and recipes
• Current release and migration notes
• Troubleshooting and recovery

Use mediasfu-angular@2.3.2 when your application is Angular and you want a complete room, selected MediaSFU workspaces, or an Angular-owned interface backed by the SDK's room and media services.

You can begin locally with restricted development credentials. Before sharing or releasing the app, move reusable Cloud credentials behind the production credential boundary.

npm install mediasfu-angular@2.3.2

Choose where to begin

What you want to build	Start here
Create or join a room securely	Angular room lifecycle
Prepare WebRTC and publish microphone or camera	Wire the room operations
Receive and render participant media	Receive media
Show participants, waiting users, and requests	Participant authority
Mute, restrict, remove, or assign authority	Participant authority
Add chat, polls, breakouts, whiteboard, or recording	Angular collaboration
Start or stop screen sharing	Screen and rendered media
Handle camera, microphone, and reconnect failures	Recovery and media controls
Build a completely custom room interface	Custom UI responsibilities
Look up an exact class or option type	Angular API reference

Copy/paste starter

The supplied Angular component is the quickest way to verify that room policy, permissions, transports, rendering, and exit behavior work together.

meeting.component.ts

import { Component } from '@angular/core';
import { MediasfuGeneric } from 'mediasfu-angular';

@Component({
  selector: 'app-meeting',
  standalone: true,
  imports: [MediasfuGeneric],
  template: '<app-mediasfu-generic></app-mediasfu-generic>',
})
export class MeetingComponent {}

For MediaSFU Cloud, do not put reusable account credentials in this component. Create or join through your authenticated backend as described in the Angular room lifecycle. For a self-hosted deployment, configure the package with your approved localLink.

What the supplied room handles

The complete room connects more than a visible layout. It coordinates:

• create/join state and the active socket;
• RTP device and send/receive transports;
• microphone, camera, screen-share, and permission state;
• remote audio and video rendering;
• participant, waiting, request, role, and permission workspaces;
• chat, polls, breakouts, whiteboard, and recording controls;
• alerts, confirmation dialogs, room exit, and state cleanup.

If you replace the supplied room, implement those responsibilities deliberately. Do not assume a custom component receives every operation as one convenience object; use the live room state plus the public Angular services documented in the operation guides.

Room shapes

Choose MediasfuGeneric first. Once one complete room works, you can select MediasfuConference, MediasfuWebinar, MediasfuBroadcast, or MediasfuChat for a more specific experience.

Before release

Test with at least two browser sessions. Confirm create, join, participant updates, microphone, camera, remote audio/video, screen share, participant leave, host behavior, reconnect, and cleanup. A successful Angular build does not prove browser permissions or remote playback.