fix edges not being blurred

GoogleForCreators · Apr 17, 2023 · 9440559 · 9440559
1 parent 359aa7a
commit 9440559
Showing 1 changed file with 10 additions and 14 deletions.
diff --git a/packages/story-editor/src/components/mediaRecording/playbackMedia.js b/packages/story-editor/src/components/mediaRecording/playbackMedia.js
@@ -108,30 +108,26 @@ function PlaybackMedia() {
     context.save();
 
     const segmentationMask = new Uint8ClampedArray(
-      streamNode.videoWidth * streamNode.videoHeight * 4
+      canvas.width * canvas.height * 4
     );
     const mask = masks[0];
     for (let i = 0; i < mask.length; i++) {
       const isBackround = mask[i] === 0;
-      segmentationMask[i * 4] = isBackround ? 255 : 0;
-      segmentationMask[i * 4 + 1] = isBackround ? 255 : 0;
-      segmentationMask[i * 4 + 2] = isBackround ? 255 : 0;
-      segmentationMask[i * 4 + 3] = isBackround ? 255 : 0;
+      segmentationMask[i * 4] = isBackround ? 0 : 255;
+      segmentationMask[i * 4 + 1] = isBackround ? 0 : 255;
+      segmentationMask[i * 4 + 2] = isBackround ? 0 : 255;
+      segmentationMask[i * 4 + 3] = isBackround ? 0 : 255;
     }
     const segmentationMaskBitMap = await createImageBitmap(
-      new ImageData(
-        segmentationMask,
-        streamNode.videoWidth,
-        streamNode.videoHeight
-      )
+      new ImageData(segmentationMask, canvas.width, canvas.height)
     );
 
     if (!canvasBlur) {
       context.drawImage(streamNode, 0, 0, canvas.width, canvas.height);
 
       blur(context, BACKGROUND_BLUR_PX);
 
-      context.globalCompositeOperation = 'destination-in';
+      context.globalCompositeOperation = 'destination-out';
       context.drawImage(
         segmentationMaskBitMap,
         0,
@@ -143,7 +139,7 @@ function PlaybackMedia() {
       context.drawImage(streamNode, 0, 0, canvas.width, canvas.height);
     } else {
       context.globalCompositeOperation = 'copy';
-      context.filter = 'none';
+      context.filter = `blur(${BACKGROUND_BLUR_PX}px)`;
       context.drawImage(
         segmentationMaskBitMap,
         0,
@@ -153,11 +149,11 @@ function PlaybackMedia() {
       );
 
       context.globalCompositeOperation = 'source-in';
-      context.filter = `blur(${BACKGROUND_BLUR_PX}px)`;
+      context.filter = `none`;
       context.drawImage(streamNode, 0, 0, canvas.width, canvas.height);
 
       context.globalCompositeOperation = 'destination-over';
-      context.filter = 'none';
+      context.filter = `blur(${BACKGROUND_BLUR_PX}px)`;
       context.drawImage(streamNode, 0, 0, canvas.width, canvas.height);
     }