Angular SDK

@applooma/rtc-angular puts the Web SDK behind an injectable AppEngineService. Call state arrives as RxJS observables for the async pipe, and a standalone component renders video. Every Web SDK type is re-exported.

Install#

npm install @applooma/rtc-angular

Peer dependencies: @angular/core and @angular/common 17 or newer, and rxjs7. The package ships in Angular's partial-compilation format, so it works with the standard CLI build and ahead-of-time compilation.

Quick start#

Provide the service on the component that owns the call. It leaves the channel when that component is destroyed. The token comes from your server, as in the Quickstart.

import { Component, inject } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { firstValueFrom } from 'rxjs';
import { AppEngineService, AppVideoViewComponent, provideAppEngine } from '@applooma/rtc-angular';

@Component({
  selector: 'call-page',
  standalone: true,
  imports: [AsyncPipe, AppVideoViewComponent],
  providers: [provideAppEngine({ appId: 'YOUR_APP_ID' })],
  template: `
    <p>{{ rtc.connectionState$ | async }}</p>
    <button (click)="join()">Join</button>
    <button (click)="rtc.leave()">Leave</button>
    <button (click)="toggleCamera()">Camera</button>

    <app-video-view [engine]="rtc.engine" [local]="true" class="pip" />
    @for (user of rtc.remoteUsers$ | async; track user.uid) {
      <app-video-view [track]="user.videoTrack" class="tile" />
    }
  `,
})
export class CallPage {
  readonly rtc = inject(AppEngineService);

  async join() {
    const { token, wsUrl } = await fetch('/api/rtc-token').then((r) => r.json());
    await this.rtc.join(token, wsUrl, { role: 'host', camera: true, microphone: true });
  }

  async toggleCamera() {
    await this.rtc.setCamera(!(await firstValueFrom(this.rtc.cameraOn$)));
  }
}

AppEngineService#

Observables

Methods

• join(token, wsUrl, options?), leave()
• setCamera(on), setMicrophone(on), setScreenShare(on), switchCamera()
• sendMessage(body)
• engine — the underlying engine, for everything else in the Web SDK.

Engine callbacks run inside the Angular zone, so templates update without manual change detection.

<app-video-view>#

Remote diagnostics#

This package wraps the Web SDK engine, so remote diagnostics work here with no extra setup (Web SDK 0.4.6 or later). The engine keeps recent log lines and a stats snapshot in memory (never audio, video, messages or names) and uploads them, scrubbed, after a call with a problem or when support turns collection on. Call engine.uploadDiagnostics('user-report')on the service's engine to send them yourself, for example from a "Report a problem" button. Opt out with provideAppEngine({ appId, remoteDiagnostics: false }).

What changed#

0.1.2

• README and this page describe remote diagnostics (uploadDiagnostics, remoteDiagnostics: false). No API changes.

0.1.1

• Requires Web SDK 0.4.7, which adds a cloud proxy over TLS 443 with automatic retry.

0.1.0

• First release.