feat(virtual-background): Desktop share as virtual background

react/features/virtual-background/components/VirtualBackgroundDialog.js

@@ -63,6 +63,11 @@ type Props = {
      */
     _selectedThumbnail: string,
 
+    /**
+     * Returns the selected virtual source object.
+     */
+    _virtualSource: Object,
+
     /**
      * The redux {@code dispatch} function.
      */
@@ -79,11 +84,12 @@ type Props = {
  *
  * @returns {ReactElement}
  */
-function VirtualBackground({ _jitsiTrack, _selectedThumbnail, dispatch, t }: Props) {
+function VirtualBackground({ _jitsiTrack, _selectedThumbnail, _virtualSource, dispatch, t }: Props) {
     const [ options, setOptions ] = useState({});
     const localImages = jitsiLocalStorage.getItem('virtualBackgrounds');
     const [ storedImages, setStoredImages ] = useState((localImages && JSON.parse(localImages)) || []);
     const [ loading, isloading ] = useState(false);
+    const [ activeDesktopVideo ] = useState(_virtualSource?.videoType === 'desktop' ? _virtualSource : null);
 
     const deleteStoredImage = image => {
         setStoredImages(storedImages.filter(item => item !== image));
@@ -180,6 +186,9 @@ function VirtualBackground({ _jitsiTrack, _selectedThumbnail, dispatch, t }: Pro
     };
 
     const applyVirtualBackground = async () => {
+        if (activeDesktopVideo) {
+            await activeDesktopVideo.dispose();
+        }
         isloading(true);
         await dispatch(toggleBackgroundEffect(options, _jitsiTrack));
         await isloading(false);
@@ -289,6 +298,7 @@ function VirtualBackground({ _jitsiTrack, _selectedThumbnail, dispatch, t }: Pro
  */
 function _mapStateToProps(state): Object {
     return {
+        _virtualSource: state['features/virtual-background'].virtualSource,
         _selectedThumbnail: state['features/virtual-background'].selectedThumbnail,
         _jitsiTrack: getLocalVideoTrack(state['features/base/tracks'])?.jitsiTrack
     };

react/features/virtual-background/components/VirtualBackgroundPreview.js

@@ -9,8 +9,9 @@ import { connect, equals } from '../../base/redux';
 import { getCurrentCameraDeviceId } from '../../base/settings';
 import { createLocalTracksF } from '../../base/tracks/functions';
 import { toggleBackgroundEffect } from '../actions';
+import { localTrackStopped } from '../functions';
 
-const videoClassName = 'virtual-background-preview-video flipVideoX';
+const videoClassName = 'video-preview-video';
 
 /**
  * The type of the React {@code PureComponent} props of {@link VirtualBackgroundPreview}.
@@ -206,8 +207,14 @@ class VirtualBackgroundPreview extends PureComponent<Props, State> {
             this._setTracks();
         }
         if (!equals(this.props.options, prevProps.options)) {
+            if (prevProps.options.backgroundType === 'desktop-share') {
+                prevProps.options.url.dispose();
+            }
             this._applyBackgroundEffect();
         }
+        if (this.props.options.url?.videoType === 'desktop') {
+            localTrackStopped(this.props.dispatch, this.props.options.url, this.state.jitsiTrack);
+        }
     }
 
     /**

react/features/virtual-background/functions.js

@@ -1,4 +1,8 @@
 // @flow
+
+import { JitsiTrackEvents } from '../base/lib-jitsi-meet';
+
+import { toggleBackgroundEffect } from './actions';
 let filterSupport;
 
 /**
@@ -85,3 +89,26 @@ export function resizeImage(base64image: any, width: number = 1920, height: numb
         img.src = base64image;
     });
 }
+
+/**
+ * Check if the local desktop track was stopped and apply none option on virtual background.
+ *
+ * @param {Function} dispatch - The Redux dispatch function.
+ * @param {Object} desktopTrack - The desktop track that needs to be checked if it was stopped.
+ * @param {Object} currentLocalTrack - The current local track where we apply none virtual
+ * background option if the desktop track was stopped.
+ * @returns {Promise}
+ */
+export function localTrackStopped(dispatch: Function, desktopTrack: Object, currentLocalTrack: Object) {
+    const noneOptions = {
+        enabled: false,
+        backgroundType: 'none',
+        selectedThumbnail: 'none',
+        backgroundEffectEnabled: false
+    };
+
+    desktopTrack
+    && desktopTrack.on(JitsiTrackEvents.LOCAL_TRACK_STOPPED, () => {
+        dispatch(toggleBackgroundEffect(noneOptions, currentLocalTrack));
+    });
+}

react/features/virtual-background/middleware.js

@@ -1,10 +1,9 @@
 // @flow
 
-import { JitsiTrackEvents } from '../base/lib-jitsi-meet';
 import { MiddlewareRegistry } from '../base/redux';
 import { getLocalVideoTrack } from '../base/tracks';
 
-import { toggleBackgroundEffect } from './actions';
+import { localTrackStopped } from './functions';
 
 /**
  * Middleware which intercepts the desktop video type on
@@ -20,17 +19,7 @@ MiddlewareRegistry.register(store => next => action => {
     const currentLocalTrack = getLocalVideoTrack(getState()['features/base/tracks']);
 
     if (virtualSource?.videoType === 'desktop') {
-        const noneOptions = {
-            enabled: false,
-            backgroundType: 'none',
-            selectedThumbnail: 'none',
-            backgroundEffectEnabled: false
-        };
-
-        virtualSource
-            && virtualSource.on(JitsiTrackEvents.LOCAL_TRACK_STOPPED, () => {
-                dispatch(toggleBackgroundEffect(noneOptions, currentLocalTrack.jitsiTrack));
-            });
+        localTrackStopped(dispatch, virtualSource, currentLocalTrack.jitsiTrack);
     }
 
     return next(action);