Angular Live Guest Queue Tutorial

Build a local guest queue with mediasfu-angular@2.5.0. A host creates a webinar and uses the supplied Waiting and Requests controls before admitting a guest on a MediaSFU Community Edition server.

Prerequisites

• Node.js 18 to 20, a local MediaSFU Community Edition server, and two profiles.
• HTTPS or localhost; set the server origin in the component.

Project files

package.json

{"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.5.0","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"}}

angular.json

{"version":1,"projects":{"guest-queue":{"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":"guest-queue:build"}},"defaultConfiguration":"development"}}}}}

tsconfig.app.json

{"compilerOptions":{"strict":true,"target":"ES2022","module":"ES2022","moduleResolution":"bundler","lib":["DOM","ES2022"],"skipLibCheck":true},"include":["src/**/*.ts"]}

src/main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { GuestQueueComponent } from './guest-queue.component';
bootstrapApplication(GuestQueueComponent).catch((error: unknown) => console.error(error));

src/guest-queue.component.ts

import { Component } from '@angular/core';
import { MediasfuGeneric } from 'mediasfu-angular';
@Component({selector:'app-root',standalone:true,imports:[MediasfuGeneric],template:`
<main><h1>Live guest queue</h1><p>Create a webinar as host. Open Waiting or Requests before admitting a guest.</p>
<app-mediasfu-generic [localLink]="communityServerUrl" [connectMediaSFU]="true" [returnUI]="true" /></main>`})
export class GuestQueueComponent { readonly communityServerUrl = 'http://localhost:3000'; }

src/index.html

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Live guest queue</title></head><body><app-root></app-root></body></html>

Run

npm install
npm start

Expected result

Create a webinar as host and have the second profile request entry. The host can inspect Waiting or Requests and allow or reject the guest according to the room configuration.

Recovery

Keep a guest in the queue when a decision fails or the host reconnects. Refresh the queue before retrying; do not tell a guest that they were admitted until their room UI has opened.

Cleanup

Reject unused requests, use Leave in both profiles, and stop the local server when testing is finished. Leaving does not end every participant's room.

Release boundary

This is the supported local-server route. In a distributed or hosted app, authenticate users and make create/join decisions on the backend. Do not put a Cloud API key in Angular: the current supplied Cloud pre-join flow checks for a browser credential before calling a callback. Use an approved backend room destination or server-issued handoff instead.