Skip to main content

Build with MediaSFU Angular

Use mediasfu-angular@2.5.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 secure backend guide.

npm install mediasfu-angular@2.5.2

Choose where to begin​

What you want to buildStart here
Create or join a room securelyAngular room lifecycle
Prepare WebRTC and publish microphone or cameraWire the room operations
Receive and render participant mediaReceive media
Show participants, waiting users, and requestsParticipant authority
Mute, restrict, remove, or assign authorityParticipant authority
Add chat, polls, breakouts, whiteboard, or recordingAngular collaboration
Start or stop screen sharingScreen and rendered media
Share a tab's sound along with a screen shareScreen-share audio
Handle camera, microphone, and reconnect failuresRecovery and media controls
Build a completely custom room interfaceCustom UI responsibilities
Look up an exact class or option typeAngular 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, set localLink to your MediaSFU server's address.

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, your code must handle each of those responsibilities. 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 test browser permissions or remote playback.

More for Angular​

Last updated on