Skip to main content

Angular Compact Call Tutorial

Build a local compact call with mediasfu-angular@2.3.1: create or join a room, use microphone and camera, share a screen, see remote media, and leave. This complete Angular project uses a local MediaSFU Community Edition server; there is no hosted MediaSFU credential in the browser.

Prerequisites​

  • Node.js 18 to 20 and a running MediaSFU Community Edition server.
  • HTTPS or localhost, a camera and microphone, and two browser profiles.
  • Set communityServerUrl below to the server's actual origin.

Project files​

package.json
{"private":true,"scripts":{"start":"ng serve","build":"ng build"},"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"}}
angular.json
{"version":1,"projects":{"compact-call":{"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":"compact-call: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 { CompactCallComponent } from './compact-call.component';
bootstrapApplication(CompactCallComponent).catch((error: unknown) => console.error(error));
src/compact-call.component.ts
import { Component } from '@angular/core';
import { MediasfuGeneric } from 'mediasfu-angular';

@Component({selector:'app-root',standalone:true,imports:[MediasfuGeneric],template:`
  <main><h1>Compact call</h1><p>Create a room or join its event ID from another browser profile.</p>
  <app-mediasfu-generic [localLink]="communityServerUrl" [connectMediaSFU]="true" [returnUI]="true" />
  </main>`})
export class CompactCallComponent {
  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>Compact call</title></head><body><app-root></app-root></body></html>

Run​

npm install
npm start

Expected result​

Create a conference in the supplied pre-join screen, then join its event ID in a second browser profile. Both people can enable microphone and camera, see and hear each other, share a screen, and use Leave.

Recovery​

Treat a denied camera or microphone permission, a missing device, blocked autoplay, a failed transport, and cancelled screen selection as separate user states. Rejoin after a connection loss instead of reusing a stale local room.

Cleanup​

Use Leave in each browser, stop any app-owned tracks, and close the local room server when development ends. Leave is a personal departure; do not label it a host-wide end action.

Release boundary​

This is the supported local-server route. For a distributed or hosted app, keep create/join authority in the authenticated backend; never add a Cloud API key to this component. The supplied Angular Cloud pre-join screen requires a browser credential before it invokes a callback, so use the backend's approved room destination or a supported server-issued handoff rather than trying to bypass that check in client code.