PurpleCallio documentation
Add Video Calling to Angular
The PurpleCallio Angular SDK wraps the same call engine as the JavaScript SDK in an Angular-idiomatic service, exposing connection state, participants, and media as RxJS observables.
Install the package
npm install @purplecallio/angular @purplecallio/sdk. Requires Angular 16 or later — @angular/core, @angular/common, and rxjs 7.4+ are peer dependencies already present in any modern Angular app.
Configure and join with a service
Inject PurpleCallioService, call configure() with a participant token from your backend, then join() to connect signaling and WebRTC. The service is provided in root, so a single instance is shared across your app.
Render with observables
Bind connectionState$, participants$, remoteStream$, and localStream$ with the async pipe, and render streams with the purplecallioVideo directive on a plain <video> element.
What's supported
Join/leave, camera and microphone enable/disable/toggle, screen sharing start/stop, live participant and connection-state tracking. The raw engine instance is intentionally not exposed, keeping the public surface small.
Join a call from an Angular component
import { Component, OnDestroy, OnInit } from "@angular/core";
import { PurpleCallioService } from "@purplecallio/angular";
@Component({
selector: "app-call",
standalone: true,
template: `
<video purplecallioVideo [stream]="call.localStream$ | async" [muted]="true"></video>
<video purplecallioVideo [stream]="call.remoteStream$ | async"></video>
`,
})
export class CallComponent implements OnInit, OnDestroy {
constructor(public call: PurpleCallioService) {}
ngOnInit() {
this.call.configure({ token: this.participantToken, callId: this.callId, signalUrl: this.signalUrl });
this.call.join();
}
ngOnDestroy() {
this.call.leave();
}
}Related documentation
Build with PurpleCallio
Explore the documentation to choose hosted UI, React components, or the headless SDK for your integration.