haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Its no longer supported in multi-stream mode.
This commit is contained in:
Jaya Allamsetty 2022-10-07 16:51:43 -04:00
parent 2029db5a59
commit 3f78de2d34
9 changed files with 10 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
react/features/app/middlewares.web.js
View File

@ -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';

31
react/features/stream-effects/virtual-background/JitsiStreamBackgroundEffect.js
View File

@ -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,

21
react/features/toolbox/components/web/Toolbox.tsx
View File

@ -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<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));
}

116
react/features/virtual-background/components/VirtualBackgroundDialog.tsx
View File

@ -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<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}`) }

15
react/features/virtual-background/components/VirtualBackgroundPreview.tsx
View File

@ -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);
}
}
/**

1
react/features/virtual-background/constants.ts
View File

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

31
react/features/virtual-background/functions.ts
View File

@ -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.
*

26
react/features/virtual-background/middleware.ts
View File

@ -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);
});

3
react/features/virtual-background/reducer.ts
View File

@ -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: {