Angular Live Guest Queue Tutorial
Build a local guest queue with mediasfu-angular@2.3.1. 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
{"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":{"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"}}}}}
{"compilerOptions":{"strict":true,"target":"ES2022","module":"ES2022","moduleResolution":"bundler","lib":["DOM","ES2022"],"skipLibCheck":true},"include":["src/**/*.ts"]}
import { bootstrapApplication } from '@angular/platform-browser';
import { GuestQueueComponent } from './guest-queue.component';
bootstrapApplication(GuestQueueComponent).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>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'; }
<!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.