Add workaround for webgpu blur backend

src/content/insertable-streams/video-processing/js/webgpu-background-blur.js

@@ -193,6 +193,7 @@ const batch = [4, 4];
   constructor() {
     // All fields are initialized in init()
     /** @private {?OffscreenCanvas} canvas used to render video frame */
+    this.enableWorkaroundForGPUMemoryLeak = true;
     this.canvas_ = null;
     /** @private {string} */
     this.debugPath_ = 'debug.pipeline.frameTransform_';
@@ -267,6 +268,15 @@ const batch = [4, 4];
     this.blurPipeline_ = blurPipeline;
 
     const presentationFormat = context.getPreferredFormat(adapter);
+
+    if (this.enableWorkaroundForGPUMemoryLeak) {
+      this.videoFrameCanvas_ = new OffscreenCanvas(1, 1);
+      this.videoFrameContext_ = null;
+      this.requireSwizzle = presentationFormat === 'bgra8unorm' ? true : false;
+      this.presentationWidth = 0;
+      this.presentationHeight = 0;
+      this.downloadBuffer = null;
+    }
     const fullscreenQuadPipeline = device.createRenderPipeline({
       vertex: {
         module: device.createShaderModule({
@@ -435,14 +445,38 @@ const batch = [4, 4];
         canvas.width * devicePixelRatio,
         canvas.height * devicePixelRatio,
       ];
+
+      if (this.enableWorkaroundForGPUMemoryLeak) {
+        this.presentationWidth = presentationSize[0];
+        this.presentationHeight = presentationSize[1];
+      }
+
       const presentationFormat = this.context_.getPreferredFormat(this.adapter_);
       this.context_.configure({
           device: this.device_,
           format: presentationFormat,
           size: presentationSize,
+          usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
         });
       this.initResources_(frameWidth, frameHeight);
     }
+
+    if (this.enableWorkaroundForGPUMemoryLeak) {
+      if (this.videoFrameCanvas_.width !== frameWidth || this.videoFrameCanvas_.height !== frameHeight) {
+        const devicePixelRatio = window.devicePixelRatio || 1;
+        this.videoFrameCanvas_.width = frameWidth;
+        this.videoFrameCanvas_.height = frameHeight;
+        this.videoFrameContext_ = this.videoFrameCanvas_.getContext('2d');
+
+        const widthBit = Math.ceil(this.presentationWidth * 4 / 256)
+        const bytesPerRow = widthBit * 256;
+        this.downloadBufferBytesPerRow = bytesPerRow;
+        this.downloadBuffer = device.createBuffer({size: bytesPerRow * this.presentationHeight,
+                                                usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
+                                                mappedAtCreation: false});
+      }
+    }
+
     const videoBitmap = await createImageBitmap(frame);
     device.queue.copyExternalImageToTexture(
       { source: videoBitmap },
@@ -663,10 +697,59 @@ const batch = [4, 4];
 
     await device.queue.onSubmittedWorkDone();
 
+
+    const encoder = device.createCommandEncoder();
+    encoder.copyTextureToBuffer(
+      {
+        texture: this.context_.getCurrentTexture()
+      },
+      {
+        buffer: this.downloadBuffer,
+        bytesPerRow: this.downloadBufferBytesPerRow,
+        rowsPerImage: this.presentationHeight
+      },
+      {
+        width: this.presentationWidth,
+        height: this.presentationHeight,
+      }
+    );
+    device.queue.submit([encoder.finish()]);
+    await device.queue.onSubmittedWorkDone();
+
+    if (this.enableWorkaroundForGPUMemoryLeak) {
+      await this.downloadBuffer.mapAsync(GPUMapMode.READ);
+      const content = new Uint8ClampedArray(this.downloadBuffer.getMappedRange());
+
+      let imageDataContent;
+
+      if (this.requireSwizzle) {
+        imageDataContent = new Uint8ClampedArray(4 * this.presentationWidth * this.presentationHeight);
+        for (let i = 0; i < this.presentationHeight; ++i) {
+          for (let j = 0; j < this.presentationWidth; ++j) {
+            let pixelPos = (i * this.presentationWidth + j) * 4;
+            imageDataContent[pixelPos] = content[pixelPos + 2];
+            imageDataContent[pixelPos + 1] = content[pixelPos + 1];
+            imageDataContent[pixelPos + 2] = content[pixelPos ];
+            imageDataContent[pixelPos + 3] = content[pixelPos + 3];
+          }
+        }
+      } else {
+        imageDataContent = content;
+      }
+
+      const imageData = new ImageData(imageDataContent, this.presentationWidth, this.presentationHeight);
+      const finalImage = await createImageBitmap(imageData);
+      this.videoFrameContext_.drawImage(finalImage, 0, 0);
+      this.downloadBuffer.unmap();
+      finalImage.close();
+    }
+
     // Create a video frame from canvas and enqueue it to controller
     // alpha: 'discard' is needed in order to send frames to a PeerConnection.
     frame.close();
-    controller.enqueue(new VideoFrame(this.canvas_, {timestamp: frame.timestamp, alpha: 'discard'}));
+
+    const canvasSourceImage = this.enableWorkaroundForGPUMemoryLeak ? this.videoFrameCanvas_ : this.canvas_;
+    controller.enqueue(new VideoFrame(canvasSourceImage, {timestamp: frame.timestamp, alpha: 'discard'}));
   }
 
   /** @override */