From 3f78de2d34005f7c5191fa43d40e80ea0608afaa Mon Sep 17 00:00:00 2001 From: Jaya Allamsetty <54324652+jallamsetty1@users.noreply.github.com> Date: Fri, 7 Oct 2022 16:51:43 -0400 Subject: [PATCH] fix(virtual-backgroud) Remove desktop share as virtual background. Its no longer supported in multi-stream mode. --- react/features/app/middlewares.web.js | 1 - .../JitsiStreamBackgroundEffect.js | 31 +---- .../toolbox/components/web/Toolbox.tsx | 21 +-- .../components/VirtualBackgroundDialog.tsx | 126 ++---------------- .../components/VirtualBackgroundPreview.tsx | 15 --- .../features/virtual-background/constants.ts | 1 - .../features/virtual-background/functions.ts | 31 ----- .../features/virtual-background/middleware.ts | 26 ---- react/features/virtual-background/reducer.ts | 3 +- 9 files changed, 11 insertions(+), 244 deletions(-) delete mode 100644 react/features/virtual-background/middleware.ts diff --git a/react/features/app/middlewares.web.js b/react/features/app/middlewares.web.js index c3c5b68303..6d46327e87 100644 --- a/react/features/app/middlewares.web.js +++ b/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'; diff --git a/react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js b/react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js index ca1dc89c8e..e18aeeeaa5 100644 --- a/react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js +++ b/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 - || backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE) { + if (backgroundType === VIRTUAL_BACKGROUND_TYPE.IMAGE) { this._outputCanvasCtx.drawImage( backgroundType === VIRTUAL_BACKGROUND_TYPE.IMAGE ? this._virtualImage : this._virtualVideo, diff --git a/react/features/toolbox/components/web/Toolbox.tsx b/react/features/toolbox/components/web/Toolbox.tsx index 078ffc2728..f365340b39 100644 --- a/react/features/toolbox/components/web/Toolbox.tsx +++ b/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 { VIRTUAL_BACKGROUND_TYPE } from '../../../virtual-background/constants'; +import { VideoBackgroundButton } from '../../../virtual-background'; import WhiteboardButton from '../../../whiteboard/components/web/WhiteboardButton'; import { isWhiteboardButtonVisible } from '../../../whiteboard/functions'; import { @@ -665,30 +664,12 @@ class Toolbox extends Component { */ _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)); } diff --git a/react/features/virtual-background/components/VirtualBackgroundDialog.tsx b/react/features/virtual-background/components/VirtualBackgroundDialog.tsx index 42bfaf16f3..f841483558 100644 --- a/react/features/virtual-background/components/VirtualBackgroundDialog.tsx +++ b/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 { JitsiTrackErrors, browser } from '../../base/lib-jitsi-meet'; +import { IconCloseSmall } from '../../base/icons/svg'; // @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>((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 - })); - } + + // 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')} - {!disableScreensharingVirtualBackground && ( - -
- -
- - )} {_images.map(image => ( { return; } - - if (this.props.options.backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE - && this.state.localTrackLoaded) { - this._applyBackgroundEffect(); - } } /** @@ -310,14 +301,8 @@ class VirtualBackgroundPreview extends PureComponent { 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); - } } /** diff --git a/react/features/virtual-background/constants.ts b/react/features/virtual-background/constants.ts index 3470dffc5d..55fe429319 100644 --- a/react/features/virtual-background/constants.ts +++ b/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' }; diff --git a/react/features/virtual-background/functions.ts b/react/features/virtual-background/functions.ts index dff92e1c40..af64d0fc90 100644 --- a/react/features/virtual-background/functions.ts +++ b/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. * diff --git a/react/features/virtual-background/middleware.ts b/react/features/virtual-background/middleware.ts deleted file mode 100644 index 0717180fd5..0000000000 --- a/react/features/virtual-background/middleware.ts +++ /dev/null @@ -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); -}); diff --git a/react/features/virtual-background/reducer.ts b/react/features/virtual-background/reducer.ts index 4e5bd9002e..5a0c886d70 100644 --- a/react/features/virtual-background/reducer.ts +++ b/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(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: {