From 31ace267ce8e45f1b5947ddd5cf67096fe29bcc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Fri, 12 Mar 2021 14:41:12 +0100 Subject: [PATCH] fix(virtual-background) use tighter edge smoothing --- .../JitsiStreamBackgroundEffect.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js b/react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js index bf79b209e..ac5586081 100644 --- a/react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js +++ b/react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js @@ -80,7 +80,15 @@ export default class JitsiStreamBackgroundEffect { this._outputCanvasCtx.globalCompositeOperation = 'copy'; // Draw segmentation mask. - this._outputCanvasCtx.filter = `blur(${blurValue})`; + // + + // Smooth out the edges. + if (this._options.virtualBackground.isVirtualBackground) { + this._outputCanvasCtx.filter = 'blur(4px)'; + } else { + this._outputCanvasCtx.filter = 'blur(8px)'; + } + this._outputCanvasCtx.drawImage( this._segmentationMaskCanvas, 0, @@ -92,11 +100,17 @@ export default class JitsiStreamBackgroundEffect { this._inputVideoElement.width, this._inputVideoElement.height ); - this._outputCanvasCtx.globalCompositeOperation = 'source-in'; this._outputCanvasCtx.filter = 'none'; + + // Draw the foreground video. + // + this._outputCanvasCtx.drawImage(this._inputVideoElement, 0, 0); + // Draw the background. + // + this._outputCanvasCtx.globalCompositeOperation = 'destination-over'; if (this._options.virtualBackground.isVirtualBackground) { this._outputCanvasCtx.drawImage(this.virtualImage, 0, 0);