Add blurring effect

css/_videolayout_default.scss

@@ -12,6 +12,20 @@
     overflow: hidden;
 }
 
+.video_blurred {
+    width: 100%;
+
+    &_container {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        overflow: hidden;
+        filter: blur(40px);
+    }
+}
+
 .videocontainer {
     position: relative;
     text-align: center;
@@ -153,6 +167,10 @@
     text-align: center;
 }
 
+#largeVideoWrapper {
+    box-shadow: 0 0 20px -2px #444;
+}
+
 #largeVideo,
 #largeVideoWrapper
 {

modules/UI/videolayout/VideoContainer.js

@@ -102,11 +102,11 @@ function computeCameraVideoSize(videoWidth,
         if (aspectRatio <= 1) {
             const zoomRateHeight = videoSpaceHeight / videoHeight;
             const zoomRateWidth = videoSpaceWidth / videoWidth;
-            const maxZoomRate
-                = interfaceConfig.MAXIMUM_ZOOMING_COEFFICIENT || Infinity;
-            let zoomRate = Math.min(zoomRateWidth, maxZoomRate);
+            const zoomRate = Math.min(
+                zoomRateWidth,
+                zoomRateHeight,
+                interfaceConfig.MAXIMUM_ZOOMING_COEFFICIENT || Infinity);
 
-            zoomRate = Math.max(zoomRate, zoomRateHeight);
             availableWidth = videoWidth * zoomRate;
             availableHeight = videoHeight * zoomRate;
         } else if (availableHeight * aspectRatio < videoSpaceWidth) {
@@ -166,6 +166,10 @@ export class VideoContainer extends LargeContainer {
         return $('#largeVideo');
     }
 
+    get $videoBackground() {
+        return $('#largeVideoBackground');
+    }
+
     get id () {
         return getStreamOwnerId(this.stream);
     }
@@ -255,6 +259,7 @@ export class VideoContainer extends LargeContainer {
      */
     enableLocalConnectionProblemFilter (enable) {
         this.$video.toggleClass("videoProblemFilter", enable);
+        this.$videoBackground.toggleClass("videoProblemFilter", enable);
     }
 
     /**
@@ -345,8 +350,15 @@ export class VideoContainer extends LargeContainer {
             return;
         }
 
-        let [width, height]
+        this._hideVideoBackground();
+
+        let [ width, height ]
             = this.getVideoSize(containerWidth, containerHeight);
+
+        if (containerWidth > width) {
+            this._showVideoBackground();
+        }
+
         let { horizontalIndent, verticalIndent }
             = this.getVideoPosition(width, height,
             containerWidth, containerHeight);
@@ -408,6 +420,7 @@ export class VideoContainer extends LargeContainer {
         // detach old stream
         if (this.stream) {
             this.stream.detach(this.$video[0]);
+            this.stream.detach(this.$videoBackground[0]);
         }
 
         this.stream = stream;
@@ -418,10 +431,18 @@ export class VideoContainer extends LargeContainer {
         }
 
         stream.attach(this.$video[0]);
-        let flipX = stream.isLocal() && this.localFlipX;
+        stream.attach(this.$videoBackground[0]);
+
+        this._hideVideoBackground();
+
+        const flipX = stream.isLocal() && this.localFlipX;
+
         this.$video.css({
             transform: flipX ? 'scaleX(-1)' : 'none'
         });
+        this.$videoBackground.css({
+            transform: flipX ? 'scaleX(-1)' : 'none'
+        });
 
         // Reset the large video background depending on the stream.
         this.setLargeVideoBackground(this.avatarDisplayed);
@@ -438,8 +459,13 @@ export class VideoContainer extends LargeContainer {
         this.$video.css({
             transform: this.localFlipX ? 'scaleX(-1)' : 'none'
         });
+
+        this.$videoBackground.css({
+            transform: this.localFlipX ? 'scaleX(-1)' : 'none'
+        });
     }
 
+
     /**
      * Check if current video stream is screen sharing.
      * @returns {boolean}
@@ -476,6 +502,8 @@ export class VideoContainer extends LargeContainer {
      */
     showRemoteConnectionProblemIndicator (show) {
         this.$video.toggleClass("remoteVideoProblemFilter", show);
+        this.$videoBackground.toggleClass("remoteVideoProblemFilter", show);
+
         this.$avatar.toggleClass("remoteVideoProblemFilter", show);
     }
 
@@ -544,6 +572,17 @@ export class VideoContainer extends LargeContainer {
                 ? "#000" : interfaceConfig.DEFAULT_BACKGROUND);
     }
 
+    /**
+     * Sets the blur background to be invisible and pauses any playing video.
+     *
+     * @private
+     * @returns {void}
+     */
+    _hideVideoBackground() {
+        this.$videoBackground.css({ visibility: 'hidden' });
+        this.$videoBackground[0].pause();
+    }
+
     /**
      * Callback invoked when the video element changes dimensions.
      *
@@ -553,4 +592,15 @@ export class VideoContainer extends LargeContainer {
     _onResize() {
         this._resizeListeners.forEach(callback => callback());
     }
+
+    /**
+     * Sets the blur background to be visible and starts any loaded video.
+     *
+     * @private
+     * @returns {void}
+     */
+    _showVideoBackground() {
+        this.$videoBackground.css({ visibility: 'visible' });
+        this.$videoBackground[0].play();
+    }
 }

react/features/conference/components/Conference.web.js

@@ -69,7 +69,6 @@ class Conference extends Component {
             <div id = 'videoconference_page'>
                 <div id = 'videospace'>
                     <LargeVideo />
-
                     <Filmstrip />
                 </div>
 

react/features/large-video/components/LargeVideo.web.js

@@ -37,6 +37,13 @@ export default class LargeVideo extends Component {
                         src = '' />
                 </div>
                 <span id = 'remoteConnectionMessage' />
+                <div className = 'video_blurred_container'>
+                    <video
+                        autoPlay = { true }
+                        className = 'video_blurred'
+                        id = 'largeVideoBackground'
+                        muted = 'true' />
+                </div>
                 <div id = 'largeVideoWrapper'>
                     <video
                         autoPlay = { true }