@stream-io/video-filters-web 0.8.6 → 0.9.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.9.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.8.7...@stream-io/video-filters-web-0.9.0) (2026-09-04)
+
+### Features
+
+- **video-filters-web:** apply background filter changes without re-registering the filter ([#2403](https://github.com/GetStream/stream-video-js/issues/2403)) ([4fbb30a](https://github.com/GetStream/stream-video-js/commit/4fbb30a640f87a61d400179b24f844b04f2f3bd5))
+
+## [0.8.7](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.8.6...@stream-io/video-filters-web-0.8.7) (2026-08-28)
+
+### Performance Improvements
+
+- emit per-module ESM builds for the React packages ([#2378](https://github.com/GetStream/stream-video-js/issues/2378)) ([9c937f4](https://github.com/GetStream/stream-video-js/commit/9c937f4b5845aa0e8108a218b1c84b7acb249d77))
+
 ## [0.8.6](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.8.5...@stream-io/video-filters-web-0.8.6) (2026-08-07)
 
 ## [0.8.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.8.4...@stream-io/video-filters-web-0.8.5) (2026-07-30)

package/README.md

@@ -43,10 +43,47 @@ const processor = new VirtualBackground(
 // 4. Start the processor and use the processed track
 const processedTrack = await processor.start();
 
-// 5. Stop the processor
+// 5. Change the effect at any time, without restarting the track
+await processor.updateOptions({
+  backgroundFilter: 'blur',
+  backgroundBlurLevel: 'high',
+});
+
+// 6. Stop the processor
 processor.stop();
 ```
 
+### Updating the effect
+
+`updateOptions` changes the background effect of a running processor. The new
+effect is applied on the next frame - the input track, renderer and segmenter
+are preserved, so there is no interruption and the processed track doesn't
+need to be re-published.
+
+```typescript
+// switch between blur levels
+await processor.updateOptions({
+  backgroundFilter: 'blur',
+  backgroundBlurLevel: 3,
+});
+
+// switch to an image background
+await processor.updateOptions({
+  backgroundFilter: 'image',
+  backgroundImage: 'https://example.com/background.jpg',
+});
+```
+
+Notes:
+
+- `updateOptions` replaces the effect options, so always pass the complete
+  set you want applied.
+- `basePath` and `modelPath` are fixed for the lifetime of the processor;
+  changing the model requires a new instance.
+- When several updates overlap, the last one wins.
+- If the background image fails to load, the promise rejects and the current
+  background keeps rendering.
+
 ## Known limitations
 
 - This library only works in a modern desktop browser that supports WebAssembly SIMD and WebGL.

package/dist/esm/index.js

@@ -0,0 +1,10 @@
+export { isMediaPipePlatformSupported, isPlatformSupported } from './src/compatibility.js';
+export { createRenderer } from './src/legacy/createRenderer.js';
+export { SegmentationLevel } from './src/legacy/segmentation.js';
+export { loadTFLite } from './src/legacy/tflite.js';
+export { loadMediaPipe } from './src/mediapipe.js';
+export { BACKGROUND_BLUR_MAP } from './src/types.js';
+export { BaseVideoProcessor } from './src/BaseVideoProcessor.js';
+export { VirtualBackground } from './src/VirtualBackground.js';
+export { FullScreenBlur } from './src/FullScreenBlur.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/src/BaseVideoProcessor.js

@@ -0,0 +1,107 @@
+import { TrackGenerator } from './FallbackGenerator.js';
+import { TrackProcessor } from './FallbackProcessor.js';
+
+/**
+ * Base class for real-time video filters.
+ *
+ * It sets up the full pipeline that reads frames from the input track,
+ * processes them, and outputs a new track with your effect applied. Subclasses
+ * only need to implement `initialize` (run once before processing starts) and
+ * `transform` (called for every frame).
+ *
+ * Everything else—canvas setup, performance tracking, error handling, and
+ * clean shutdown is handled for you. Calling `start()` returns a processed
+ * `MediaStreamTrack` ready to use.
+ */
+class BaseVideoProcessor {
+    track;
+    processor;
+    generator;
+    hooks;
+    abortController = new AbortController();
+    canvas;
+    frames = 0;
+    delayTotal = 0;
+    lastStatsTime = 0;
+    /**
+     * Constructs a new instance.
+     */
+    constructor(track, hooks = {}) {
+        this.track = track;
+        this.processor = new TrackProcessor({ track });
+        this.generator = new TrackGenerator({
+            kind: 'video',
+            signalTarget: track,
+        });
+        this.hooks = hooks;
+    }
+    async start() {
+        const { readable } = this.processor;
+        const { writable } = this.generator;
+        const { width = 1280, height = 720 } = this.track.getSettings();
+        this.canvas = new OffscreenCanvas(width, height);
+        await this.initialize();
+        const transformStream = new TransformStream({
+            transform: async (frame, controller) => {
+                try {
+                    if (this.abortController.signal.aborted)
+                        return frame.close();
+                    if (this.canvas.width !== frame.displayWidth ||
+                        this.canvas.height !== frame.displayHeight) {
+                        this.canvas.width = frame.displayWidth;
+                        this.canvas.height = frame.displayHeight;
+                    }
+                    const processed = await this.transform(frame);
+                    controller.enqueue(processed);
+                }
+                catch (e) {
+                    this.hooks.onError?.(e);
+                }
+                finally {
+                    frame.close();
+                }
+            },
+            flush: () => this.onFlush(),
+        });
+        readable
+            .pipeThrough(transformStream, { signal: this.abortController.signal })
+            .pipeTo(writable, { signal: this.abortController.signal })
+            .catch((e) => {
+            if (e.name !== 'AbortError' && e.name !== 'InvalidStateError') {
+                console.error(`[${this.processorName}] Error processing track:`, e);
+                this.hooks.onError?.(e);
+            }
+        });
+        return this.generator;
+    }
+    stop() {
+        this.abortController.abort();
+        this.generator.stop();
+        this.onStop();
+    }
+    updateStats(delay) {
+        this.frames++;
+        this.delayTotal += delay;
+        const now = performance.now();
+        if (this.lastStatsTime === 0) {
+            this.lastStatsTime = now;
+            return;
+        }
+        if (now - this.lastStatsTime >= 1000) {
+            const avgDelay = Math.round((this.delayTotal / this.frames) * 100) / 100;
+            const fps = Math.round((1000 * this.frames) / (now - this.lastStatsTime));
+            this.hooks.onStats?.({ delay: avgDelay, fps, timestamp: now });
+            this.frames = 0;
+            this.delayTotal = 0;
+            this.lastStatsTime = now;
+        }
+    }
+    onFlush() { }
+    onStop() { }
+    get processorName() {
+        return 'base-processor';
+    }
+}
+
+export { BaseVideoProcessor };
+//# sourceMappingURL=BaseVideoProcessor.js.map

package/dist/esm/src/BaseVideoProcessor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseVideoProcessor.js","sources":["../../../../../src/BaseVideoProcessor.ts"],"sourcesContent":["import { VideoTrackProcessorHooks } from './types';\nimport { TrackGenerator, MediaStreamTrackGenerator } from './FallbackGenerator';\nimport { MediaStreamTrackProcessor, TrackProcessor } from './FallbackProcessor';\n\n/**\n * Base class for real-time video filters.\n *\n * It sets up the full pipeline that reads frames from the input track,\n * processes them, and outputs a new track with your effect applied. Subclasses\n * only need to implement `initialize` (run once before processing starts) and\n * `transform` (called for every frame).\n *\n * Everything else—canvas setup, performance tracking, error handling, and\n * clean shutdown is handled for you. Calling `start()` returns a processed\n * `MediaStreamTrack` ready to use.\n */\nexport abstract class BaseVideoProcessor {\n  protected readonly processor: MediaStreamTrackProcessor<VideoFrame>;\n  protected readonly generator: MediaStreamTrackGenerator<VideoFrame>;\n\n  protected readonly hooks: VideoTrackProcessorHooks;\n\n  protected readonly abortController = new AbortController();\n  protected canvas!: OffscreenCanvas;\n\n  private frames = 0;\n  private delayTotal = 0;\n  private lastStatsTime = 0;\n\n  /**\n   * Constructs a new instance.\n   */\n  protected constructor(\n    protected readonly track: MediaStreamVideoTrack,\n    hooks: VideoTrackProcessorHooks = {},\n  ) {\n    this.processor = new TrackProcessor({ track });\n    this.generator = new TrackGenerator({\n      kind: 'video',\n      signalTarget: track,\n    });\n    this.hooks = hooks;\n  }\n\n  public async start(): Promise<MediaStreamTrack> {\n    const { readable } = this.processor;\n    const { writable } = this.generator;\n\n    const { width = 1280, height = 720 } = this.track.getSettings();\n    this.canvas = new OffscreenCanvas(width, height);\n\n    await this.initialize();\n\n    const transformStream = new TransformStream<VideoFrame, VideoFrame>({\n      transform: async (frame, controller) => {\n        try {\n          if (this.abortController.signal.aborted) return frame.close();\n\n          if (\n            this.canvas.width !== frame.displayWidth ||\n            this.canvas.height !== frame.displayHeight\n          ) {\n            this.canvas.width = frame.displayWidth;\n            this.canvas.height = frame.displayHeight;\n          }\n\n          const processed = await this.transform(frame);\n\n          controller.enqueue(processed);\n        } catch (e) {\n          this.hooks.onError?.(e);\n        } finally {\n          frame.close();\n        }\n      },\n      flush: () => this.onFlush(),\n    });\n\n    readable\n      .pipeThrough(transformStream, { signal: this.abortController.signal })\n      .pipeTo(writable, { signal: this.abortController.signal })\n      .catch((e) => {\n        if (e.name !== 'AbortError' && e.name !== 'InvalidStateError') {\n          console.error(`[${this.processorName}] Error processing track:`, e);\n          this.hooks.onError?.(e);\n        }\n      });\n\n    return this.generator;\n  }\n\n  public stop(): void {\n    this.abortController.abort();\n    this.generator.stop();\n    this.onStop();\n  }\n\n  protected updateStats(delay: number): void {\n    this.frames++;\n    this.delayTotal += delay;\n\n    const now = performance.now();\n    if (this.lastStatsTime === 0) {\n      this.lastStatsTime = now;\n      return;\n    }\n\n    if (now - this.lastStatsTime >= 1000) {\n      const avgDelay = Math.round((this.delayTotal / this.frames) * 100) / 100;\n      const fps = Math.round((1000 * this.frames) / (now - this.lastStatsTime));\n\n      this.hooks.onStats?.({ delay: avgDelay, fps, timestamp: now });\n\n      this.frames = 0;\n      this.delayTotal = 0;\n      this.lastStatsTime = now;\n    }\n  }\n\n  protected abstract initialize(): Promise<void>;\n  protected abstract transform(frame: VideoFrame): Promise<VideoFrame>;\n\n  protected onFlush(): void {}\n  protected onStop(): void {}\n\n  protected get processorName(): string {\n    return 'base-processor';\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/src/FallbackGenerator.js

@@ -0,0 +1,58 @@
+/**
+ * Fallback video processor for browsers that do not support MediaStreamTrackGenerator.
+ *
+ * Produces a video MediaStreamTrack sourced from a canvas and exposes
+ * a WritableStream<VideoFrame> on track.writable for writing frames.
+ */
+class FallbackGenerator {
+    constructor({ kind, signalTarget }) {
+        if (kind !== 'video') {
+            throw new Error('Only video tracks are supported');
+        }
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d', { desynchronized: true });
+        if (!ctx) {
+            throw new Error('Failed to get 2D context from canvas');
+        }
+        const mediaStream = canvas.captureStream();
+        const track = mediaStream.getVideoTracks()[0];
+        const height = signalTarget?.getSettings().height;
+        const width = signalTarget?.getSettings().width;
+        if (height && width) {
+            canvas.height = height;
+            canvas.width = width;
+        }
+        if (!track) {
+            throw new Error('Failed to create canvas track');
+        }
+        if (signalTarget) {
+            signalTarget.addEventListener('ended', () => {
+                track.stop();
+            });
+        }
+        track.writable = new WritableStream({
+            write: (frame) => {
+                if (canvas.width !== frame.displayWidth ||
+                    canvas.height !== frame.displayHeight) {
+                    canvas.width = frame.displayWidth;
+                    canvas.height = frame.displayHeight;
+                }
+                ctx.drawImage(frame, 0, 0, canvas.width, canvas.height);
+                frame.close();
+            },
+            abort: () => {
+                track.stop();
+            },
+            close: () => {
+                track.stop();
+            },
+        });
+        return track;
+    }
+}
+const TrackGenerator = typeof MediaStreamTrackGenerator !== 'undefined'
+    ? MediaStreamTrackGenerator
+    : FallbackGenerator;
+
+export { TrackGenerator };
+//# sourceMappingURL=FallbackGenerator.js.map

package/dist/esm/src/FallbackGenerator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FallbackGenerator.js","sources":["../../../../../src/FallbackGenerator.ts"],"sourcesContent":["/**\n * Type representing a video track generator that can be either the native\n * MediaStreamTrackGenerator or the fallback implementation.\n */\nexport interface MediaStreamTrackGenerator<T> extends MediaStreamTrack {\n  writable: WritableStream<T>;\n}\n\n/**\n * Configuration options for creating a track generator.\n */\nexport interface TrackGeneratorOptions {\n  readonly kind: 'video';\n  readonly signalTarget?: MediaStreamTrack;\n}\n\n/**\n * Fallback video processor for browsers that do not support MediaStreamTrackGenerator.\n *\n * Produces a video MediaStreamTrack sourced from a canvas and exposes\n * a WritableStream<VideoFrame> on track.writable for writing frames.\n */\nclass FallbackGenerator {\n  constructor({ kind, signalTarget }: TrackGeneratorOptions) {\n    if (kind !== 'video') {\n      throw new Error('Only video tracks are supported');\n    }\n\n    const canvas = document.createElement('canvas');\n    const ctx = canvas.getContext('2d', { desynchronized: true });\n    if (!ctx) {\n      throw new Error('Failed to get 2D context from canvas');\n    }\n\n    const mediaStream = canvas.captureStream();\n    const track =\n      mediaStream.getVideoTracks()[0] as MediaStreamTrackGenerator<VideoFrame>;\n\n    const height = signalTarget?.getSettings().height;\n    const width = signalTarget?.getSettings().width;\n    if (height && width) {\n      canvas.height = height;\n      canvas.width = width;\n    }\n\n    if (!track) {\n      throw new Error('Failed to create canvas track');\n    }\n\n    if (signalTarget) {\n      signalTarget.addEventListener('ended', () => {\n        track.stop();\n      });\n    }\n\n    track.writable = new WritableStream({\n      write: (frame: VideoFrame) => {\n        if (\n          canvas.width !== frame.displayWidth ||\n          canvas.height !== frame.displayHeight\n        ) {\n          canvas.width = frame.displayWidth;\n          canvas.height = frame.displayHeight;\n        }\n\n        ctx.drawImage(frame, 0, 0, canvas.width, canvas.height);\n        frame.close();\n      },\n      abort: () => {\n        track.stop();\n      },\n      close: () => {\n        track.stop();\n      },\n    });\n\n    return track as MediaStreamTrackGenerator<VideoFrame>;\n  }\n}\n\ntype VideoTrackGeneratorConstructor = new (\n  options: TrackGeneratorOptions,\n) => MediaStreamTrackGenerator<VideoFrame>;\n\nconst TrackGenerator: VideoTrackGeneratorConstructor =\n  typeof MediaStreamTrackGenerator !== 'undefined'\n    ? (MediaStreamTrackGenerator as unknown as VideoTrackGeneratorConstructor)\n    : (FallbackGenerator as unknown as VideoTrackGeneratorConstructor);\n\nexport { TrackGenerator };\n"],"names":[],"mappings":"AAgBA;;;;;AAKG;AACH,MAAM,iBAAiB,CAAA;AACrB,IAAA,WAAA,CAAY,EAAE,IAAI,EAAE,YAAY,EAAyB,EAAA;AACvD,QAAA,IAAI,IAAI,KAAK,OAAO,EAAE;AACpB,YAAA,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC;QACpD;QAEA,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC/C,QAAA,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;QAC7D,IAAI,CAAC,GAAG,EAAE;AACR,YAAA,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC;QACzD;AAEA,QAAA,MAAM,WAAW,GAAG,MAAM,CAAC,aAAa,EAAE;QAC1C,MAAM,KAAK,GACT,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC,CAA0C;QAE1E,MAAM,MAAM,GAAG,YAAY,EAAE,WAAW,EAAE,CAAC,MAAM;QACjD,MAAM,KAAK,GAAG,YAAY,EAAE,WAAW,EAAE,CAAC,KAAK;AAC/C,QAAA,IAAI,MAAM,IAAI,KAAK,EAAE;AACnB,YAAA,MAAM,CAAC,MAAM,GAAG,MAAM;AACtB,YAAA,MAAM,CAAC,KAAK,GAAG,KAAK;QACtB;QAEA,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC;QAClD;QAEA,IAAI,YAAY,EAAE;AAChB,YAAA,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAK;gBAC1C,KAAK,CAAC,IAAI,EAAE;AACd,YAAA,CAAC,CAAC;QACJ;AAEA,QAAA,KAAK,CAAC,QAAQ,GAAG,IAAI,cAAc,CAAC;AAClC,YAAA,KAAK,EAAE,CAAC,KAAiB,KAAI;AAC3B,gBAAA,IACE,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY;AACnC,oBAAA,MAAM,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,EACrC;AACA,oBAAA,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,YAAY;AACjC,oBAAA,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,aAAa;gBACrC;AAEA,gBAAA,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;gBACvD,KAAK,CAAC,KAAK,EAAE;YACf,CAAC;YACD,KAAK,EAAE,MAAK;gBACV,KAAK,CAAC,IAAI,EAAE;YACd,CAAC;YACD,KAAK,EAAE,MAAK;gBACV,KAAK,CAAC,IAAI,EAAE;YACd,CAAC;AACF,SAAA,CAAC;AAEF,QAAA,OAAO,KAA8C;IACvD;AACD;AAMD,MAAM,cAAc,GAClB,OAAO,yBAAyB,KAAK;AACnC,MAAG;MACA;;;;"}

package/dist/esm/src/FallbackProcessor.js

@@ -0,0 +1,89 @@
+import { WorkerTimer } from '@stream-io/worker-timer';
+
+/**
+ * Fallback implementation for browsers without MediaStreamTrackGenerator.
+ *
+ * Produces a video MediaStreamTrack sourced from a canvas and exposes a
+ * WritableStream<VideoFrame> on track.writable. Written frames are drawn
+ * into the canvas and update the underlying track automatically.
+ */
+class FallbackProcessor {
+    readable;
+    workerTimer;
+    video;
+    constructor({ track }) {
+        if (!track)
+            throw new Error('MediaStreamTrack is required');
+        if (track.kind !== 'video') {
+            throw new Error('MediaStreamTrack must be video');
+        }
+        let running = true;
+        this.video = document.createElement('video');
+        this.video.muted = true;
+        this.video.playsInline = true;
+        this.video.srcObject = new MediaStream([track]);
+        const canvas = new OffscreenCanvas(1, 1);
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            throw new Error('Failed to get 2D context from OffscreenCanvas');
+        let timestamp = 0;
+        const frameRate = track.getSettings().frameRate || 30;
+        let frameDuration = 1000 / frameRate;
+        this.workerTimer = new WorkerTimer({ useWorker: true });
+        this.readable = new ReadableStream({
+            start: async () => {
+                await Promise.all([
+                    this.video.play(),
+                    new Promise((r) => this.video.addEventListener('loadeddata', r, { once: true })),
+                ]);
+                frameDuration = 1000 / (track.getSettings().frameRate || 30);
+                timestamp = performance.now();
+            },
+            pull: async (controller) => {
+                if (!running) {
+                    controller.close();
+                    this.close();
+                    return;
+                }
+                const delta = performance.now() - timestamp;
+                if (delta <= frameDuration) {
+                    await new Promise((r) => this.workerTimer.setTimeout(r, frameDuration - delta));
+                }
+                timestamp = performance.now();
+                if (canvas.width !== this.video.videoWidth ||
+                    canvas.height !== this.video.videoHeight) {
+                    canvas.width = this.video.videoWidth;
+                    canvas.height = this.video.videoHeight;
+                }
+                ctx.drawImage(this.video, 0, 0);
+                try {
+                    const frame = new VideoFrame(canvas, {
+                        timestamp: Math.round(this.video.currentTime * 1000000),
+                    });
+                    controller.enqueue(frame);
+                }
+                catch (err) {
+                    running = false;
+                    controller.error(err);
+                    this.close();
+                }
+            },
+            cancel: () => {
+                running = false;
+                this.close();
+            },
+        });
+    }
+    close = () => {
+        this.video.pause();
+        this.video.srcObject = null;
+        this.video.src = '';
+        this.workerTimer.destroy();
+    };
+}
+const TrackProcessor = typeof MediaStreamTrackProcessor !== 'undefined'
+    ? MediaStreamTrackProcessor
+    : FallbackProcessor;
+
+export { TrackProcessor };
+//# sourceMappingURL=FallbackProcessor.js.map

package/dist/esm/src/FallbackProcessor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FallbackProcessor.js","sources":["../../../../../src/FallbackProcessor.ts"],"sourcesContent":["import { WorkerTimer } from '@stream-io/worker-timer';\n\n/**\n * Representing a video track processor that can be either the native\n * MediaStreamTrackProcessor or the fallback implementation.\n */\nexport interface MediaStreamTrackProcessor<T> {\n  readonly readable: ReadableStream<T>;\n}\n\n/**\n * Configuration options for creating a track processor.\n */\nexport interface TrackProcessorOptions {\n  readonly track: MediaStreamTrack;\n}\n\n/**\n * Fallback implementation for browsers without MediaStreamTrackGenerator.\n *\n * Produces a video MediaStreamTrack sourced from a canvas and exposes a\n * WritableStream<VideoFrame> on track.writable. Written frames are drawn\n * into the canvas and update the underlying track automatically.\n */\nclass FallbackProcessor implements MediaStreamTrackProcessor<VideoFrame> {\n  readonly readable: ReadableStream<VideoFrame>;\n\n  readonly workerTimer: WorkerTimer;\n  readonly video: HTMLVideoElement;\n\n  constructor({ track }: TrackProcessorOptions) {\n    if (!track) throw new Error('MediaStreamTrack is required');\n    if (track.kind !== 'video') {\n      throw new Error('MediaStreamTrack must be video');\n    }\n    let running = true;\n\n    this.video = document.createElement('video');\n\n    this.video.muted = true;\n    this.video.playsInline = true;\n    this.video.srcObject = new MediaStream([track]);\n\n    const canvas = new OffscreenCanvas(1, 1);\n    const ctx = canvas.getContext('2d');\n\n    if (!ctx) throw new Error('Failed to get 2D context from OffscreenCanvas');\n\n    let timestamp = 0;\n    const frameRate = track.getSettings().frameRate || 30;\n    let frameDuration = 1000 / frameRate;\n\n    this.workerTimer = new WorkerTimer({ useWorker: true });\n    this.readable = new ReadableStream({\n      start: async () => {\n        await Promise.all([\n          this.video.play(),\n          new Promise((r) =>\n            this.video.addEventListener('loadeddata', r, { once: true }),\n          ),\n        ]);\n        frameDuration = 1000 / (track.getSettings().frameRate || 30);\n        timestamp = performance.now();\n      },\n      pull: async (controller) => {\n        if (!running) {\n          controller.close();\n          this.close();\n          return;\n        }\n        const delta = performance.now() - timestamp;\n        if (delta <= frameDuration) {\n          await new Promise((r: (value?: unknown) => void) =>\n            this.workerTimer.setTimeout(r, frameDuration - delta),\n          );\n        }\n        timestamp = performance.now();\n\n        if (\n          canvas.width !== this.video.videoWidth ||\n          canvas.height !== this.video.videoHeight\n        ) {\n          canvas.width = this.video.videoWidth;\n          canvas.height = this.video.videoHeight;\n        }\n\n        ctx.drawImage(this.video, 0, 0);\n\n        try {\n          const frame = new VideoFrame(canvas, {\n            timestamp: Math.round(this.video.currentTime * 1000000),\n          });\n\n          controller.enqueue(frame);\n        } catch (err) {\n          running = false;\n          controller.error(err);\n          this.close();\n        }\n      },\n      cancel: () => {\n        running = false;\n        this.close();\n      },\n    });\n  }\n\n  public close = () => {\n    this.video.pause();\n    this.video.srcObject = null;\n    this.video.src = '';\n\n    this.workerTimer.destroy();\n  };\n}\n\nconst TrackProcessor =\n  typeof MediaStreamTrackProcessor !== 'undefined'\n    ? MediaStreamTrackProcessor\n    : FallbackProcessor;\n\nexport { TrackProcessor };\n"],"names":[],"mappings":"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"}

package/dist/esm/src/FullScreenBlur.js

@@ -0,0 +1,41 @@
+import { BaseVideoProcessor } from './BaseVideoProcessor.js';
+import { FullScreenBlurRenderer } from './FullScreenBlurRenderer.js';
+
+/**
+ * A video filter that applies a full-screen blur to each frame.
+ *
+ * It uses a WebGL renderer to blur the incoming camera track and outputs
+ * a new track with the effect applied. Setup and frame handling are managed
+ * by the base processor.
+ */
+class FullScreenBlur extends BaseVideoProcessor {
+    blurRenderer;
+    blurRadius;
+    /**
+     * Creates a new full-screen blur processor for the given video track.
+     *
+     * @param track - The input camera track to blur.
+     * @param options - Optional settings such as the blur radius.
+     * @param hooks - Optional callbacks for stats and error reporting.
+     */
+    constructor(track, options = {}, hooks = {}) {
+        super(track, hooks);
+        this.blurRadius = options.blurRadius ?? 6;
+    }
+    async initialize() {
+        this.blurRenderer = new FullScreenBlurRenderer(this.canvas);
+    }
+    async transform(frame) {
+        this.blurRenderer.render(frame, this.blurRadius);
+        return new VideoFrame(this.canvas, { timestamp: frame.timestamp });
+    }
+    onStop() {
+        this.blurRenderer?.close();
+    }
+    get processorName() {
+        return 'fullscreen-blur';
+    }
+}
+
+export { FullScreenBlur };
+//# sourceMappingURL=FullScreenBlur.js.map

package/dist/esm/src/FullScreenBlur.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenBlur.js","sources":["../../../../../src/FullScreenBlur.ts"],"sourcesContent":["import { VideoTrackProcessorHooks } from './types';\nimport { BaseVideoProcessor } from './BaseVideoProcessor';\nimport { FullScreenBlurRenderer } from './FullScreenBlurRenderer';\n\nexport interface FullScreenBlurOptions {\n  blurRadius?: number;\n}\n\n/**\n * A video filter that applies a full-screen blur to each frame.\n *\n * It uses a WebGL renderer to blur the incoming camera track and outputs\n * a new track with the effect applied. Setup and frame handling are managed\n * by the base processor.\n */\nexport class FullScreenBlur extends BaseVideoProcessor {\n  private blurRenderer!: FullScreenBlurRenderer;\n  private readonly blurRadius: number;\n\n  /**\n   * Creates a new full-screen blur processor for the given video track.\n   *\n   * @param track - The input camera track to blur.\n   * @param options - Optional settings such as the blur radius.\n   * @param hooks - Optional callbacks for stats and error reporting.\n   */\n  constructor(\n    track: MediaStreamVideoTrack,\n    options: FullScreenBlurOptions = {},\n    hooks: VideoTrackProcessorHooks = {},\n  ) {\n    super(track, hooks);\n    this.blurRadius = options.blurRadius ?? 6;\n  }\n\n  protected async initialize(): Promise<void> {\n    this.blurRenderer = new FullScreenBlurRenderer(this.canvas);\n  }\n\n  protected async transform(frame: VideoFrame): Promise<VideoFrame> {\n    this.blurRenderer.render(frame, this.blurRadius);\n    return new VideoFrame(this.canvas, { timestamp: frame.timestamp });\n  }\n\n  protected onStop(): void {\n    this.blurRenderer?.close();\n  }\n\n  protected get processorName(): string {\n    return 'fullscreen-blur';\n  }\n}\n"],"names":[],"mappings":";;;AAQA;;;;;;AAMG;AACG,MAAO,cAAe,SAAQ,kBAAkB,CAAA;AAC5C,IAAA,YAAY;AACH,IAAA,UAAU;AAE3B;;;;;;AAMG;AACH,IAAA,WAAA,CACE,KAA4B,EAC5B,OAAA,GAAiC,EAAE,EACnC,QAAkC,EAAE,EAAA;AAEpC,QAAA,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC;QACnB,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,CAAC;IAC3C;AAEU,IAAA,MAAM,UAAU,GAAA;QACxB,IAAI,CAAC,YAAY,GAAG,IAAI,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7D;IAEU,MAAM,SAAS,CAAC,KAAiB,EAAA;QACzC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAChD,QAAA,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACpE;IAEU,MAAM,GAAA;AACd,QAAA,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE;IAC5B;AAEA,IAAA,IAAc,aAAa,GAAA;AACzB,QAAA,OAAO,iBAAiB;IAC1B;AACD;;;;"}