Angular Host Dashboard Tutorial
Build a host dashboard with mediasfu-angular@2.3.1. The supplied local room
UI includes participant, request, media, and room-setting surfaces for a local
MediaSFU Community Edition server.
Prerequisites
- Node.js 18 to 20, a local MediaSFU Community Edition server, and two browser profiles.
- HTTPS or
localhost; set the local server origin in the component.
Project files
{"private":true,"scripts":{"start":"ng serve"},"dependencies":{"@angular/animations":"19.2.20","@angular/cdk":"19.2.19","@angular/common":"19.2.20","@angular/compiler":"19.2.20","@angular/core":"19.2.20","@angular/forms":"19.2.20","@angular/platform-browser":"19.2.20","@angular/router":"19.2.20","@fortawesome/angular-fontawesome":"1.0.0","@fortawesome/fontawesome-svg-core":"6.7.2","@fortawesome/free-brands-svg-icons":"6.7.2","@fortawesome/free-solid-svg-icons":"6.7.2","@mediapipe/selfie_segmentation":"0.1.1675465747","@zxing/ngx-scanner":"19.0.0","bootstrap":"5.3.8","mediasoup-client":"3.20.0","mediasfu-angular":"2.3.1","ngx-cookie-service":"19.1.2","rxjs":"7.8.0","socket.io-client":"4.8.3","tslib":"2.8.1","zone.js":"0.15.1"},"devDependencies":{"@angular-devkit/build-angular":"19.2.14","@angular/cli":"19.2.14","typescript":"5.5.4"}}
{"version":1,"projects":{"host-dashboard":{"projectType":"application","root":"","sourceRoot":"src","architect":{"build":{"builder":"@angular-devkit/build-angular:application","options":{"browser":"src/main.ts","polyfills":["zone.js"],"tsConfig":"tsconfig.app.json","index":"src/index.html","assets":[],"styles":[]}},"serve":{"builder":"@angular-devkit/build-angular:dev-server","configurations":{"development":{"buildTarget":"host-dashboard:build"}},"defaultConfiguration":"development"}}}}}
{"compilerOptions":{"strict":true,"target":"ES2022","module":"ES2022","moduleResolution":"bundler","lib":["DOM","ES2022"],"skipLibCheck":true},"include":["src/**/*.ts"]}
import { bootstrapApplication } from '@angular/platform-browser';
import { HostDashboardComponent } from './host-dashboard.component';
bootstrapApplication(HostDashboardComponent).catch((error: unknown) => console.error(error));
import { Component } from '@angular/core';
import { MediasfuGeneric } from 'mediasfu-angular';
@Component({selector:'app-root',standalone:true,imports:[MediasfuGeneric],template:`
<main><h1>Host dashboard</h1><p>Create as host, then open Participants, Requests, and room settings.</p>
<app-mediasfu-generic [localLink]="communityServerUrl" [connectMediaSFU]="true" [returnUI]="true" /></main>`})
export class HostDashboardComponent { readonly communityServerUrl = 'http://localhost:3000'; }
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Host dashboard</title></head><body><app-root></app-root></body></html>
Run
npm install
npm start
Expected result
Create the room as host and join from a second profile. The host can open the participant and request surfaces while the guest sees only controls allowed by the room's policy.
Recovery
Refresh participant state after reconnecting before repeating a moderation action. Treat a denied action as room policy, not a transport error.
Cleanup
Both people use Leave. Clear any app-held selected-participant state and stop the local server after the test. This package does not publish a separate, role-aware host-wide end action.
Release boundary
This is the supported local-server route. Hosted create/join decisions belong to an authenticated backend; never put a Cloud API key in the browser. The current supplied Angular Cloud pre-join flow checks browser credentials before a callback, so use an approved backend room destination or server-issued handoff for release rather than bypassing that check.