fix(virtual-backgroud) Remove desktop share as virtual background.

Its no longer supported in multi-stream mode.

react/features/app/middlewares.web.js

@@ -19,7 +19,6 @@ import '../screen-share/middleware';
 import '../shared-video/middleware';
 import '../settings/middleware';
 import '../talk-while-muted/middleware';
-import '../virtual-background/middleware';
 import '../face-landmarks/middleware';
 import '../gifs/middleware';
 import '../whiteboard/middleware';

react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js

@@ -49,11 +49,6 @@ export default class JitsiStreamBackgroundEffect {
             this._virtualImage.crossOrigin = 'anonymous';
             this._virtualImage.src = this._options.virtualBackground.virtualSource;
         }
-        if (this._options.virtualBackground.backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE) {
-            this._virtualVideo = document.createElement('video');
-            this._virtualVideo.autoplay = true;
-            this._virtualVideo.srcObject = this._options?.virtualBackground?.virtualSource?.stream;
-        }
         this._model = model;
         this._segmentationPixelCount = this._options.width * this._options.height;
 
@@ -98,14 +93,6 @@ export default class JitsiStreamBackgroundEffect {
 
         // Smooth out the edges.
         this._outputCanvasCtx.filter = backgroundType === VIRTUAL_BACKGROUND_TYPE.IMAGE ? 'blur(4px)' : 'blur(8px)';
-        if (backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE) {
-            // Save current context before applying transformations.
-            this._outputCanvasCtx.save();
-
-            // Flip the canvas and prevent mirror behaviour.
-            this._outputCanvasCtx.scale(-1, 1);
-            this._outputCanvasCtx.translate(-this._outputCanvasElement.width, 0);
-        }
         this._outputCanvasCtx.drawImage(
             this._segmentationMaskCanvas,
             0,
@@ -117,31 +104,15 @@ export default class JitsiStreamBackgroundEffect {
             this._inputVideoElement.width,
             this._inputVideoElement.height
         );
-        if (backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE) {
-            this._outputCanvasCtx.restore();
-        }
         this._outputCanvasCtx.globalCompositeOperation = 'source-in';
         this._outputCanvasCtx.filter = 'none';
 
         // Draw the foreground video.
-        if (backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE) {
-            // Save current context before applying transformations.
-            this._outputCanvasCtx.save();
-
-            // Flip the canvas and prevent mirror behaviour.
-            this._outputCanvasCtx.scale(-1, 1);
-            this._outputCanvasCtx.translate(-this._outputCanvasElement.width, 0);
-        }
         this._outputCanvasCtx.drawImage(this._inputVideoElement, 0, 0);
-        if (backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE) {
-            this._outputCanvasCtx.restore();
-        }
 
         // Draw the background.
-
         this._outputCanvasCtx.globalCompositeOperation = 'destination-over';
-        if (backgroundType === VIRTUAL_BACKGROUND_TYPE.IMAGE
+        if (backgroundType === VIRTUAL_BACKGROUND_TYPE.IMAGE) {
-            || backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE) {
             this._outputCanvasCtx.drawImage(
                 backgroundType === VIRTUAL_BACKGROUND_TYPE.IMAGE
                     ? this._virtualImage : this._virtualVideo,

react/features/toolbox/components/web/Toolbox.tsx

@@ -100,8 +100,7 @@ import {
 // @ts-ignore
 import { VideoQualityButton, VideoQualityDialog } from '../../../video-quality/components';
 // @ts-ignore
-import { VideoBackgroundButton, toggleBackgroundEffect } from '../../../virtual-background';
+import { VideoBackgroundButton } from '../../../virtual-background';
-import { VIRTUAL_BACKGROUND_TYPE } from '../../../virtual-background/constants';
 import WhiteboardButton from '../../../whiteboard/components/web/WhiteboardButton';
 import { isWhiteboardButtonVisible } from '../../../whiteboard/functions';
 import {
@@ -665,30 +664,12 @@ class Toolbox extends Component<Props> {
      */
     _doToggleScreenshare() {
         const {
-            _backgroundType,
             _desktopSharingButtonDisabled,
             _desktopSharingEnabled,
-            _localVideo,
             _screenSharing,
-            _virtualSource,
             dispatch
         } = this.props;
 
-        if (_backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE) {
-            const noneOptions = {
-                enabled: false,
-                backgroundType: VIRTUAL_BACKGROUND_TYPE.NONE,
-                selectedThumbnail: VIRTUAL_BACKGROUND_TYPE.NONE,
-                backgroundEffectEnabled: false
-            };
-
-            _virtualSource.dispose();
-
-            dispatch(toggleBackgroundEffect(noneOptions, _localVideo));
-
-            return;
-        }
-
         if (_desktopSharingEnabled && !_desktopSharingButtonDisabled) {
             dispatch(startScreenShareFlow(!_screenSharing));
         }

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

@@ -7,21 +7,17 @@ import { jitsiLocalStorage } from '@jitsi/js-utils/jitsi-local-storage';
 import { Theme } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 import { WithTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../app/types';
 // @ts-ignore
 import { getMultipleVideoSendingSupportFeatureFlag } from '../../base/config';
 // @ts-ignore
-import { Dialog, hideDialog, openDialog } from '../../base/dialog';
+import { Dialog, hideDialog } from '../../base/dialog';
 import { translate } from '../../base/i18n/functions';
 import Icon from '../../base/icons/components/Icon';
-import { IconCloseSmall, IconShareDesktop } from '../../base/icons/svg';
+import { IconCloseSmall } from '../../base/icons/svg';
-import { JitsiTrackErrors, browser } from '../../base/lib-jitsi-meet';
 // @ts-ignore
-import { createLocalTrack } from '../../base/lib-jitsi-meet/functions';
-import { VIDEO_TYPE } from '../../base/media/constants';
 import { connect } from '../../base/redux/functions';
 // @ts-ignore
 import { updateSettings } from '../../base/settings';
@@ -30,9 +26,6 @@ import { Tooltip } from '../../base/tooltip';
 // @ts-ignore
 import { getLocalVideoTrack } from '../../base/tracks';
 // @ts-ignore
-import { showErrorNotification } from '../../notifications';
-import { NOTIFICATION_TIMEOUT_TYPE } from '../../notifications/constants';
-// @ts-ignore
 import { toggleBackgroundEffect, virtualBackgroundTrackChanged } from '../actions';
 import { BACKGROUNDS_LIMIT, IMAGES, type Image, VIRTUAL_BACKGROUND_TYPE } from '../constants';
 // @ts-ignore
@@ -290,7 +283,6 @@ function VirtualBackground({
     _selectedThumbnail,
     _showUploadButton,
     _virtualBackground,
-    _multiStreamModeEnabled,
     dispatch,
     initialOptions,
     t
@@ -301,14 +293,6 @@ function VirtualBackground({
     const localImages = jitsiLocalStorage.getItem('virtualBackgrounds');
     const [ storedImages, setStoredImages ] = useState<Array<Image>>((localImages && Bourne.parse(localImages)) || []);
     const [ loading, setLoading ] = useState(false);
-    let { disableScreensharingVirtualBackground } = useSelector((state: IState) => state['features/base/config']);
-
-    // Disable screenshare as virtual background in multi-stream mode.
-    disableScreensharingVirtualBackground = disableScreensharingVirtualBackground || _multiStreamModeEnabled;
-
-    const [ activeDesktopVideo ] = useState(_virtualBackground?.virtualSource?.videoType === VIDEO_TYPE.DESKTOP
-        ? _virtualBackground.virtualSource
-        : null);
     const [ initialVirtualBackground ] = useState(_virtualBackground);
     const deleteStoredImage = useCallback(e => {
         const imageId = e.currentTarget.getAttribute('data-imageid');
@@ -374,71 +358,6 @@ function VirtualBackground({
         }
     }, [ enableSlideBlur ]);
 
-
-    const shareDesktop = useCallback(async () => {
-        if (disableScreensharingVirtualBackground) {
-            return;
-        }
-
-        let isCancelled = false, url;
-
-        try {
-            url = await createLocalTrack('desktop', '');
-        } catch (e: any) {
-            if (e.name === JitsiTrackErrors.SCREENSHARING_USER_CANCELED) {
-                isCancelled = true;
-            } else {
-                logger.error(e);
-            }
-        }
-
-        if (!url) {
-            if (!isCancelled) {
-                dispatch(showErrorNotification({
-                    titleKey: 'virtualBackground.desktopShareError'
-                }, NOTIFICATION_TIMEOUT_TYPE.LONG));
-                logger.error('Could not create desktop share as a virtual background!');
-            }
-
-            /**
-             * For electron createLocalTrack will open the {@code DesktopPicker} dialog and hide the
-             * {@code VirtualBackgroundDialog}. That's why we need to reopen the {@code VirtualBackgroundDialog}
-             * and restore the current state through {@code initialOptions} prop.
-             */
-            if (browser.isElectron()) {
-                dispatch(openDialog(VirtualBackgroundDialog, { initialOptions: options }));
-            }
-
-            return;
-        }
-
-        const newOptions = {
-            backgroundType: VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE,
-            enabled: true,
-            selectedThumbnail: 'desktop-share',
-            url
-        };
-
-        /**
-         * For electron createLocalTrack will open the {@code DesktopPicker} dialog and hide the
-         * {@code VirtualBackgroundDialog}. That's why we need to reopen the {@code VirtualBackgroundDialog}
-         * and force it to show desktop share virtual background through {@code initialOptions} prop.
-         */
-        if (browser.isElectron()) {
-            dispatch(openDialog(VirtualBackgroundDialog, { initialOptions: newOptions }));
-        } else {
-            setOptions(newOptions);
-            logger.info('"Desktop-share" option set for virtual background preview!');
-        }
-    }, [ dispatch, options ]);
-
-    const shareDesktopKeyPress = useCallback(e => {
-        if (e.key === ' ' || e.key === 'Enter') {
-            e.preventDefault();
-            shareDesktop();
-        }
-    }, [ shareDesktop ]);
-
     const removeBackground = useCallback(async () => {
         setOptions({
             enabled: false,
@@ -508,23 +427,15 @@ function VirtualBackground({
     }, [ setUploadedImageBackground ]);
 
     const applyVirtualBackground = useCallback(async () => {
-        if (activeDesktopVideo) {
-            await activeDesktopVideo.dispose();
-        }
         setLoading(true);
         await dispatch(toggleBackgroundEffect(options, _jitsiTrack));
         await setLoading(false);
-        if (_localFlipX && options.backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE) {
-            dispatch(updateSettings({
-                localFlipX: !_localFlipX
-            }));
-        } else {
 
         // Set x scale to default value.
         dispatch(updateSettings({
             localFlipX: true
         }));
-        }
+
         dispatch(hideDialog());
         logger.info(`Virtual background type: '${typeof options.backgroundType === 'undefined'
             ? 'none' : options.backgroundType}' applied!`);
@@ -626,27 +537,6 @@ function VirtualBackground({
                                 {t('virtualBackground.blur')}
                             </div>
                         </Tooltip>
-                        {!disableScreensharingVirtualBackground && (
-                            <Tooltip
-                                content = { t('virtualBackground.desktopShare') }
-                                position = { 'top' }>
-                                <div
-                                    aria-checked = { _selectedThumbnail === 'desktop-share' }
-                                    aria-label = { t('virtualBackground.desktopShare') }
-                                    className = { cx('background-option', 'desktop-share', {
-                                        'desktop-share-selected': _selectedThumbnail === 'desktop-share'
-                                    }) }
-                                    onClick = { shareDesktop }
-                                    onKeyPress = { shareDesktopKeyPress }
-                                    role = 'radio'
-                                    tabIndex = { 0 }>
-                                    <Icon
-                                        className = 'share-desktop-icon'
-                                        size = { 30 }
-                                        src = { IconShareDesktop } />
-                                </div>
-                            </Tooltip>
-                        )}
                         {_images.map(image => (
                             <Tooltip
                                 content = { image.tooltip && t(`virtualBackground.${image.tooltip}`) }

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

@@ -12,7 +12,6 @@ import { hideDialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
 // @ts-ignore
 import Video from '../../base/media/components/Video';
-import { VIDEO_TYPE } from '../../base/media/constants';
 import { connect, equals } from '../../base/redux/functions';
 // @ts-ignore
 import { getCurrentCameraDeviceId } from '../../base/settings';
@@ -23,9 +22,6 @@ import { showWarningNotification } from '../../notifications/actions';
 import { NOTIFICATION_TIMEOUT_TYPE } from '../../notifications/constants';
 // @ts-ignore
 import { toggleBackgroundEffect } from '../actions';
-import { VIRTUAL_BACKGROUND_TYPE } from '../constants';
-// @ts-ignore
-import { localTrackStopped } from '../functions';
 // @ts-ignore
 import logger from '../logger';
 
@@ -208,11 +204,6 @@ class VirtualBackgroundPreview extends PureComponent<Props, State> {
 
             return;
         }
-
-        if (this.props.options.backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE
-                && this.state.localTrackLoaded) {
-            this._applyBackgroundEffect();
-        }
     }
 
     /**
@@ -310,14 +301,8 @@ class VirtualBackgroundPreview extends PureComponent<Props, State> {
             this._setTracks();
         }
         if (!equals(this.props.options, prevProps.options) && this.state.localTrackLoaded) {
-            if (prevProps.options.backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE) {
-                prevProps.options.url.dispose();
-            }
             this._applyBackgroundEffect();
         }
-        if (this.props.options.url?.videoType === VIDEO_TYPE.DESKTOP) {
-            localTrackStopped(this.props.dispatch, this.props.options.url, this.state.jitsiTrack);
-        }
     }
 
     /**

react/features/virtual-background/constants.ts

@@ -5,7 +5,6 @@
  */
 export const VIRTUAL_BACKGROUND_TYPE = {
     IMAGE: 'image',
-    DESKTOP_SHARE: 'desktop-share',
     BLUR: 'blur',
     NONE: 'none'
 };

react/features/virtual-background/functions.ts

@@ -1,7 +1,3 @@
-import { JitsiTrackEvents } from '../base/lib-jitsi-meet';
-import { updateSettings } from '../base/settings/actions';
-
-import { toggleBackgroundEffect } from './actions';
 let filterSupport: boolean | undefined;
 
 /**
@@ -89,33 +85,6 @@ export function resizeImage(base64image: any, width = 1920, height = 1080): Prom
     });
 }
 
-/**
- * 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: any, currentLocalTrack: Object | null) {
-    const noneOptions = {
-        enabled: false,
-        backgroundType: 'none',
-        selectedThumbnail: 'none',
-        backgroundEffectEnabled: false
-    };
-
-    desktopTrack?.on(JitsiTrackEvents.LOCAL_TRACK_STOPPED, () => {
-        dispatch(toggleBackgroundEffect(noneOptions, currentLocalTrack));
-
-        // Set x scale to default value.
-        dispatch(updateSettings({
-            localFlipX: true
-        }));
-    });
-}
-
 /**
  * Creating a wrapper for promises on a specific time interval.
  *

react/features/virtual-background/middleware.ts

@@ -1,26 +0,0 @@
-import { VIDEO_TYPE } from '../base/media/constants';
-import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
-import { getLocalVideoTrack } from '../base/tracks/functions';
-
-import { SET_VIRTUAL_BACKGROUND } from './actionTypes';
-import { localTrackStopped } from './functions';
-
-/**
- * Middleware which intercepts the desktop video type on
- * virtual background. If the user stops the screen share
- * then the default virtual background is set to 'none' option.
- *
- * @param {Store} store - The redux store.
- * @returns {Function}
- */
-MiddlewareRegistry.register(store => next => action => {
-    const { dispatch, getState } = store;
-    const virtualSource = getState()['features/virtual-background'].virtualSource;
-    const currentLocalTrack = getLocalVideoTrack(getState()['features/base/tracks']);
-
-    if (virtualSource?.videoType === VIDEO_TYPE.DESKTOP && action.type === SET_VIRTUAL_BACKGROUND) {
-        localTrackStopped(dispatch, virtualSource, currentLocalTrack?.jitsiTrack);
-    }
-
-    return next(action);
-});

react/features/virtual-background/reducer.ts

@@ -2,7 +2,6 @@ import PersistenceRegistry from '../base/redux/PersistenceRegistry';
 import ReducerRegistry from '../base/redux/ReducerRegistry';
 
 import { BACKGROUND_ENABLED, SET_VIRTUAL_BACKGROUND } from './actionTypes';
-import { VIRTUAL_BACKGROUND_TYPE } from './constants';
 
 const STORE_NAME = 'features/virtual-background';
 
@@ -31,7 +30,7 @@ ReducerRegistry.register<IVirtualBackground>(STORE_NAME, (state = {}, action): I
     /**
      * Sets up the persistence of the feature {@code virtual-background}.
      */
-    PersistenceRegistry.register(STORE_NAME, state.backgroundType !== VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE);
+    PersistenceRegistry.register(STORE_NAME);
 
     switch (action.type) {
     case SET_VIRTUAL_BACKGROUND: {