@livekit/track-processors 0.5.4 → 0.5.6

package/dist/index.js

@@ -1,4 +1,5 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }// src/utils.ts
+var supportsOffscreenCanvas = () => typeof OffscreenCanvas !== "undefined";
 async function sleep(time) {
   return new Promise((resolve) => setTimeout(resolve, time));
 }
@@ -15,6 +16,15 @@ async function waitForTrackResolution(track) {
   }
   return { width: void 0, height: void 0 };
 }
+function createCanvas(width, height) {
+  if (supportsOffscreenCanvas()) {
+    return new OffscreenCanvas(width, height);
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+}
 
 // src/ProcessorWrapper.ts
 var ProcessorWrapper = class _ProcessorWrapper {
@@ -71,14 +81,14 @@ var ProcessorWrapper = class _ProcessorWrapper {
       }
       this.renderContext = this.displayCanvas.getContext("2d");
       this.capturedStream = this.displayCanvas.captureStream();
-      this.canvas = new OffscreenCanvas(width != null ? width : 300, height != null ? height : 300);
+      this.canvas = createCanvas(width != null ? width : 300, height != null ? height : 300);
     } else {
       this.processor = new MediaStreamTrackProcessor({ track: this.source });
       this.trackGenerator = new MediaStreamTrackGenerator({
         kind: "video",
         signalTarget: this.source
       });
-      this.canvas = new OffscreenCanvas(width != null ? width : 300, height != null ? height : 300);
+      this.canvas = createCanvas(width != null ? width : 300, height != null ? height : 300);
     }
   }
   async init(opts) {
@@ -264,6 +274,28 @@ function initTexture(gl, texIndex) {
   gl.bindTexture(gl.TEXTURE_2D, texture);
   return texture;
 }
+function createShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    console.error("Shader compile failed:", gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    throw new Error("Shader compile failed");
+  }
+  return shader;
+}
+function createProgram(gl, vs, fs) {
+  const program = gl.createProgram();
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.error("Program link failed:", gl.getProgramInfoLog(program));
+    throw new Error("Program link failed");
+  }
+  return program;
+}
 function createFramebuffer(gl, texture, width, height) {
   const framebuffer = gl.createFramebuffer();
   gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
@@ -307,11 +339,17 @@ async function resizeImageToCover(image, targetWidth, targetHeight) {
     resizeQuality: "medium"
   });
 }
-var emptyImageData = new ImageData(2, 2);
-emptyImageData.data[0] = 0;
-emptyImageData.data[1] = 0;
-emptyImageData.data[2] = 0;
-emptyImageData.data[3] = 0;
+var emptyImageData;
+function getEmptyImageData() {
+  if (!emptyImageData) {
+    emptyImageData = new ImageData(2, 2);
+    emptyImageData.data[0] = 0;
+    emptyImageData.data[1] = 0;
+    emptyImageData.data[2] = 0;
+    emptyImageData.data[3] = 0;
+  }
+  return emptyImageData;
+}
 var glsl = (source) => source;
 
 // src/webgl/shader-programs/vertexShader.ts
@@ -328,7 +366,7 @@ var vertexShaderSource = (flipY = true) => `#version 300 es
 
 // src/webgl/shader-programs/blurShader.ts
 var blurFragmentShader = glsl`#version 300 es
-  precision highp float;
+  precision mediump float;
   in vec2 texCoords;
   uniform sampler2D u_texture;
   uniform vec2 u_texelSize;
@@ -357,33 +395,9 @@ var blurFragmentShader = glsl`#version 300 es
   }
 `;
 function createBlurProgram(gl) {
-  const blurFrag = gl.createShader(gl.FRAGMENT_SHADER);
-  if (!blurFrag) {
-    throw Error("cannot create blur shader");
-  }
-  gl.shaderSource(blurFrag, blurFragmentShader);
-  gl.compileShader(blurFrag);
-  if (!gl.getShaderParameter(blurFrag, gl.COMPILE_STATUS)) {
-    const info = gl.getShaderInfoLog(blurFrag);
-    throw Error(`Failed to compile blur shader: ${info}`);
-  }
-  const blurVertexShader = gl.createShader(gl.VERTEX_SHADER);
-  if (!blurVertexShader) {
-    throw Error("cannot create blur vertex shader");
-  }
-  gl.shaderSource(blurVertexShader, vertexShaderSource());
-  gl.compileShader(blurVertexShader);
-  const blurProgram = gl.createProgram();
-  if (!blurProgram) {
-    throw Error("cannot create blur program");
-  }
-  gl.attachShader(blurProgram, blurVertexShader);
-  gl.attachShader(blurProgram, blurFrag);
-  gl.linkProgram(blurProgram);
-  if (!gl.getProgramParameter(blurProgram, gl.LINK_STATUS)) {
-    const info = gl.getProgramInfoLog(blurProgram);
-    throw Error(`Failed to link blur program: ${info}`);
-  }
+  const blurVertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource());
+  const blurFrag = createShader(gl, gl.FRAGMENT_SHADER, blurFragmentShader);
+  const blurProgram = createProgram(gl, blurVertexShader, blurFrag);
   const blurUniforms = {
     position: gl.getAttribLocation(blurProgram, "position"),
     texture: gl.getUniformLocation(blurProgram, "u_texture"),
@@ -458,37 +472,9 @@ void main() {
 }
 `;
 function createBoxBlurProgram(gl) {
-  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
-  if (!vertexShader) {
-    throw Error("cannot create vertex shader");
-  }
-  gl.shaderSource(vertexShader, vertexShaderSource());
-  gl.compileShader(vertexShader);
-  if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
-    const info = gl.getShaderInfoLog(vertexShader);
-    throw Error(`Failed to compile vertex shader: ${info}`);
-  }
-  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-  if (!fragmentShader) {
-    throw Error("cannot create fragment shader");
-  }
-  gl.shaderSource(fragmentShader, boxBlurFragmentShader);
-  gl.compileShader(fragmentShader);
-  if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
-    const info = gl.getShaderInfoLog(fragmentShader);
-    throw Error(`Failed to compile box blur shader: ${info}`);
-  }
-  const program = gl.createProgram();
-  if (!program) {
-    throw Error("cannot create box blur program");
-  }
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    const info = gl.getProgramInfoLog(program);
-    throw Error(`Failed to link box blur program: ${info}`);
-  }
+  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource());
+  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, boxBlurFragmentShader);
+  const program = createProgram(gl, vertexShader, fragmentShader);
   const uniforms = {
     position: gl.getAttribLocation(program, "position"),
     texture: gl.getUniformLocation(program, "u_texture"),
@@ -506,7 +492,7 @@ function createBoxBlurProgram(gl) {
 
 // src/webgl/shader-programs/compositeShader.ts
 var compositeFragmentShader = glsl`#version 300 es
-  precision highp float;
+  precision mediump float;
   in vec2 texCoords;
   uniform sampler2D background;
   uniform sampler2D frame;
@@ -536,37 +522,9 @@ var compositeFragmentShader = glsl`#version 300 es
   }
 `;
 function createCompositeProgram(gl) {
-  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
-  if (!vertexShader) {
-    throw Error("cannot create vertex shader");
-  }
-  gl.shaderSource(vertexShader, vertexShaderSource());
-  gl.compileShader(vertexShader);
-  if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
-    const info = gl.getShaderInfoLog(vertexShader);
-    throw Error(`Failed to compile vertex shader: ${info}`);
-  }
-  const compositeShader = gl.createShader(gl.FRAGMENT_SHADER);
-  if (!compositeShader) {
-    throw Error("cannot create fragment shader");
-  }
-  gl.shaderSource(compositeShader, compositeFragmentShader);
-  gl.compileShader(compositeShader);
-  if (!gl.getShaderParameter(compositeShader, gl.COMPILE_STATUS)) {
-    const info = gl.getShaderInfoLog(compositeShader);
-    throw Error(`Failed to compile composite shader: ${info}`);
-  }
-  const compositeProgram = gl.createProgram();
-  if (!compositeProgram) {
-    throw Error("cannot create composite program");
-  }
-  gl.attachShader(compositeProgram, vertexShader);
-  gl.attachShader(compositeProgram, compositeShader);
-  gl.linkProgram(compositeProgram);
-  if (!gl.getProgramParameter(compositeProgram, gl.LINK_STATUS)) {
-    const info = gl.getProgramInfoLog(compositeProgram);
-    throw Error(`Failed to link composite program: ${info}`);
-  }
+  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource());
+  const compositeShader = createShader(gl, gl.FRAGMENT_SHADER, compositeFragmentShader);
+  const compositeProgram = createProgram(gl, vertexShader, compositeShader);
   const attribLocations = {
     position: gl.getAttribLocation(compositeProgram, "position")
   };
@@ -585,6 +543,63 @@ function createCompositeProgram(gl) {
   };
 }
 
+// src/webgl/shader-programs/downSampler.ts
+function createDownSampler(gl, width, height) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  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);
+  const framebuffer = gl.createFramebuffer();
+  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+  const vertexSource = `
+      attribute vec2 position;
+      varying vec2 v_uv;
+      void main() {
+        v_uv = (position + 1.0) * 0.5;
+        gl_Position = vec4(position, 0.0, 1.0);
+      }
+    `;
+  const fragmentSource = `
+      precision mediump float;
+      varying vec2 v_uv;
+      uniform sampler2D u_texture;
+      void main() {
+        gl_FragColor = texture2D(u_texture, v_uv);
+      }
+    `;
+  const vertShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
+  const fragShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+  const program = createProgram(gl, vertShader, fragShader);
+  const uniforms = {
+    texture: gl.getUniformLocation(program, "u_texture"),
+    position: gl.getAttribLocation(program, "position")
+  };
+  return {
+    framebuffer,
+    texture,
+    program,
+    uniforms
+  };
+}
+function applyDownsampling(gl, inputTexture, downSampler, vertexBuffer, width, height) {
+  gl.useProgram(downSampler.program);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, downSampler.framebuffer);
+  gl.viewport(0, 0, width, height);
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+  gl.enableVertexAttribArray(downSampler.uniforms.position);
+  gl.vertexAttribPointer(downSampler.uniforms.position, 2, gl.FLOAT, false, 0, 0);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, inputTexture);
+  gl.uniform1i(downSampler.uniforms.texture, 0);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  return downSampler.texture;
+}
+
 // src/webgl/index.ts
 var setupWebGL = (canvas) => {
   const gl = canvas.getContext("webgl2", {
@@ -592,6 +607,8 @@ var setupWebGL = (canvas) => {
     premultipliedAlpha: true
   });
   let blurRadius = null;
+  let maskBlurRadius = 8;
+  const downsampleFactor = 4;
   if (!gl) {
     console.error("Failed to create WebGL context");
     return void 0;
@@ -620,27 +637,36 @@ var setupWebGL = (canvas) => {
   }
   let bgBlurTextures = [];
   let bgBlurFrameBuffers = [];
-  let maskBlurTextures = [];
-  let maskBlurFrameBuffers = [];
+  let blurredMaskTexture = null;
+  let finalMaskTextures = [];
+  let readMaskIndex = 0;
+  let writeMaskIndex = 1;
   bgBlurTextures.push(initTexture(gl, 3));
   bgBlurTextures.push(initTexture(gl, 4));
-  bgBlurFrameBuffers.push(createFramebuffer(gl, bgBlurTextures[0], canvas.width, canvas.height));
-  bgBlurFrameBuffers.push(createFramebuffer(gl, bgBlurTextures[1], canvas.width, canvas.height));
-  maskBlurTextures.push(initTexture(gl, 5));
-  maskBlurTextures.push(initTexture(gl, 6));
-  maskBlurFrameBuffers.push(
-    createFramebuffer(gl, maskBlurTextures[0], canvas.width, canvas.height)
+  const bgBlurTextureWidth = Math.floor(canvas.width / downsampleFactor);
+  const bgBlurTextureHeight = Math.floor(canvas.height / downsampleFactor);
+  const downSampler = createDownSampler(gl, bgBlurTextureWidth, bgBlurTextureHeight);
+  bgBlurFrameBuffers.push(
+    createFramebuffer(gl, bgBlurTextures[0], bgBlurTextureWidth, bgBlurTextureHeight)
   );
-  maskBlurFrameBuffers.push(
-    createFramebuffer(gl, maskBlurTextures[1], canvas.width, canvas.height)
+  bgBlurFrameBuffers.push(
+    createFramebuffer(gl, bgBlurTextures[1], bgBlurTextureWidth, bgBlurTextureHeight)
   );
+  const tempMaskTexture = initTexture(gl, 5);
+  const tempMaskFrameBuffer = createFramebuffer(gl, tempMaskTexture, canvas.width, canvas.height);
+  finalMaskTextures.push(initTexture(gl, 6));
+  finalMaskTextures.push(initTexture(gl, 7));
+  const finalMaskFrameBuffers = [
+    createFramebuffer(gl, finalMaskTextures[0], canvas.width, canvas.height),
+    createFramebuffer(gl, finalMaskTextures[1], canvas.width, canvas.height)
+  ];
   gl.useProgram(compositeProgram);
   gl.uniform1i(bgTextureLocation, 0);
   gl.uniform1i(frameTextureLocation, 1);
   gl.uniform1i(maskTextureLocation, 2);
-  let customBackgroundImage = emptyImageData;
-  function render(frame, mask) {
-    if (frame.codedWidth === 0 || mask.width === 0) {
+  let customBackgroundImage = getEmptyImageData();
+  function renderFrame(frame) {
+    if (frame.codedWidth === 0 || finalMaskTextures.length === 0) {
       return;
     }
     const width = frame.displayWidth;
@@ -650,11 +676,19 @@ var setupWebGL = (canvas) => {
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, frame);
     let backgroundTexture = bgTexture;
     if (blurRadius) {
-      backgroundTexture = applyBlur(
+      const downSampledFrameTexture = applyDownsampling(
         gl,
         frameTexture,
-        width,
-        height,
+        downSampler,
+        vertexBuffer,
+        bgBlurTextureWidth,
+        bgBlurTextureHeight
+      );
+      backgroundTexture = applyBlur(
+        gl,
+        downSampledFrameTexture,
+        bgBlurTextureWidth,
+        bgBlurTextureHeight,
         blurRadius,
         blurProgram,
         blurUniforms,
@@ -668,19 +702,6 @@ var setupWebGL = (canvas) => {
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, customBackgroundImage);
       backgroundTexture = bgTexture;
     }
-    const blurredMaskTexture = applyBlur(
-      gl,
-      mask.getAsWebGLTexture(),
-      width,
-      height,
-      blurRadius || 1,
-      // Use a default blur radius if not set
-      boxBlurProgram,
-      boxBlurUniforms,
-      vertexBuffer,
-      maskBlurFrameBuffers,
-      maskBlurTextures
-    );
     gl.viewport(0, 0, width, height);
     gl.clearColor(1, 1, 1, 1);
     gl.clear(gl.COLOR_BUFFER_BIT);
@@ -695,13 +716,12 @@ var setupWebGL = (canvas) => {
     gl.bindTexture(gl.TEXTURE_2D, frameTexture);
     gl.uniform1i(frameTextureLocation, 1);
     gl.activeTexture(gl.TEXTURE2);
-    gl.bindTexture(gl.TEXTURE_2D, blurredMaskTexture);
+    gl.bindTexture(gl.TEXTURE_2D, finalMaskTextures[readMaskIndex]);
     gl.uniform1i(maskTextureLocation, 2);
     gl.drawArrays(gl.TRIANGLES, 0, 6);
-    mask.close();
   }
   async function setBackgroundImage(image) {
-    customBackgroundImage = emptyImageData;
+    customBackgroundImage = getEmptyImageData();
     if (image) {
       try {
         const croppedImage = await resizeImageToCover(image, canvas.width, canvas.height);
@@ -718,40 +738,67 @@ var setupWebGL = (canvas) => {
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, customBackgroundImage);
   }
   function setBlurRadius(radius) {
-    blurRadius = radius;
+    blurRadius = radius ? Math.max(1, Math.floor(radius / downsampleFactor)) : null;
     setBackgroundImage(null);
   }
+  function updateMask(mask) {
+    const tempFramebuffers = [tempMaskFrameBuffer, finalMaskFrameBuffers[writeMaskIndex]];
+    const tempTextures = [tempMaskTexture, finalMaskTextures[writeMaskIndex]];
+    applyBlur(
+      gl,
+      mask,
+      canvas.width,
+      canvas.height,
+      maskBlurRadius || 1,
+      boxBlurProgram,
+      boxBlurUniforms,
+      vertexBuffer,
+      tempFramebuffers,
+      tempTextures
+    );
+    readMaskIndex = writeMaskIndex;
+    writeMaskIndex = 1 - writeMaskIndex;
+  }
   function cleanup() {
     gl.deleteProgram(compositeProgram);
     gl.deleteProgram(blurProgram);
     gl.deleteProgram(boxBlurProgram);
     gl.deleteTexture(bgTexture);
     gl.deleteTexture(frameTexture);
+    gl.deleteTexture(tempMaskTexture);
+    gl.deleteFramebuffer(tempMaskFrameBuffer);
     for (const texture of bgBlurTextures) {
       gl.deleteTexture(texture);
     }
     for (const framebuffer of bgBlurFrameBuffers) {
       gl.deleteFramebuffer(framebuffer);
     }
-    for (const texture of maskBlurTextures) {
+    for (const texture of finalMaskTextures) {
       gl.deleteTexture(texture);
     }
-    for (const framebuffer of maskBlurFrameBuffers) {
+    for (const framebuffer of finalMaskFrameBuffers) {
       gl.deleteFramebuffer(framebuffer);
     }
     gl.deleteBuffer(vertexBuffer);
+    if (blurredMaskTexture) {
+      gl.deleteTexture(blurredMaskTexture);
+    }
+    if (downSampler) {
+      gl.deleteTexture(downSampler.texture);
+      gl.deleteFramebuffer(downSampler.framebuffer);
+      gl.deleteProgram(downSampler.program);
+    }
     if (customBackgroundImage) {
       if (customBackgroundImage instanceof ImageBitmap) {
         customBackgroundImage.close();
       }
-      customBackgroundImage = emptyImageData;
+      customBackgroundImage = getEmptyImageData();
     }
     bgBlurTextures = [];
     bgBlurFrameBuffers = [];
-    maskBlurTextures = [];
-    maskBlurFrameBuffers = [];
+    finalMaskTextures = [];
   }
-  return { render, setBackgroundImage, setBlurRadius, cleanup };
+  return { renderFrame, updateMask, setBackgroundImage, setBlurRadius, cleanup };
 };
 
 // src/transformers/VideoTransformer.ts
@@ -772,7 +819,7 @@ var VideoTransformer = class {
     this.canvas = outputCanvas || null;
     if (outputCanvas) {
       this.gl = setupWebGL(
-        this.canvas || new OffscreenCanvas(inputVideo.videoWidth, inputVideo.videoHeight)
+        this.canvas || createCanvas(inputVideo.videoWidth, inputVideo.videoHeight)
       );
     }
     this.inputVideo = inputVideo;
@@ -783,7 +830,7 @@ var VideoTransformer = class {
     this.canvas = outputCanvas || null;
     (_a = this.gl) == null ? void 0 : _a.cleanup();
     this.gl = setupWebGL(
-      this.canvas || new OffscreenCanvas(inputVideo.videoWidth, inputVideo.videoHeight)
+      this.canvas || createCanvas(inputVideo.videoWidth, inputVideo.videoHeight)
     );
     this.inputVideo = inputVideo;
     this.isDisabled = false;
@@ -802,6 +849,7 @@ var BackgroundProcessor = class extends VideoTransformer {
   constructor(opts) {
     super();
     this.backgroundImage = null;
+    this.segmentationTimeMs = 0;
     this.options = opts;
     this.update(opts);
   }
@@ -853,7 +901,7 @@ var BackgroundProcessor = class extends VideoTransformer {
     (_a = this.gl) == null ? void 0 : _a.setBackgroundImage(imageData);
   }
   async transform(frame, controller) {
-    var _a;
+    var _a, _b;
     try {
       if (!(frame instanceof VideoFrame) || frame.codedWidth === 0 || frame.codedHeight === 0) {
         console.debug("empty frame detected, ignoring");
@@ -863,37 +911,49 @@ var BackgroundProcessor = class extends VideoTransformer {
         controller.enqueue(frame);
         return;
       }
+      const frameTimeMs = Date.now();
       if (!this.canvas) {
         throw TypeError("Canvas needs to be initialized first");
       }
       this.canvas.width = frame.displayWidth;
       this.canvas.height = frame.displayHeight;
-      let startTimeMs = performance.now();
-      (_a = this.imageSegmenter) == null ? void 0 : _a.segmentForVideo(frame, startTimeMs, (result) => {
-        var _a2, _b;
-        const segmentationTimeMs = performance.now() - startTimeMs;
-        this.segmentationResults = result;
-        this.drawFrame(frame);
-        if (this.canvas && this.canvas.width > 0 && this.canvas.height > 0) {
-          const newFrame = new VideoFrame(this.canvas, {
-            timestamp: frame.timestamp || Date.now()
+      const segmentationPromise = new Promise((resolve, reject) => {
+        var _a2;
+        try {
+          let segmentationStartTimeMs = performance.now();
+          (_a2 = this.imageSegmenter) == null ? void 0 : _a2.segmentForVideo(frame, segmentationStartTimeMs, (result) => {
+            this.segmentationTimeMs = performance.now() - segmentationStartTimeMs;
+            this.segmentationResults = result;
+            this.updateMask(result.categoryMask);
+            result.close();
+            resolve();
           });
-          const filterTimeMs = performance.now() - startTimeMs - segmentationTimeMs;
-          const stats = {
-            processingTimeMs: performance.now() - startTimeMs,
-            segmentationTimeMs,
-            filterTimeMs
-          };
-          (_b = (_a2 = this.options).onFrameProcessed) == null ? void 0 : _b.call(_a2, stats);
-          controller.enqueue(newFrame);
-        } else {
-          controller.enqueue(frame);
+        } catch (e) {
+          reject(e);
         }
-        frame.close();
       });
+      const filterStartTimeMs = performance.now();
+      this.drawFrame(frame);
+      if (this.canvas && this.canvas.width > 0 && this.canvas.height > 0) {
+        const newFrame = new VideoFrame(this.canvas, {
+          timestamp: frame.timestamp || frameTimeMs
+        });
+        controller.enqueue(newFrame);
+        const filterTimeMs = performance.now() - filterStartTimeMs;
+        const stats = {
+          processingTimeMs: this.segmentationTimeMs + filterTimeMs,
+          segmentationTimeMs: this.segmentationTimeMs,
+          filterTimeMs
+        };
+        (_b = (_a = this.options).onFrameProcessed) == null ? void 0 : _b.call(_a, stats);
+      } else {
+        controller.enqueue(frame);
+      }
+      await segmentationPromise;
     } catch (e) {
       console.error("Error while processing frame: ", e);
-      frame == null ? void 0 : frame.close();
+    } finally {
+      frame.close();
     }
   }
   async update(opts) {
@@ -906,12 +966,16 @@ var BackgroundProcessor = class extends VideoTransformer {
     }
   }
   async drawFrame(frame) {
-    if (!this.canvas || !this.gl || !this.segmentationResults || !this.inputVideo)
+    var _a;
+    if (!this.gl)
       return;
-    const mask = this.segmentationResults.categoryMask;
-    if (mask) {
-      this.gl.render(frame, mask);
-    }
+    (_a = this.gl) == null ? void 0 : _a.renderFrame(frame);
+  }
+  async updateMask(mask) {
+    var _a;
+    if (!mask)
+      return;
+    (_a = this.gl) == null ? void 0 : _a.updateMask(mask.getAsWebGLTexture());
   }
 };