@stream-io/video-filters-web 0.5.0 → 0.6.0

package/dist/index.cjs.js

@@ -1561,7 +1561,7 @@ const createTFLiteSIMDModule = (__Module) => {
   return __Module.ready;
 };
 
-const version = "0.5.0";
+const version = "0.6.0";
 const packageName = "@stream-io/video-filters-web";
 
 // @ts-expect-error - module is not declared
@@ -2405,7 +2405,6 @@ class FallbackProcessor {
         let timestamp = 0;
         const frameRate = track.getSettings().frameRate || 30;
         let frameDuration = 1000 / frameRate;
-        let lastVideoTime = -1;
         this.workerTimer = new workerTimer.WorkerTimer({ useWorker: true });
         this.readable = new ReadableStream({
             start: async () => {
@@ -2427,13 +2426,6 @@ class FallbackProcessor {
                     await new Promise((r) => this.workerTimer.setTimeout(r, frameDuration - delta));
                 }
                 timestamp = performance.now();
-                const currentTime = this.video.currentTime;
-                const hasNewFrame = currentTime !== lastVideoTime;
-                if (!hasNewFrame) {
-                    await new Promise((r) => this.workerTimer.setTimeout(r, frameDuration));
-                    return;
-                }
-                lastVideoTime = currentTime;
                 if (canvas.width !== this.video.videoWidth ||
                     canvas.height !== this.video.videoHeight) {
                     canvas.width = this.video.videoWidth;
@@ -2441,7 +2433,9 @@ class FallbackProcessor {
                 }
                 ctx.drawImage(this.video, 0, 0);
                 try {
-                    const frame = new VideoFrame(canvas, { timestamp });
+                    const frame = new VideoFrame(canvas, {
+                        timestamp: Math.round(this.video.currentTime * 1000000),
+                    });
                     controller.enqueue(frame);
                 }
                 catch (err) {
@@ -2462,93 +2456,134 @@ const TrackProcessor = typeof MediaStreamTrackProcessor !== 'undefined'
     : FallbackProcessor;
 
 /**
- * Wraps a video MediaStreamTrack in a real-time processing pipeline.
- * Incoming frames are processed through a transformer and re-emitted
- * on a new MediaStreamVideoTrack for downstream consumption.
+ * 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 VirtualBackground {
-    constructor(track, options = {}, hooks = {}) {
+class BaseVideoProcessor {
+    /**
+     * Constructs a new instance.
+     */
+    constructor(track, hooks = {}) {
         this.track = track;
-        this.options = options;
-        this.hooks = hooks;
-        this.segmenter = null;
-        this.isSegmenterReady = false;
-        this.segmenterDelayTotal = 0;
+        this.abortController = new AbortController();
         this.frames = 0;
+        this.delayTotal = 0;
         this.lastStatsTime = 0;
         this.processor = new TrackProcessor({ track });
         this.generator = new TrackGenerator({
             kind: 'video',
             signalTarget: track,
         });
-        this.abortController = new AbortController();
+        this.hooks = hooks;
     }
     async start() {
-        const { onError } = this.hooks;
         const { readable } = this.processor;
         const { writable } = this.generator;
-        const displayWidth = this.track.getSettings().width ?? 1280;
-        const displayHeight = this.track.getSettings().height ?? 720;
-        this.canvas = new OffscreenCanvas(displayWidth, displayHeight);
-        this.webGlRenderer = new WebGLRenderer(this.canvas);
-        await this.initializeSegmenter();
-        const opts = await this.initializeSegmenterOptions();
+        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) {
+                    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, opts);
+                    const start = performance.now();
+                    const processed = await this.transform(frame);
+                    const delay = performance.now() - start;
+                    this.updateStats(delay);
                     controller.enqueue(processed);
                 }
                 catch (e) {
-                    console.error('[virtual-background] error processing frame:', e);
                     this.hooks.onError?.(e);
-                    if (!this.abortController.signal.aborted) {
-                        controller.enqueue(frame);
-                    }
                 }
                 finally {
                     frame.close();
                 }
             },
-            flush: () => {
-                if (this.segmenter) {
-                    this.segmenter.close();
-                    this.segmenter = null;
-                }
-                this.isSegmenterReady = false;
-            },
+            flush: () => this.onFlush(),
         });
-        const signal = this.abortController.signal;
         readable
-            .pipeThrough(transformStream, { signal })
-            .pipeTo(writable)
+            .pipeThrough(transformStream, { signal: this.abortController.signal })
+            .pipeTo(writable, { signal: this.abortController.signal })
             .catch((e) => {
-            if (e.name !== 'AbortError') {
-                console.error('[virtual-background] Error processing track:', e);
-                onError?.(e);
+            if (e.name !== 'AbortError' && e.name !== 'InvalidStateError') {
+                console.error(`[${this.processorName}] Error processing track:`, e);
+                this.hooks.onError?.(e);
             }
         });
         return this.generator;
     }
-    /**
-     * Loads and initializes the MediaPipe `ImageSegmenter`.
-     */
+    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
+ * on a new MediaStreamVideoTrack for downstream consumption.
+ */
+class VirtualBackground extends BaseVideoProcessor {
+    constructor(track, options = {}, hooks = {}) {
+        super(track, hooks);
+        this.options = options;
+        this.segmenter = null;
+        this.isSegmenterReady = false;
+        this.latestCategoryMask = undefined;
+        this.latestConfidenceMask = undefined;
+        this.lastFrameTime = -1;
+        this.count = 0;
+    }
+    async initialize() {
+        this.webGlRenderer = new WebGLRenderer(this.canvas);
+        await this.initializeSegmenter();
+    }
     async initializeSegmenter() {
         try {
-            const basePath = this.options?.basePath ||
+            this.opts = await this.initializeSegmenterOptions();
+            const basePath = this.options.basePath ||
                 `https://unpkg.com/${packageName}@${version}/mediapipe`;
-            const defaultModelPath = `${basePath}/models/selfie_segmenter.tflite`;
-            const model = this.options?.modelPath || defaultModelPath;
-            const wasmPath = `${basePath}/wasm`;
-            const fileset = await tasksVision.FilesetResolver.forVisionTasks(wasmPath);
+            const model = this.options.modelPath || `${basePath}/models/selfie_segmenter.tflite`;
+            const fileset = await tasksVision.FilesetResolver.forVisionTasks(`${basePath}/wasm`);
             this.segmenter = await tasksVision.ImageSegmenter.createFromOptions(fileset, {
-                baseOptions: {
-                    modelAssetPath: model,
-                    delegate: 'GPU',
-                },
+                baseOptions: { modelAssetPath: model, delegate: 'GPU' },
                 runningMode: 'VIDEO',
                 outputCategoryMask: true,
                 outputConfidenceMasks: true,
@@ -2557,75 +2592,50 @@ class VirtualBackground {
             this.isSegmenterReady = true;
         }
         catch (error) {
-            console.error('[virtual-background] Failed to initialize MediaPipe segmenter:', error);
+            console.error('[virtual-background] Segmenter init failed:', error);
             this.isSegmenterReady = false;
         }
     }
-    /**
-     * Processes a single video frame.
-     *
-     * Performs segmentation via MediaPipe and then composites the frame
-     * through the WebGL renderer to apply background effects.
-     *
-     * @param frame - The incoming frame from the processor.
-     * @param opts - The segmentation options to use.
-     *
-     * @returns A new `VideoFrame` containing the processed image.
-     */
-    async transform(frame, opts) {
-        if (this.isSegmenterReady && this.segmenter) {
-            try {
-                const start = performance.now();
-                await new Promise((resolve) => {
-                    this.segmenter.segmentForVideo(frame, frame.timestamp, (result) => {
-                        const categoryMask = result.categoryMask.getAsWebGLTexture();
-                        const confidenceMask = result.confidenceMasks[0].getAsWebGLTexture();
-                        this.webGlRenderer.render(frame, opts, categoryMask, confidenceMask);
-                        const now = performance.now();
-                        this.segmenterDelayTotal += now - start;
-                        this.frames++;
-                        if (this.lastStatsTime === 0) {
-                            this.lastStatsTime = now;
-                        }
-                        if (now - this.lastStatsTime > 1000) {
-                            const delay = Math.round((this.segmenterDelayTotal / this.frames) * 100) /
-                                100;
-                            const fps = Math.round((1000 * this.frames) / (now - this.lastStatsTime));
-                            this.hooks.onStats?.({ delay, fps, timestamp: now });
-                            this.lastStatsTime = now;
-                            this.segmenterDelayTotal = 0;
-                            this.frames = 0;
-                        }
-                        resolve();
-                    });
-                });
-            }
-            catch (error) {
-                console.error('[virtual-background] Error during segmentation:', error);
-            }
+    async transform(frame) {
+        const currentTime = frame.timestamp;
+        const hasNewFrame = currentTime !== this.lastFrameTime;
+        this.lastFrameTime = currentTime;
+        if (hasNewFrame && this.isSegmenterReady && this.segmenter) {
+            await this.runSegmentation(frame);
+            this.webGlRenderer.render(frame, this.opts, this.latestCategoryMask, this.latestConfidenceMask);
         }
         return new VideoFrame(this.canvas, { timestamp: frame.timestamp });
     }
-    async loadBackground(url) {
-        if (!url) {
-            return;
-        }
-        const response = await fetch(url);
-        if (!response.ok) {
-            console.error(`[virtual-background] Failed to fetch background source ${url} (status: ${response.status})`);
+    async runSegmentation(frame) {
+        if (!this.segmenter)
             return;
-        }
-        const blob = await response.blob();
-        const imageBitmap = await createImageBitmap(blob);
-        return { type: 'image', media: imageBitmap, url };
+        return new Promise((resolve) => {
+            const timestamp = Math.floor(performance.now());
+            this.segmenter.segmentForVideo(frame, timestamp, (result) => {
+                try {
+                    this.latestCategoryMask = result.categoryMask?.getAsWebGLTexture();
+                    this.latestConfidenceMask =
+                        result.confidenceMasks?.[0]?.getAsWebGLTexture();
+                }
+                catch (err) {
+                    console.error('[virtual-background] segmentation error:', err);
+                    this.hooks.onError?.(err);
+                }
+                finally {
+                    result.close();
+                    resolve();
+                }
+            });
+        });
     }
     async initializeSegmenterOptions() {
         const isSelfieMode = this.options.modelPath
-            ? this.options.modelPath?.includes('selfie_segmenter')
+            ? this.options.modelPath.includes('selfie_segmenter')
             : true;
         if (this.options.backgroundFilter === 'image') {
+            const source = await this.loadBackground(this.options.backgroundImage);
             return {
-                backgroundSource: await this.loadBackground(this.options.backgroundImage),
+                backgroundSource: source,
                 bgBlur: 0,
                 bgBlurRadius: 0,
                 isSelfieMode,
@@ -2640,28 +2650,340 @@ class VirtualBackground {
             };
         }
         const numeric = blurLevel ?? 5;
-        const bgBlur = Math.min(numeric * 3, 30);
-        const bgBlurRadius = Math.min(numeric, 10);
         return {
             backgroundSource: undefined,
-            bgBlur,
-            bgBlurRadius,
+            bgBlur: Math.min(numeric * 3, 30),
+            bgBlurRadius: Math.min(numeric, 10),
             isSelfieMode,
         };
     }
-    stop() {
-        this.abortController.abort();
-        this.webGlRenderer.close();
-        this.generator.stop();
-        if (this.segmenter) {
-            this.segmenter.close();
-            this.segmenter = null;
-        }
+    async loadBackground(url) {
+        if (!url)
+            return null;
+        const result = await fetch(url);
+        if (!result.ok)
+            return null;
+        return {
+            type: 'image',
+            media: await createImageBitmap(await result.blob()),
+            url,
+        };
+    }
+    onFlush() {
+        this.destroySegmenter();
+    }
+    onStop() {
+        this.webGlRenderer?.close();
+        this.destroySegmenter();
+    }
+    destroySegmenter() {
+        this.segmenter?.close();
+        this.segmenter = null;
         this.isSegmenterReady = false;
     }
+    get processorName() {
+        return 'background-processor';
+    }
+}
+
+/**
+ * Simple WebGL renderer for full-screen Gaussian blur.
+ * Uses a two-pass separable Gaussian blur (horizontal then vertical).
+ * Optimized for moderation use cases by blurring at reduced resolution (15% scale)
+ * and upscaling back to full resolution for output.
+ */
+class FullScreenBlurRenderer {
+    constructor(canvas) {
+        this.inputTexture = null;
+        this.isRunning = false;
+        this.targetWidth = 0;
+        this.targetHeight = 0;
+        this.weightCache = new Map();
+        this.canvas = canvas;
+        const gl = canvas.getContext('webgl2', {
+            alpha: false,
+            antialias: false,
+            desynchronized: true,
+        });
+        if (!gl)
+            throw new Error('WebGL2 not supported');
+        this.gl = gl;
+        const vertexShaderSource = `#version 300 es
+      precision highp float;
+      in vec2 a_position;
+      in vec2 a_texCoord;
+      out vec2 v_texCoord;
+      void main() {
+          v_texCoord = a_texCoord;
+          gl_Position = vec4(a_position, 0.0, 1.0);
+      }
+    `;
+        const fragmentShaderSource = `#version 300 es
+      precision highp float;
+      in vec2 v_texCoord;
+      out vec4 outColor;
+      uniform sampler2D u_image;
+      uniform vec2 u_texelSize;
+      uniform vec2 u_direction;
+      uniform float u_weights[25];
+      void main() {
+          vec4 color = vec4(0.0);
+          for (int i = -12; i <= 12; i++) {
+              float w = u_weights[i + 12];
+              if (w == 0.0) continue;
+              vec2 offset = float(i) * u_direction * u_texelSize;
+              color += w * texture(u_image, v_texCoord + offset);
+          }
+          outColor = color;
+      }
+    `;
+        this.blurProgramHandle = this.createAndLinkProgram(vertexShaderSource, fragmentShaderSource);
+        const passthroughFragmentShaderSource = `#version 300 es
+      precision highp float;
+      in vec2 v_texCoord;
+      out vec4 outColor;
+      uniform sampler2D u_image;
+      void main() {
+          outColor = texture(u_image, v_texCoord);
+      }
+    `;
+        this.passthroughProgramHandle = this.createAndLinkProgram(vertexShaderSource, passthroughFragmentShaderSource);
+        const blurProgram = this.blurProgramHandle;
+        const passthroughProgram = this.passthroughProgramHandle;
+        this.blurLocations = {
+            positionLocation: gl.getAttribLocation(blurProgram, 'a_position'),
+            texCoordLocation: gl.getAttribLocation(blurProgram, 'a_texCoord'),
+            imageLocation: gl.getUniformLocation(blurProgram, 'u_image'),
+            texelSizeLocation: gl.getUniformLocation(blurProgram, 'u_texelSize'),
+            directionLocation: gl.getUniformLocation(blurProgram, 'u_direction'),
+            weightsLocation: gl.getUniformLocation(blurProgram, 'u_weights'),
+        };
+        this.passthroughLocations = {
+            positionLocation: gl.getAttribLocation(passthroughProgram, 'a_position'),
+            texCoordLocation: gl.getAttribLocation(passthroughProgram, 'a_texCoord'),
+            imageLocation: gl.getUniformLocation(passthroughProgram, 'u_image'),
+        };
+        this.positionBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW);
+        this.texCoordBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoordBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0]), gl.STATIC_DRAW);
+        const createTexture2D = () => {
+            const tex = gl.createTexture();
+            if (!tex)
+                throw new Error('Failed to create texture');
+            gl.bindTexture(gl.TEXTURE_2D, tex);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+            return tex;
+        };
+        const createFramebufferForTexture = (tex) => {
+            const fb = gl.createFramebuffer();
+            if (!fb)
+                throw new Error('Failed to create framebuffer');
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            return fb;
+        };
+        this.pingTexture = createTexture2D();
+        this.pongTexture = createTexture2D();
+        this.pingFbo = createFramebufferForTexture(this.pingTexture);
+        this.pongFbo = createFramebufferForTexture(this.pongTexture);
+        this.inputTexture = createTexture2D();
+        gl.useProgram(blurProgram);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
+        gl.enableVertexAttribArray(this.blurLocations.positionLocation);
+        gl.vertexAttribPointer(this.blurLocations.positionLocation, 2, gl.FLOAT, false, 0, 0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoordBuffer);
+        gl.enableVertexAttribArray(this.blurLocations.texCoordLocation);
+        gl.vertexAttribPointer(this.blurLocations.texCoordLocation, 2, gl.FLOAT, false, 0, 0);
+        if (this.blurLocations.imageLocation) {
+            gl.uniform1i(this.blurLocations.imageLocation, 0);
+        }
+        this.isRunning = true;
+    }
+    createAndLinkProgram(vsSource, fsSource) {
+        const gl = this.gl;
+        const vs = this.createShader(gl.VERTEX_SHADER, vsSource);
+        const fs = this.createShader(gl.FRAGMENT_SHADER, fsSource);
+        const prog = gl.createProgram();
+        if (!prog)
+            throw new Error('Failed to create program');
+        gl.attachShader(prog, vs);
+        gl.attachShader(prog, fs);
+        gl.linkProgram(prog);
+        if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+            throw new Error('Shader link failed: ' + gl.getProgramInfoLog(prog));
+        }
+        gl.deleteShader(vs);
+        gl.deleteShader(fs);
+        return prog;
+    }
+    createShader(type, source) {
+        const gl = this.gl;
+        const shader = gl.createShader(type);
+        if (!shader)
+            throw new Error('Failed to create shader');
+        gl.shaderSource(shader, source);
+        gl.compileShader(shader);
+        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+            throw new Error('Shader compile failed: ' + gl.getShaderInfoLog(shader));
+        }
+        return shader;
+    }
+    getGaussianWeights(radius) {
+        const r = Math.max(0, Math.min(radius | 0, 12));
+        const cached = this.weightCache.get(r);
+        if (cached)
+            return cached;
+        const weights = new Float32Array(25);
+        if (r === 0) {
+            weights[12] = 1.0;
+            this.weightCache.set(r, weights);
+            return weights;
+        }
+        const sigma = r * 0.6;
+        let sum = 0;
+        for (let i = -r; i <= r; i++) {
+            const w = Math.exp(-(i * i) / (2 * sigma * sigma));
+            weights[i + 12] = w;
+            sum += w;
+        }
+        for (let i = -r; i <= r; i++) {
+            weights[i + 12] /= sum;
+        }
+        this.weightCache.set(r, weights);
+        return weights;
+    }
+    render(frame, radius) {
+        if (!this.isRunning)
+            return;
+        const gl = this.gl;
+        const width = frame.displayWidth;
+        const height = frame.displayHeight;
+        if (!width || !height)
+            return;
+        if (this.canvas.width !== width || this.canvas.height !== height) {
+            this.canvas.width = width;
+            this.canvas.height = height;
+        }
+        const scale = 0.15;
+        const scaledWidth = Math.max(1, Math.floor(width * scale));
+        const scaledHeight = Math.max(1, Math.floor(height * scale));
+        if (scaledWidth !== this.targetWidth ||
+            scaledHeight !== this.targetHeight) {
+            this.targetWidth = scaledWidth;
+            this.targetHeight = scaledHeight;
+            gl.bindTexture(gl.TEXTURE_2D, this.pingTexture);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, scaledWidth, scaledHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+            gl.bindTexture(gl.TEXTURE_2D, this.pongTexture);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, scaledWidth, scaledHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+        }
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.inputTexture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, frame);
+        gl.useProgram(this.blurProgramHandle);
+        if (this.blurLocations.texelSizeLocation) {
+            gl.uniform2f(this.blurLocations.texelSizeLocation, 1.0 / scaledWidth, 1.0 / scaledHeight);
+        }
+        const weights = this.getGaussianWeights(radius);
+        if (this.blurLocations.weightsLocation) {
+            gl.uniform1fv(this.blurLocations.weightsLocation, weights);
+        }
+        gl.viewport(0, 0, scaledWidth, scaledHeight);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.pingFbo);
+        gl.bindTexture(gl.TEXTURE_2D, this.inputTexture);
+        if (this.blurLocations.directionLocation) {
+            gl.uniform2f(this.blurLocations.directionLocation, 1.0, 0.0);
+        }
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.pongFbo);
+        gl.bindTexture(gl.TEXTURE_2D, this.pingTexture);
+        if (this.blurLocations.directionLocation) {
+            gl.uniform2f(this.blurLocations.directionLocation, 0.0, 1.0);
+        }
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.viewport(0, 0, width, height);
+        gl.useProgram(this.passthroughProgramHandle);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
+        gl.enableVertexAttribArray(this.passthroughLocations.positionLocation);
+        gl.vertexAttribPointer(this.passthroughLocations.positionLocation, 2, gl.FLOAT, false, 0, 0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoordBuffer);
+        gl.enableVertexAttribArray(this.passthroughLocations.texCoordLocation);
+        gl.vertexAttribPointer(this.passthroughLocations.texCoordLocation, 2, gl.FLOAT, false, 0, 0);
+        gl.bindTexture(gl.TEXTURE_2D, this.pongTexture);
+        if (this.passthroughLocations.imageLocation) {
+            gl.uniform1i(this.passthroughLocations.imageLocation, 0);
+        }
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+    }
+    close() {
+        if (!this.isRunning)
+            return;
+        this.isRunning = false;
+        const gl = this.gl;
+        if (this.pingFbo)
+            gl.deleteFramebuffer(this.pingFbo);
+        if (this.pongFbo)
+            gl.deleteFramebuffer(this.pongFbo);
+        if (this.pingTexture)
+            gl.deleteTexture(this.pingTexture);
+        if (this.pongTexture)
+            gl.deleteTexture(this.pongTexture);
+        if (this.inputTexture)
+            gl.deleteTexture(this.inputTexture);
+        if (this.positionBuffer)
+            gl.deleteBuffer(this.positionBuffer);
+        if (this.texCoordBuffer)
+            gl.deleteBuffer(this.texCoordBuffer);
+        gl.deleteProgram(this.blurProgramHandle);
+        gl.deleteProgram(this.passthroughProgramHandle);
+    }
+}
+
+/**
+ * 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 {
+    /**
+     * 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';
+    }
 }
 
 exports.BACKGROUND_BLUR_MAP = BACKGROUND_BLUR_MAP;
+exports.FullScreenBlur = FullScreenBlur;
 exports.VirtualBackground = VirtualBackground;
 exports.createRenderer = createRenderer;
 exports.isMediaPipePlatformSupported = isMediaPipePlatformSupported;