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();
}
}Still having trouble?
If you're having an issue with this integration, our support team can help.
Contact SupportRelated documentation
Build with PurpleCallio
Explore the documentation to choose hosted UI, React components, or the headless SDK for your integration.