@stream-io/video-filters-web 0.8.2 → 0.8.3

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.8.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.8.2...@stream-io/video-filters-web-0.8.3) (2026-07-17)
+
+### Dependency Updates
+
+- `@stream-io/typescript-config` updated to version `0.1.0`
+
+### Bug Fixes
+
+- **video-filters-web:** export BaseVideoProcessor ([#2337](https://github.com/GetStream/stream-video-js/issues/2337)) ([c51b2d6](https://github.com/GetStream/stream-video-js/commit/c51b2d605bc828e3561a909bd929241308dcf4dd))
+
 ## [0.8.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.8.1...@stream-io/video-filters-web-0.8.2) (2026-07-09)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -1561,7 +1561,7 @@ const createTFLiteSIMDModule = (__Module) => {
   return __Module.ready;
 };
 
-const version = "0.8.2";
+const version = "0.8.3";
 const packageName = "@stream-io/video-filters-web";
 
 // @ts-expect-error - module is not declared
@@ -1611,6 +1611,249 @@ const BACKGROUND_BLUR_MAP = {
     high: 7,
 };
 
+/**
+ * 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;
+
+/**
+ * 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.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;
+
+/**
+ * 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';
+    }
+}
+
 class WebGLRenderer {
     canvas;
     gl;
@@ -2332,249 +2575,6 @@ class WebGLRenderer {
     }
 }
 
-/**
- * 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;
-
-/**
- * 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.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;
-
-/**
- * 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';
-    }
-}
-
 /**
  * Wraps a video MediaStreamTrack in a real-time processing pipeline.
  * Incoming frames are processed through a transformer and re-emitted
@@ -3021,6 +3021,7 @@ class FullScreenBlur extends BaseVideoProcessor {
 }
 
 exports.BACKGROUND_BLUR_MAP = BACKGROUND_BLUR_MAP;
+exports.BaseVideoProcessor = BaseVideoProcessor;
 exports.FullScreenBlur = FullScreenBlur;
 exports.VirtualBackground = VirtualBackground;
 exports.createRenderer = createRenderer;