@agent-native/core 0.76.11 → 0.76.13

package/corpus/templates/clips/app/components/recorder/pre-record-panel.tsx

@@ -7,6 +7,7 @@ import {
   type FormEvent,
 } from "react";
 import {
+  IconBlur,
   IconBrowser,
   IconCamera,
   IconChevronDown,
@@ -40,6 +41,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import { Slider } from "@/components/ui/slider";
 import { cn } from "@/lib/utils";
 import {
   NO_CAMERA_DEVICE_ID,
@@ -48,6 +50,7 @@ import {
   type RecordingMode,
 } from "./recorder-engine";
 import type { CameraBubbleSize } from "./camera-bubble";
+import { DEFAULT_BLUR_PX, MAX_BLUR_PX, MIN_BLUR_PX } from "@/lib/camera-blur";
 import {
   loadRecorderPreferences,
   saveRecorderPreferences,
@@ -65,6 +68,8 @@ export interface PreRecordPanelProps {
     displaySurface: DisplaySurface;
     micDeviceId: string | null;
     cameraDeviceId: string | null;
+    cameraBlur: boolean;
+    cameraBlurRadius: number;
   }) => void;
   initialMode?: RecordingMode | null;
   initialDisplaySurface?: DisplaySurface | null;
@@ -210,6 +215,12 @@ export function PreRecordPanel({
   const [cameraId, setCameraId] = useState<string>(
     () => savedPrefs.cameraId ?? "default",
   );
+  const [cameraBlur, setCameraBlur] = useState(
+    () => savedPrefs.cameraBlur ?? false,
+  );
+  const [cameraBlurRadius, setCameraBlurRadius] = useState(
+    () => savedPrefs.cameraBlurRadius ?? DEFAULT_BLUR_PX,
+  );
   const [enumError, setEnumError] = useState<string | null>(null);
   const [micAccessStatus, setMicAccessStatus] =
     useState<DeviceAccessStatus>("idle");
@@ -335,6 +346,10 @@ export function PreRecordPanel({
     setCameraId(value);
     saveRecorderPreferences({ cameraId: value });
   }, []);
+  const chooseCameraBlur = useCallback((value: boolean) => {
+    setCameraBlur(value);
+    saveRecorderPreferences({ cameraBlur: value });
+  }, []);
 
   const requestMicrophoneChoices = useCallback(async () => {
     if (!navigator.mediaDevices?.getUserMedia) {
@@ -826,12 +841,59 @@ export function PreRecordPanel({
                     <CameraVisualizer
                       deviceId={cameraId === "default" ? null : cameraId}
                       disabled={busy}
+                      blur={cameraBlur}
+                      blurRadius={cameraBlurRadius}
                       size={cameraSize}
                       onSizeChange={onCameraSizeChange}
                       onStatusChange={handleCameraStatusChange}
                       onPreviewChange={handleCameraPreviewChange}
                     />
                   ) : null}
+
+                  {needsCamera ? (
+                    <label className="flex cursor-pointer items-center gap-2 rounded-lg px-1 py-1.5 hover:bg-muted/45">
+                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+                        <IconBlur className="h-4 w-4" />
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <p className="text-sm">Blur background</p>
+                        <p className="text-[11px] text-muted-foreground">
+                          Keep yourself sharp, blur what's behind you
+                        </p>
+                      </div>
+                      <Switch
+                        checked={cameraBlur}
+                        onCheckedChange={chooseCameraBlur}
+                        disabled={busy}
+                        aria-label="Blur the camera background"
+                      />
+                    </label>
+                  ) : null}
+
+                  {needsCamera && cameraBlur ? (
+                    <div className="flex items-center gap-3 px-1 pb-1">
+                      <span className="w-14 shrink-0 text-[11px] text-muted-foreground">
+                        Intensity
+                      </span>
+                      <Slider
+                        value={[cameraBlurRadius]}
+                        min={MIN_BLUR_PX}
+                        max={MAX_BLUR_PX}
+                        step={1}
+                        disabled={busy}
+                        onValueChange={(value) =>
+                          setCameraBlurRadius(value[0] ?? DEFAULT_BLUR_PX)
+                        }
+                        onValueCommit={(value) =>
+                          saveRecorderPreferences({
+                            cameraBlurRadius: value[0] ?? DEFAULT_BLUR_PX,
+                          })
+                        }
+                        aria-label="Background blur intensity"
+                        className="flex-1"
+                      />
+                    </div>
+                  ) : null}
                 </div>
               ) : null}
 
@@ -870,6 +932,8 @@ export function PreRecordPanel({
                 micDeviceId: micId === "default" ? null : micId,
                 cameraDeviceId:
                   needsCamera && cameraId !== "default" ? cameraId : null,
+                cameraBlur: needsCamera ? cameraBlur : false,
+                cameraBlurRadius,
               })
             }
             className={cn("h-12 gap-2", onCancel ? "flex-1" : "w-full")}

package/corpus/templates/clips/app/components/recorder/recorder-engine.ts

@@ -19,6 +19,10 @@ import {
   createCameraCompositeStream,
   type CameraCompositeHandle,
 } from "@/lib/camera-composite";
+import {
+  createBackgroundBlurStream,
+  type CameraBlurHandle,
+} from "@/lib/camera-blur";
 import {
   chunkUploadUrl,
   pickMimeType,
@@ -75,6 +79,15 @@ export interface RecorderEngineOptions {
   cameraDeviceId?: string | null;
   /** Camera bubble size selected in the pre-record UI. */
   cameraBubbleSize?: "sm" | "md" | "lg";
+  /**
+   * Blur the camera background (sharp person, blurred surroundings) for both the
+   * live preview bubble and the baked-in recording composite. Resolved at
+   * `acquire()` time. Silently no-ops (records un-blurred) if segmentation is
+   * unavailable in the browser.
+   */
+  cameraBlur?: boolean;
+  /** Background blur radius in px when `cameraBlur` is on. Defaults to ~12. */
+  cameraBlurRadius?: number;
   /** Chunk size in ms (MediaRecorder timeslice). Default 2000. */
   chunkIntervalMs?: number;
   /** Base URL for the chunk upload endpoint. Default `/api/uploads/:id/chunk`. */
@@ -99,6 +112,11 @@ export interface RecorderEngineOptions {
    * `onError`, this does NOT transition the engine into the `error` state.
    */
   onWarning?: (message: string) => void;
+  /**
+   * Fired when the camera ends (unplugged / revoked) any time after acquire,
+   * so the UI can drop the on-page camera bubble to match the recorded output.
+   */
+  onCameraEnded?: () => void;
   /**
    * Called when the display stream's video track ends because the user clicked
    * the browser's native "Stop sharing" button. When provided, the engine
@@ -360,6 +378,17 @@ export class RecorderEngine {
 
   private displayStream: MediaStream | null = null;
   private cameraStream: MediaStream | null = null;
+  /**
+   * Raw getUserMedia camera stream. When background blur is active,
+   * `cameraStream` points at the processed (blurred) derivative and this field
+   * keeps the original so teardown stops the real camera tracks and the
+   * disconnect handler can observe the hardware ending.
+   */
+  private rawCameraStream: MediaStream | null = null;
+  private cameraBlur: CameraBlurHandle | null = null;
+  // True once the camera is acquired, through preview/countdown/recording, until
+  // teardown — gates disconnect handling outside the recording state.
+  private cameraLive = false;
   private micStream: MediaStream | null = null;
   private combinedStream: MediaStream | null = null;
   private previewStream: MediaStream | null = null;
@@ -697,13 +726,10 @@ export class RecorderEngine {
         }
       }
 
-      // Camera / mic disconnects mid-recording (USB webcam unplugged, mic
-      // permission revoked, a Bluetooth input dropping) are NON-fatal: the
-      // recording continues with whatever inputs remain, and we surface a
-      // non-blocking warning. We use the same recording/paused guard as the
-      // display handler so the `ended` events fired by `cleanupTracks()` during
-      // a normal stop()/cancel() (state is `stopping`/`idle` by then) are
-      // ignored rather than treated as a disconnect.
+      // Camera / mic disconnects (USB webcam unplugged, permission revoked,
+      // Bluetooth dropped) are NON-fatal: keep whatever inputs remain and warn.
+      // The handlers gate on `cameraLive`/state so the `ended` events fired by
+      // `cleanupTracks()` during a normal stop/cancel are ignored.
       if (this.cameraStream) {
         for (const track of this.cameraStream.getVideoTracks()) {
           track.addEventListener("ended", () => {
@@ -720,6 +746,37 @@ export class RecorderEngine {
         }
       }
 
+      // Camera is live from here through preview/countdown/recording until
+      // teardown — set before the async blur setup so a disconnect during that
+      // window is handled, not inherited as a dead stream.
+      if (this.cameraStream) this.cameraLive = true;
+
+      // Swap the raw camera for its blurred derivative, which both the preview
+      // bubble and the recording composite read ("what you see is what's
+      // recorded"). createBackgroundBlurStream never throws — it falls back to
+      // the raw stream on failure.
+      if (this.opts.cameraBlur && this.cameraStream) {
+        this.rawCameraStream = this.cameraStream;
+        const handle = await createBackgroundBlurStream(this.cameraStream, {
+          blurPx: this.opts.cameraBlurRadius,
+        });
+        if (this.cameraDisconnectNotified) {
+          // Webcam ended while the pipeline was loading: discard it and drop the
+          // dead camera rather than inheriting a frozen processed stream.
+          handle.cleanup();
+          this.cameraStream = null;
+        } else {
+          this.cameraBlur = handle;
+          this.cameraStream = this.cameraBlur.stream;
+        }
+      }
+
+      if (this.opts.mode === "camera" && !this.cameraStream) {
+        throw new Error(
+          "Camera disconnected before recording could start. Reconnect it and try again.",
+        );
+      }
+
       this.previewStream =
         this.opts.mode === "camera" ? this.cameraStream! : this.displayStream!;
 
@@ -1414,6 +1471,12 @@ export class RecorderEngine {
       return combined;
     }
 
+    // Camera dropped before start (disconnected during setup/countdown):
+    // record screen-only rather than compositing a dead stream.
+    if (!this.cameraStream) {
+      return this.buildDisplayRecordingStream();
+    }
+
     // Screen + camera: display capture does not reliably include our separate
     // DOM bubble once the user records another app/window, so the saved
     // recording must composite the camera feed before MediaRecorder sees it.
@@ -1705,14 +1768,23 @@ export class RecorderEngine {
   }
 
   private cleanupTracks(): void {
+    // Clear before stopping tracks so the `ended` events our own stop() fires
+    // aren't mistaken for a disconnect.
+    this.cameraLive = false;
     this.audioMixSources = [];
     this.audioMixCtx?.close().catch(() => {});
     this.audioMixCtx = null;
     this.cameraComposite?.cleanup();
     this.cameraComposite = null;
+    // Tear down the blur pipeline (segmenter, hidden video, processed capture)
+    // before stopping streams. `rawCameraStream` holds the real hardware tracks
+    // when blur is active; stop those so the camera indicator clears.
+    this.cameraBlur?.cleanup();
+    this.cameraBlur = null;
     for (const s of [
       this.displayStream,
       this.cameraStream,
+      this.rawCameraStream,
       this.micStream,
       this.combinedStream,
     ]) {
@@ -1727,6 +1799,7 @@ export class RecorderEngine {
     }
     this.displayStream = null;
     this.cameraStream = null;
+    this.rawCameraStream = null;
     this.micStream = null;
     this.combinedStream = null;
     this.previewStream = null;
@@ -1764,16 +1837,28 @@ export class RecorderEngine {
    * warn the user.
    */
   private onCameraTrackEnded() {
-    if (this.state !== "recording" && this.state !== "paused") return;
+    if (!this.cameraLive) return;
     if (this.cameraDisconnectNotified) return;
     this.cameraDisconnectNotified = true;
-    for (const track of this.cameraStream?.getVideoTracks() ?? []) {
+    this.cameraLive = false;
+    // Tear down the blur pipeline so the composite's camera <video> sees its
+    // (blurred) track end and self-hides, instead of freezing on a stale frame.
+    if (this.cameraBlur) {
+      this.cameraBlur.cleanup();
+      this.cameraBlur = null;
+    }
+    for (const track of [
+      ...(this.rawCameraStream?.getVideoTracks() ?? []),
+      ...(this.cameraStream?.getVideoTracks() ?? []),
+    ]) {
       try {
         track.stop();
       } catch {
         // ignore — the track has already ended.
       }
     }
+    // Drop the on-page bubble to match the recorded output (screen-only now).
+    this.opts.onCameraEnded?.();
     this.emitWarning(
       "Camera disconnected — recording continues without webcam.",
     );

package/corpus/templates/clips/app/lib/camera-blur.ts

@@ -0,0 +1,341 @@
+import { appBasePath } from "@agent-native/core/client";
+import type { ImageSegmenter } from "@mediapipe/tasks-vision";
+
+/**
+ * A processed camera stream whose background is blurred while the person stays
+ * sharp (Zoom / Loom style). Produced once in the recorder engine and shared by
+ * both the live preview bubble and the baked-in recording composite, so "what
+ * you see is what's recorded".
+ */
+export interface CameraBlurHandle {
+  /** The processed stream, or the original `source` stream when `active` is false. */
+  stream: MediaStream;
+  /** False when segmentation was unavailable and we transparently fell back to raw. */
+  readonly active: boolean;
+  /**
+   * Update the background blur radius (px) live, without rebuilding the
+   * segmenter. No-op on the passthrough fallback handle.
+   */
+  setBlurPx(px: number): void;
+  cleanup(): void;
+}
+
+export interface CameraBlurOptions {
+  /** CSS blur radius applied to the background, in px. Default 12. */
+  blurPx?: number;
+  /**
+   * How often segmentation runs, in frames per second. Kept below the 30fps
+   * capture rate to bound CPU/GPU cost — the small bubble does not need a fresh
+   * mask every captured frame. Default 20.
+   */
+  segmentationFps?: number;
+}
+
+export const DEFAULT_BLUR_PX = 12;
+export const MIN_BLUR_PX = 2;
+export const MAX_BLUR_PX = 30;
+const DEFAULT_SEGMENTATION_FPS = 20;
+const CAPTURE_FPS = 30;
+/**
+ * Max dimension (px) of the frame we feed the segmenter. The model resizes to
+ * its own 256² input internally and upsamples the mask back to this size, so
+ * keeping the input small bounds the per-frame mask readback + alpha loop cost
+ * regardless of the camera's native resolution. The soft mask is scaled back up
+ * to the camera resolution with bilinear filtering when compositing.
+ */
+const SEG_MAX_DIM = 256;
+
+const MODEL_PATH = "/mediapipe/selfie_segmenter.tflite";
+const WASM_PATH = "/mediapipe/wasm";
+
+function positive(value: unknown): value is number {
+  return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+
+function sourceDimensions(
+  video: HTMLVideoElement,
+  stream: MediaStream,
+): { width: number; height: number } {
+  if (positive(video.videoWidth) && positive(video.videoHeight)) {
+    return { width: video.videoWidth, height: video.videoHeight };
+  }
+  const settings = stream.getVideoTracks()[0]?.getSettings();
+  return {
+    width: positive(settings?.width) ? Math.round(settings.width) : 640,
+    height: positive(settings?.height) ? Math.round(settings.height) : 480,
+  };
+}
+
+/** Hidden, off-screen `<video>` that plays the source stream for canvas reads. */
+function attachHiddenVideo(stream: MediaStream): {
+  video: HTMLVideoElement;
+  cleanup(): void;
+} {
+  const video = document.createElement("video");
+  video.muted = true;
+  video.playsInline = true;
+  video.autoplay = true;
+  video.srcObject = stream;
+  video.style.position = "fixed";
+  video.style.left = "-10000px";
+  video.style.top = "0";
+  video.style.width = "1px";
+  video.style.height = "1px";
+  video.style.opacity = "0";
+  video.style.pointerEvents = "none";
+
+  const tryPlay = () => {
+    video.play().catch(() => undefined);
+  };
+
+  document.body.appendChild(video);
+  video.addEventListener("loadedmetadata", tryPlay);
+  tryPlay();
+
+  return {
+    video,
+    cleanup() {
+      video.removeEventListener("loadedmetadata", tryPlay);
+      video.pause();
+      video.srcObject = null;
+      video.remove();
+    },
+  };
+}
+
+async function createSegmenter(): Promise<ImageSegmenter> {
+  // Lazy-loaded so the ~11MB Wasm runtime and its loader never enter the main
+  // bundle or run during SSR — only when a recording actually requests blur.
+  const vision = await import("@mediapipe/tasks-vision");
+  const base = appBasePath();
+  const fileset = await vision.FilesetResolver.forVisionTasks(
+    `${base}${WASM_PATH}`,
+  );
+  const build = (delegate: "GPU" | "CPU") =>
+    vision.ImageSegmenter.createFromOptions(fileset, {
+      baseOptions: {
+        modelAssetPath: `${base}${MODEL_PATH}`,
+        delegate,
+      },
+      runningMode: "VIDEO",
+      outputConfidenceMasks: true,
+      outputCategoryMask: false,
+    });
+  try {
+    return await build("GPU");
+  } catch {
+    // Older GPUs / blocked WebGL contexts: fall back to the CPU delegate.
+    return await build("CPU");
+  }
+}
+
+const fallback = (source: MediaStream): CameraBlurHandle => ({
+  stream: source,
+  active: false,
+  setBlurPx() {},
+  cleanup() {},
+});
+
+/**
+ * Build a background-blurred derivative of `source`. Never throws: if MediaPipe,
+ * the Wasm fileset, the model, or canvas capture are unavailable, it resolves to
+ * a passthrough handle wrapping the raw `source` (`active === false`) so the
+ * recording always proceeds. Callers own `source`'s tracks; `cleanup()` here
+ * tears down only the processing pipeline, never the source.
+ */
+export async function createBackgroundBlurStream(
+  source: MediaStream,
+  opts: CameraBlurOptions = {},
+): Promise<CameraBlurHandle> {
+  if (typeof document === "undefined") return fallback(source);
+  if (!source.getVideoTracks().length) return fallback(source);
+
+  let blurPx = positive(opts.blurPx) ? opts.blurPx : DEFAULT_BLUR_PX;
+  const segFps = positive(opts.segmentationFps)
+    ? opts.segmentationFps
+    : DEFAULT_SEGMENTATION_FPS;
+
+  const out = document.createElement("canvas");
+  const outCtx = out.getContext("2d", { alpha: false });
+  if (!outCtx || typeof out.captureStream !== "function") {
+    return fallback(source);
+  }
+
+  let segmenter: ImageSegmenter;
+  try {
+    segmenter = await createSegmenter();
+  } catch (err) {
+    console.warn(
+      "[camera-blur] Segmentation unavailable — recording without background blur:",
+      err,
+    );
+    return fallback(source);
+  }
+
+  const hidden = attachHiddenVideo(source);
+  const { width: w0, height: h0 } = sourceDimensions(hidden.video, source);
+  out.width = w0;
+  out.height = h0;
+
+  // Foreground compositing scratch: sharp person punched out by the mask alpha.
+  const fg = document.createElement("canvas");
+  const fgCtx = fg.getContext("2d");
+  // Downscaled frame we actually segment, plus the soft alpha mask it produces.
+  const segInput = document.createElement("canvas");
+  const segCtx = segInput.getContext("2d");
+  const maskCanvas = document.createElement("canvas");
+  const maskCtx = maskCanvas.getContext("2d");
+  if (!fgCtx || !segCtx || !maskCtx) {
+    hidden.cleanup();
+    segmenter.close();
+    return fallback(source);
+  }
+
+  let lastTimestamp = -1;
+  let lastSegAt = -Infinity;
+  let haveMask = false;
+  const segIntervalMs = 1000 / segFps;
+
+  // Re-segment into maskCanvas. Runs at segFps; on failure the previous mask is
+  // kept rather than dropping to an un-blurred frame.
+  const updateMask = (video: HTMLVideoElement) => {
+    const scale = SEG_MAX_DIM / Math.max(video.videoWidth, video.videoHeight);
+    const segW = Math.max(1, Math.round(video.videoWidth * scale));
+    const segH = Math.max(1, Math.round(video.videoHeight * scale));
+    if (segInput.width !== segW) segInput.width = segW;
+    if (segInput.height !== segH) segInput.height = segH;
+    try {
+      segCtx.drawImage(video, 0, 0, segW, segH);
+      const timestamp = Math.max(
+        Math.round(performance.now()),
+        lastTimestamp + 1,
+      );
+      lastTimestamp = timestamp;
+      const result = segmenter.segmentForVideo(segInput, timestamp);
+      const confidence = result.confidenceMasks?.[0];
+      if (confidence) {
+        const maskW = confidence.width;
+        const maskH = confidence.height;
+        const values = confidence.getAsFloat32Array();
+        if (maskCanvas.width !== maskW) maskCanvas.width = maskW;
+        if (maskCanvas.height !== maskH) maskCanvas.height = maskH;
+        const image = maskCtx.createImageData(maskW, maskH);
+        for (let i = 0; i < values.length; i++) {
+          image.data[i * 4 + 3] = Math.round(values[i] * 255);
+        }
+        maskCtx.putImageData(image, 0, 0);
+        haveMask = true;
+      }
+      result.close();
+    } catch {
+      // keep the previous mask
+    }
+  };
+
+  // Composite blurred background + sharp foreground (or raw until a first mask).
+  const composite = (video: HTMLVideoElement, outW: number, outH: number) => {
+    if (!haveMask) {
+      outCtx.drawImage(video, 0, 0, outW, outH);
+      return;
+    }
+    if (fg.width !== outW) fg.width = outW;
+    if (fg.height !== outH) fg.height = outH;
+    fgCtx.globalCompositeOperation = "source-over";
+    fgCtx.clearRect(0, 0, outW, outH);
+    fgCtx.drawImage(video, 0, 0, outW, outH);
+    fgCtx.globalCompositeOperation = "destination-in";
+    fgCtx.imageSmoothingEnabled = true;
+    fgCtx.drawImage(maskCanvas, 0, 0, outW, outH);
+    fgCtx.globalCompositeOperation = "source-over";
+
+    outCtx.filter = `blur(${blurPx}px)`;
+    outCtx.drawImage(video, 0, 0, outW, outH);
+    outCtx.filter = "none";
+    outCtx.drawImage(fg, 0, 0);
+  };
+
+  // Composite every tick (capture rate) for smooth motion; re-segment only at
+  // segFps, reusing the last mask in between.
+  const drawFrame = () => {
+    const video = hidden.video;
+    if (!positive(video.videoWidth) || !positive(video.videoHeight)) return;
+    if (out.width !== video.videoWidth) out.width = video.videoWidth;
+    if (out.height !== video.videoHeight) out.height = video.videoHeight;
+
+    const now = performance.now();
+    if (now - lastSegAt >= segIntervalMs) {
+      updateMask(video);
+      lastSegAt = now;
+    }
+    composite(video, out.width, out.height);
+  };
+
+  const stream = out.captureStream(CAPTURE_FPS);
+  const minFrameMs = 1000 / CAPTURE_FPS;
+
+  // Worker-driven timer so the loop keeps running at full rate in background
+  // tabs (rAF is throttled to ~1fps when hidden). Falls back to rAF when blob:
+  // workers are blocked by CSP — mirrors camera-composite.ts.
+  let worker: Worker | null = null;
+  let raf: number | null = null;
+
+  try {
+    const workerBlob = new Blob(
+      [
+        `let t=null;onmessage=e=>{if(e.data==='start'){clearInterval(t);t=setInterval(()=>postMessage('tick'),${minFrameMs});}else if(e.data==='stop'){clearInterval(t);}};`,
+      ],
+      { type: "application/javascript" },
+    );
+    const workerUrl = URL.createObjectURL(workerBlob);
+    try {
+      worker = new Worker(workerUrl);
+    } finally {
+      URL.revokeObjectURL(workerUrl);
+    }
+    worker.onmessage = () => drawFrame();
+    worker.postMessage("start");
+  } catch (err) {
+    console.warn(
+      "[camera-blur] Worker timer unavailable, falling back to rAF — blur may glitch on hidden tabs:",
+      err,
+    );
+    let lastFrameAt = 0;
+    const tick = (now: number) => {
+      if (raf === null) return;
+      if (now - lastFrameAt >= minFrameMs) {
+        lastFrameAt = now;
+        drawFrame();
+      }
+      raf = window.requestAnimationFrame(tick);
+    };
+    raf = window.requestAnimationFrame(tick);
+  }
+
+  drawFrame();
+
+  return {
+    stream,
+    active: true,
+    setBlurPx(px: number) {
+      if (positive(px)) blurPx = px;
+    },
+    cleanup() {
+      if (worker) {
+        worker.postMessage("stop");
+        worker.terminate();
+        worker = null;
+      }
+      if (raf !== null) {
+        window.cancelAnimationFrame(raf);
+        raf = null;
+      }
+      stream.getTracks().forEach((track) => track.stop());
+      hidden.cleanup();
+      try {
+        segmenter.close();
+      } catch {
+        // ignore — already closed.
+      }
+    },
+  };
+}

package/corpus/templates/clips/app/lib/camera-composite.ts

@@ -244,7 +244,12 @@ export function createCameraCompositeStream(
     } catch {
       // The display video can be momentarily unavailable while metadata loads.
     }
-    drawCameraBubble(ctx, camera.video, canvas, drawOptions);
+    // Hide the bubble once the camera ends (unplugged, or the blur pipeline
+    // stopped its captureStream) — the <video> freezes on its last frame rather
+    // than zeroing its dimensions, so check the track instead.
+    if (cameraTrack.readyState !== "ended") {
+      drawCameraBubble(ctx, camera.video, canvas, drawOptions);
+    }
   };
 
   // Use a Worker-based timer so the draw loop keeps running at the target