@cometchat/skills 4.4.1 → 5.0.0

package/skills/cometchat-angular-calls/references/recording-screen-share.md

@@ -1,260 +0,0 @@
-# Recording + screen-share on Angular
-
-Angular wraps the same JS Calls SDK as React; SDK semantics are identical. For SDK-level details (recording flag, lifecycle events, screen-share via `getDisplayMedia`, browser support) read `cometchat-react-calls/references/recording-screen-share.md` first. This reference is the Angular-specific wiring.
-
----
-
-## Recording — opt-in per session
-
-Same `CallSettingsBuilder` flag as web:
-
-```ts
-// services/call.service.ts
-import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
-
-@Injectable({ providedIn: "root" })
-export class CallService {
-  buildSettings(sessionId: string, opts: { recording?: boolean; isAudioOnly?: boolean }) {
-    // SessionSettings OBJECT for joinSession(token, settings, container). These are
-    // object fields — NOT CallSettingsBuilder methods. On the v5 SDK there is no
-    // setSessionID / setIsAudioOnly / enableRecording / setShowRecordingButton.
-    return {
-      sessionType: (opts.isAudioOnly ?? false) ? "VOICE" : "VIDEO",
-      autoStartRecording: opts.recording ?? false,
-      hideRecordingButton: !(opts.recording ?? false),
-    };
-  }
-}
-```
-
-Toggle the recording prompt for the user via a settings input passed into your call screen component.
-
----
-
-## REC indicator (compliance)
-
-Wrap the lifecycle listener via NgZone — same rule as everywhere else in Angular calls:
-
-```ts
-@Component({
-  selector: "app-rec-badge",
-  template: `
-    <div class="rec-badge" *ngIf="recording">
-      <span class="rec-dot">●</span>
-      <span class="rec-label">REC</span>
-    </div>
-  `,
-  styles: [`
-    .rec-badge { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 4px;
-                 background: rgba(0,0,0,0.6); color: white; padding: 4px 8px; border-radius: 4px; }
-    .rec-dot { color: #ff3b30; animation: blink 1s infinite; }
-    @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.4; } }
-  `],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class RecBadgeComponent {
-  @Input() recording = false;
-}
-```
-
-In the parent component:
-
-```ts
-ngOnInit() {
-  // v5 uses the static event bus; addEventListener returns an unsubscribe fn.
-  const offStarted = CometChatCalls.addEventListener("onRecordingStarted", () => {
-    this.zone.run(() => { this.recording = true; this.cd.markForCheck(); });
-  });
-  const offStopped = CometChatCalls.addEventListener("onRecordingStopped", () => {
-    this.zone.run(() => { this.recording = false; this.cd.markForCheck(); });
-  });
-  // Clean up in ngOnDestroy: offStarted(); offStopped();
-  // NOTE: there is no onRecordingFailed event/callback in v5 — surface plan/quota
-  // errors from the joinSession promise rejection instead.
-  // ... build settings, joinSession ...
-}
-```
-
-Compliance reminder: in two-party-consent jurisdictions (parts of the US, much of the EU under GDPR Art. 6/7), the REC indicator is legally required for active recording. Don't omit it.
-
----
-
-## Screen sharing — Angular composition
-
-Browser `getDisplayMedia` — same as web. Angular wraps the user-gesture-required call in a click handler:
-
-```ts
-@Component({
-  selector: "app-screen-share-button",
-  template: `
-    <button (click)="onClick()" [disabled]="!supported" [class.active]="sharing">
-      {{ sharing ? "Stop sharing" : "Share screen" }}
-    </button>
-    <div class="hint" *ngIf="!supported">
-      Screen sharing not supported in this browser.
-    </div>
-  `,
-})
-export class ScreenShareButtonComponent {
-  @Output() shareStarted = new EventEmitter<void>();
-  @Output() shareEnded = new EventEmitter<void>();
-  sharing = false;
-  supported = typeof navigator !== "undefined" && "mediaDevices" in navigator && "getDisplayMedia" in navigator.mediaDevices;
-
-  async onClick() {
-    if (!this.supported) return;
-    if (this.sharing) {
-      CometChatCalls.stopScreenSharing();   // sync, void — not awaitable
-      this.sharing = false;
-      this.shareEnded.emit();
-    } else {
-      try {
-        CometChatCalls.startScreenSharing();  // sync, void
-        this.sharing = true;
-        this.shareStarted.emit();
-      } catch (err) {
-        if ((err as Error).name === "NotAllowedError") return;     // user canceled
-        console.warn("Screen share failed:", err);
-      }
-    }
-  }
-}
-```
-
-The `(click)` handler is in response to a real user gesture — browsers accept the `getDisplayMedia` permission request.
-
----
-
-## Screen-share viewer composition
-
-When another participant shares, render their screen track in a dedicated tile:
-
-```ts
-@Component({
-  selector: "app-screen-share-view",
-  template: `
-    <div class="screen-share-tile">
-      <video #screenVideo autoplay playsinline></video>
-      <div class="presenter-badge">{{ presenterName }} is sharing their screen</div>
-    </div>
-  `,
-})
-export class ScreenShareViewComponent implements AfterViewInit {
-  @Input() stream!: MediaStream;
-  @Input() presenterName = "Someone";
-  @ViewChild("screenVideo") videoRef!: ElementRef<HTMLVideoElement>;
-
-  ngAfterViewInit() {
-    if (this.videoRef?.nativeElement && this.stream) {
-      this.videoRef.nativeElement.srcObject = this.stream;
-    }
-  }
-}
-```
-
-Listen for screen-share events at the parent component level and pass the stream down:
-
-```ts
-// ⚠️ v5 bus callbacks take NO arguments — they're notifications, not stream
-// handoffs. The SDK renders the presenter's screen as a tile in its own layout;
-// you don't receive a MediaStream to attach yourself (that was the v4 model).
-ngOnInit() {
-  const offStart = CometChatCalls.addEventListener("onScreenShareStarted", () => {
-    this.zone.run(() => { this.someoneSharing = true; this.cd.markForCheck(); });
-  });
-  const offStop = CometChatCalls.addEventListener("onScreenShareStopped", () => {
-    this.zone.run(() => { this.someoneSharing = false; this.cd.markForCheck(); });
-  });
-  // Clean up in ngOnDestroy: offStart(); offStop();
-}
-```
-
----
-
-## Layout switch — main view vs screen share
-
-When someone shares, the main view should switch from "participant grid" to "screen share + thumbnails":
-
-```html
-<ng-container *ngIf="screenShareStream; else gridView">
-  <app-screen-share-view [stream]="screenShareStream" [presenterName]="presenterName"></app-screen-share-view>
-  <div class="thumbnail-strip">
-    <app-participant-tile *ngFor="let p of participants; trackBy: trackByUid" [participant]="p" size="small"></app-participant-tile>
-  </div>
-</ng-container>
-
-<ng-template #gridView>
-  <div class="participant-grid">
-    <app-participant-tile *ngFor="let p of participants; trackBy: trackByUid" [participant]="p" size="medium"></app-participant-tile>
-  </div>
-</ng-template>
-```
-
-Cleanly transitions via Angular's structural directive. No animation by default — add `@angular/animations` if you want a smooth swap.
-
----
-
-## Recording download — server-side only
-
-Same as web/RN — recordings live on CometChat's servers. To list/retrieve programmatically, use the dashboard REST API from your own backend (NEVER from Angular client code; the dashboard bearer token must not ship to clients).
-
-Server-side proxy pattern:
-
-```ts
-// Your backend (Node + Express)
-app.get("/api/recordings", requireAuth, async (req, res) => {
-  const recordings = await fetch(
-    `https://${region}.api-management.cometchat.io/v3/apps/${appId}/recordings`,
-    { headers: { Authorization: `Bearer ${process.env.DASHBOARD_BEARER}` } },
-  ).then(r => r.json());
-  res.json(recordings);
-});
-```
-
-Then the Angular service hits your own backend:
-
-```ts
-@Injectable({ providedIn: "root" })
-export class RecordingsService {
-  constructor(private http: HttpClient) {}
-  list() {
-    return this.http.get<Recording[]>("/api/recordings");
-  }
-}
-```
-
-The skill scaffolds this proxy layer for projects with a backend; for serverless-only projects, points users at the dashboard UI for recording retrieval.
-
----
-
-## Anti-patterns
-
-1. **Calling `startScreenSharing()` from a non-click handler.** Browsers reject — must be in a user-gesture stack. `(click)` works; `ngOnInit` doesn't.
-2. **No NgZone wrap on `onRecordingStarted` / `onScreenShareStarted`.** UI doesn't update.
-3. **Hardcoding the dashboard bearer token in `environment.ts`** to fetch recordings. Wrong — bearer is server-only. Always proxy.
-4. **No "REC" indicator.** Compliance violation.
-5. **Re-render thumbnails on every roster update** without `trackBy`. Tiles flicker; tracks die.
-6. **`getDisplayMedia` polyfilled with screen-recording-extension stubs** in old browsers. Don't — feature detect and disable the button instead.
-
----
-
-## Verification checklist
-
-- [ ] `autoStartRecording: true` (SessionSettings object field) opt-in via parent input (not always-on)
-- [ ] REC indicator visible to all participants when active
-- [ ] Recording lifecycle handlers wrapped in `NgZone.run` + `cd.markForCheck()`
-- [ ] Screen-share button feature-detects `getDisplayMedia`
-- [ ] Screen-share button triggered from `(click)`, not `ngOnInit`
-- [ ] `onScreenShareStarted` / `onScreenShareStopped` wrapped in NgZone
-- [ ] Layout swap renders screen-share view + thumbnail strip
-- [ ] `trackBy` on `*ngFor` for participant tiles
-- [ ] Recordings retrieved via server-side proxy, NOT direct dashboard API call from Angular
-
----
-
-## Pointers
-
-- `cometchat-react-calls/references/recording-screen-share.md` — sister reference (SDK details + browser semantics)
-- `references/ngzone-and-async-callbacks.md` — NgZone wrapping rules
-- `references/group-calls.md` — group calls + screen share interplay
-- `cometchat-angular-calls` SKILL.md — base hard rules

package/skills/cometchat-angular-calls/references/ringing-integration.md

@@ -1,133 +0,0 @@
-# Ringing — call signaling with custom UI (Angular)
-
-Same SDK API as web. Angular-specific deltas: NgZone-wrapped listener callbacks, BehaviorSubject-driven incoming/outgoing call state, root-level CallSignalingService.
-
-**Read first:** `cometchat-react-calls/references/ringing-integration.md` — full architecture, hard rules, anti-patterns.
-
-> ⚠️ **Testing ringing needs TWO ISOLATED browser contexts — not two tabs.** The Chat SDK keeps **one session per origin** (login persists in IndexedDB/localStorage keyed by `appId`, one WebSocket shared across all tabs). Two tabs of the same browser can't hold two different logins — the second overwrites the shared session, so there's no independent callee and `onIncomingCallReceived` never fires (the classic "Accept never appears"). Use a normal window for the caller + an **Incognito/private window** (or a different browser, or a second device) for the callee. *(Session/meeting mode — both sides `joinSession` a shared id — works fine in two same-browser tabs; only ringing needs isolated contexts.)*
-
----
-
-## CallSignalingService
-
-```ts
-import { Injectable, NgZone } from "@angular/core";
-import { BehaviorSubject } from "rxjs";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
-
-@Injectable({ providedIn: "root" })
-export class CallSignalingService {
-  readonly incoming$ = new BehaviorSubject<CometChat.Call | null>(null);
-  readonly outgoing$ = new BehaviorSubject<CometChat.Call | null>(null);
-  readonly active$ = new BehaviorSubject<string | null>(null);  // sessionId
-
-  private readonly listenerId = "app-call-signaling";
-
-  constructor(private zone: NgZone) {
-    CometChat.addCallListener(
-      this.listenerId,
-      new CometChat.CallListener({
-        onIncomingCallReceived: (call) => this.zone.run(() => this.incoming$.next(call)),
-        onOutgoingCallAccepted: (call) => this.zone.run(() => {
-          this.outgoing$.next(null);
-          this.active$.next(call.getSessionId());
-        }),
-        onOutgoingCallRejected: () => this.zone.run(() => this.outgoing$.next(null)),
-        onIncomingCallCancelled: () => this.zone.run(() => this.incoming$.next(null)),
-        onCallEndedMessageReceived: () => this.zone.run(() => {
-          this.incoming$.next(null);
-          this.outgoing$.next(null);
-          this.active$.next(null);
-        }),
-      }),
-    );
-  }
-
-  ngOnDestroy(): void {
-    CometChat.removeCallListener(this.listenerId);
-  }
-
-  async initiate(receiverUid: string, type: "audio" | "video" = "video"): Promise<void> {
-    const call = new CometChat.Call(
-      receiverUid,
-      type === "video" ? CometChat.CALL_TYPE.VIDEO : CometChat.CALL_TYPE.AUDIO,
-      CometChat.RECEIVER_TYPE.USER,
-    );
-    const outgoing = await CometChat.initiateCall(call, 60);
-    this.outgoing$.next(outgoing);
-  }
-
-  async accept(call: CometChat.Call): Promise<void> {
-    const accepted = await CometChat.acceptCall(call.getSessionId());
-    this.incoming$.next(null);
-    this.active$.next(accepted.getSessionId());
-  }
-
-  async reject(call: CometChat.Call): Promise<void> {
-    await CometChat.rejectCall(call.getSessionId(), CometChat.CALL_STATUS.REJECTED);
-    this.incoming$.next(null);
-  }
-
-  async cancel(call: CometChat.Call): Promise<void> {
-    await CometChat.rejectCall(call.getSessionId(), CometChat.CALL_STATUS.CANCELLED);
-    this.outgoing$.next(null);
-  }
-}
-```
-
----
-
-## Incoming-call component
-
-```ts
-@Component({
-  selector: "app-incoming-call",
-  template: `
-    <ng-container *ngIf="incoming$ | async as call">
-      <div role="alertdialog" aria-labelledby="incoming-title" class="incoming-call-overlay">
-        <h3 id="incoming-title">{{ call.getCallInitiator().getName() }}</h3>
-        <p>Incoming {{ call.getType() }} call</p>
-        <button (click)="svc.reject(call)" class="reject" aria-label="Decline call">Decline</button>
-        <button (click)="svc.accept(call)" class="accept" aria-label="Accept call">Accept</button>
-        <audio src="/assets/ringtone.mp3" autoplay loop></audio>
-      </div>
-    </ng-container>
-  `,
-})
-export class IncomingCallComponent {
-  incoming$ = this.svc.incoming$;
-  constructor(public svc: CallSignalingService) {}
-}
-```
-
-Mount in `app.component.html` (root) so it survives router changes.
-
----
-
-## Anti-patterns
-
-Web sister rules apply, plus Angular-specific:
-
-1. **Not `providedIn: "root"`.** Service registered per-module → multiple instances → duplicate listeners.
-2. **Skipping `NgZone.run`.** OnPush components don't update; UI feels stuck.
-3. **`(click)` handlers calling SDK methods directly.** Bypass the service → state desyncs.
-
----
-
-## Verification checklist
-
-- [ ] `CallSignalingService` is `providedIn: "root"`
-- [ ] All callbacks wrapped in `NgZone.run`
-- [ ] `IncomingCallComponent` mounted in `app.component.html`, not a route
-- [ ] `removeCallListener` in `ngOnDestroy`
-- [ ] Smoke: **two ISOLATED browser contexts** (normal + Incognito window, or two browsers/devices — NOT two tabs of one browser; the Chat SDK is a single shared session per origin), caller initiates, recipient sees alertdialog, accept opens session
-
----
-
-## Pointers
-
-- `cometchat-react-calls/references/ringing-integration.md` — canonical
-- `cometchat-angular-calls/SKILL.md`
-- `references/ngzone-and-async-callbacks.md`
-- Canonical docs: https://www.cometchat.com/docs/calls/javascript/ringing

package/skills/cometchat-angular-calls/references/server-web-push-vapid.md

@@ -1,100 +0,0 @@
-# Server-side Web Push VAPID for Angular
-
-The Web Push server template, VAPID setup, and Service Worker code from the React canonical reference apply identically to Angular — the server doesn't care which client framework rendered the page.
-
-**Canonical docs:** https://datatracker.ietf.org/doc/html/rfc8030
-**Read first:** `cometchat-react-calls/references/server-web-push-vapid.md` — full Node + Python templates, hard rules, sw.js receiver.
-
----
-
-## Angular-specific delta: Service Worker registration
-
-Angular has its own SW story (`@angular/service-worker` for the Angular SW + `ngsw-config.json`). For Web Push receiving a CometChat call, you typically want a **separate** SW (`/public/sw.js`) for push events — using the Angular SW for both routing your app's offline cache AND CometChat call pushes mixes concerns.
-
-```ts
-// app.config.ts or app.module.ts
-import { provideServiceWorker } from "@angular/service-worker";
-
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideServiceWorker("ngsw-worker.js", { enabled: environment.production }),
-    // ...
-  ],
-});
-
-// In a CallPushService:
-@Injectable({ providedIn: "root" })
-export class CallPushService {
-  async register(currentUserUid: string): Promise<void> {
-    if (!("serviceWorker" in navigator)) return;
-    // Register the call-specific worker
-    const reg = await navigator.serviceWorker.register("/sw-call.js", { scope: "/" });
-    const sub = await reg.pushManager.subscribe({
-      userVisibleOnly: true,
-      applicationServerKey: this.urlBase64ToUint8Array(environment.vapidPublicKey),
-    });
-    await this.api.registerWebPushSubscription(currentUserUid, sub.toJSON());
-  }
-
-  private urlBase64ToUint8Array(b64: string): Uint8Array {
-    const padding = "=".repeat((4 - (b64.length % 4)) % 4);
-    const base64 = (b64 + padding).replace(/-/g, "+").replace(/_/g, "/");
-    const raw = atob(base64);
-    const out = new Uint8Array(raw.length);
-    for (let i = 0; i < raw.length; ++i) out[i] = raw.charCodeAt(i);
-    return out;
-  }
-}
-```
-
-`/public/sw-call.js` is identical to the React canonical reference — the call-specific worker doesn't depend on Angular.
-
----
-
-## NgZone re-entry for in-app ringer
-
-When the Service Worker `postMessage`s the open client (so an in-app ringer can fire alongside the OS notification), Angular's change detection won't pick up state updates from outside the zone. Wrap:
-
-```ts
-@Injectable({ providedIn: "root" })
-export class IncomingCallService {
-  readonly incoming$ = new BehaviorSubject<IncomingCallPayload | null>(null);
-
-  constructor(private zone: NgZone) {
-    if (!("serviceWorker" in navigator)) return;
-    navigator.serviceWorker.addEventListener("message", (event) => {
-      if (event.data?.type === "incoming_call") {
-        this.zone.run(() => this.incoming$.next(event.data));
-      }
-    });
-  }
-}
-```
-
----
-
-## Anti-patterns
-
-React sister rules apply, plus Angular-specific:
-
-1. **Mixing Angular SW (`ngsw-worker.js`) + push handlers.** Angular SW's update mechanism can disable push subscriptions on update. Use a separate SW for call pushes.
-2. **No `NgZone.run` on `serviceWorker.message` listeners.** OnPush components don't update.
-3. **Importing VAPID public key from a non-public env var.** Use `environment.ts` (compile-time inlined for browser).
-
----
-
-## Verification checklist
-
-- [ ] Server template: see canonical react reference
-- [ ] Separate `sw-call.js` registered alongside Angular SW
-- [ ] `NgZone.run` wraps the `message` handler
-- [ ] VAPID public key in `environment.ts`
-- [ ] Browser smoke: 2 tabs (one minimized), caller dials, recipient minimized tab gets notification
-
----
-
-## Pointers
-
-- `cometchat-react-calls/references/server-web-push-vapid.md` — canonical (full server + sw.js)
-- `cometchat-angular-calls` SKILL.md
-- `references/ngzone-and-async-callbacks.md`

package/skills/cometchat-angular-calls/references/share-invite.md

@@ -1,122 +0,0 @@
-# Share invite on Angular
-
-Same SDK API as web. Angular-specific: wrap the share logic in a service so multiple call surfaces (full-screen, mini, post-call) can reuse it.
-
-**Canonical docs:** https://www.cometchat.com/docs/calls/javascript/share-invite
-**Read first:** `cometchat-react-calls/references/share-invite.md` — deep-link rule, share dialog UX.
-
----
-
-## ShareInviteService
-
-```ts
-import { Injectable, NgZone, Inject } from "@angular/core";
-import { MatSnackBar } from "@angular/material/snack-bar";
-import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
-import { APP_CONFIG, AppConfig } from "../config";
-
-@Injectable({ providedIn: "root" })
-export class ShareInviteService {
-  constructor(
-    private snack: MatSnackBar,
-    private zone: NgZone,
-    @Inject(APP_CONFIG) private config: AppConfig,
-  ) {}
-
-  bind(sessionId: string): () => void {
-    const handler = () => this.zone.run(() => this.share(sessionId));
-    // addEventListener returns its own unsubscribe fn — there is no removeEventListener.
-    return CometChatCalls.addEventListener("onShareInviteButtonClicked", handler);
-  }
-
-  async share(sessionId: string): Promise<void> {
-    const url = `${this.config.appUrl}/call/${sessionId}`;
-    const data = { title: "Join my call", text: "I'm on a call — tap to join.", url };
-
-    if (navigator.share && navigator.canShare?.(data)) {
-      try {
-        await navigator.share(data);
-        return;
-      } catch (err) {
-        if ((err as Error).name === "AbortError") return;
-      }
-    }
-
-    try {
-      await navigator.clipboard.writeText(url);
-      this.snack.open("Link copied to clipboard", undefined, { duration: 2000 });
-    } catch {
-      this.snack.open(`Copy this link: ${url}`, "OK", { duration: 8000 });
-    }
-  }
-}
-```
-
-Inject `APP_CONFIG` (your standard token for env vars) so the URL isn't hard-coded.
-
----
-
-## Use in a call component
-
-```ts
-@Component({ /* ... */ })
-export class CallComponent implements OnInit, OnDestroy {
-  @Input() sessionId!: string;
-  private unbind?: () => void;
-
-  constructor(private shareSvc: ShareInviteService) {}
-
-  ngOnInit() {
-    this.unbind = this.shareSvc.bind(this.sessionId);
-  }
-
-  ngOnDestroy() {
-    this.unbind?.();
-  }
-}
-```
-
----
-
-## Pass the kit setting
-
-The share-invite button visibility is a **`SessionSettings` object field** (`hideShareInviteButton`)
-passed to `joinSession` — there is NO `setHideShareInviteButton` builder method.
-
-```ts
-const sessionSettings = {
-  sessionType: "VIDEO",
-  hideShareInviteButton: false,   // default false; set true to hide the kit's own button
-} as const;
-
-await CometChatCalls.joinSession(callToken, sessionSettings, container);
-```
-
----
-
-## Anti-patterns
-
-Web sister rules apply, plus Angular-specific:
-
-1. **No `NgZone.run` wrap on the SDK callback.** `MatSnackBar.open` doesn't show in OnPush components.
-2. **Service in feature module, not root.** Provider lifecycle desyncs with router.
-3. **Hard-coded `https://yourapp.com`.** Use `APP_CONFIG` injection token.
-
----
-
-## Verification checklist
-
-- [ ] `ShareInviteService` provided in root
-- [ ] App URL via `APP_CONFIG` (not hard-coded)
-- [ ] `NgZone.run` wraps the callback
-- [ ] Listener cleaned up in `ngOnDestroy`
-- [ ] Browser smoke: copy link → paste in incognito → join call
-
----
-
-## Pointers
-
-- `cometchat-react-calls/references/share-invite.md` — sister
-- `cometchat-angular-calls` SKILL.md
-- `references/ngzone-and-async-callbacks.md`
-- Canonical docs: https://www.cometchat.com/docs/calls/javascript/share-invite

package/skills/cometchat-angular-calls/references/virtual-background.md

@@ -1,29 +0,0 @@
-# Virtual Background (Angular)
-
-Angular calls run on the same `@cometchat/calls-sdk-javascript@5` as React — reached via the kit's `CometChatUIKitCalls` alias (exported from `@cometchat/chat-uikit-angular`). Web supports virtual background; native iOS/Android do not.
-
-## A. Built-in setting (recommended)
-
-Turn on the kit's own Virtual Background control via the call settings builder — it renders the blur/image/clear picker inside the call UI:
-
-```ts
-import { CometChatUIKitCalls } from "@cometchat/chat-uikit-angular";
-
-const settings = new CometChatUIKitCalls.CallSettingsBuilder()
-  .enableDefaultLayout(true)
-  .showVirtualBackgroundSetting(true)   // built-in VB control
-  .build();
-// pass the UNBUILT builder to <cometchat-ongoing-call [callSettingsBuilder]="…"> per §3
-```
-
-## B. Apply programmatically (custom surface)
-
-```ts
-CometChatUIKitCalls.setVirtualBackgroundBlurLevel(50);             // blur 0–100
-CometChatUIKitCalls.setVirtualBackgroundImage("https://…/bg.jpg"); // custom image
-CometChatUIKitCalls.clearVirtualBackground();                       // remove
-```
-
-Run these from a method on your call component (e.g. a toolbar button handler); under OnPush, mutating component state in the handler is fine — use signals for any state you render (see §1.5).
-
-Verified: `CallSettingsBuilder.showVirtualBackgroundSetting(boolean)`, static `setVirtualBackgroundBlurLevel(number)` / `setVirtualBackgroundImage(string)` / `clearVirtualBackground()` (deprecated aliases: `setBackgroundBlur`/`setBackgroundImage`).