@applooma/rtc-angular

AppLooma RTC for Angular: an injectable AppEngineService exposing call state as RxJS observables, and a standalone <app-video-view> component. Built on @applooma/rtc-web; every Web SDK type is re-exported.

Install

npm install @applooma/rtc-angular

Peer dependencies: @angular/core and @angular/common 17 or newer, rxjs 7.

Quick start

Get a join token from your server (never put your API secret in the browser), then:

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

@Component({
  selector: 'call-page',
  standalone: true,
  imports: [AsyncPipe, AppVideoViewComponent],
  // One engine per call page; it leaves the channel when the page is destroyed.
  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" style="width:240px;height:180px" />
    @for (user of rtc.remoteUsers$ | async; track user.uid) {
      <app-video-view [track]="user.videoTrack" style="width:320px;height:240px" />
    }
  `,
})
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$)));
  }
}

API

AppEngineService

| | | |---|---| | engine | The underlying AppEngine, for anything not wrapped here. | | connectionState$, remoteUsers$, activeSpeakers$ | Call state, replayed to new subscribers. | | cameraOn$, micOn$, screenShareOn$ | Your own tracks. | | message$, remoteStats$, error$, localVideoChanged$ | Event streams. | | join(), leave(), setCamera(), setMicrophone(), setScreenShare(), switchCamera(), sendMessage() | Actions. |

Engine callbacks run inside the Angular zone, so async-piped templates update on their own.

<app-video-view>: inputs track, or engine with local; mirror (defaults to on for local); fit ('cover' or 'contain').

Remote diagnostics

The engine is the Web SDK engine, so remote diagnostics work with no extra setup (Web SDK 0.4.6 or later): recent log lines and stats, never audio, video, messages or names, are uploaded scrubbed after a call with a problem or when support turns collection on. Call engine.uploadDiagnostics(reason) to send them yourself; opt out with remoteDiagnostics: false in the engine config.

Docs: https://applooma.dev/sdk/angular