feat(external-api): Set blurred background from external api. (#15131)

Add setBlurredBackground command to external api. Co-authored-by: Axel Prola <axel.prola@equasens.com>
jitsi · Sep 20, 2024 · 97930bf · 97930bf
1 parent 7bb2f1e
commit 97930bf
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 0 deletions.
diff --git a/modules/API/API.js b/modules/API/API.js
@@ -32,6 +32,7 @@ import { isSupportedBrowser } from '../../react/features/base/environment/enviro
 import { parseJWTFromURLParams } from '../../react/features/base/jwt/functions';
 import JitsiMeetJS, { JitsiRecordingConstants } from '../../react/features/base/lib-jitsi-meet';
 import { MEDIA_TYPE, VIDEO_TYPE } from '../../react/features/base/media/constants';
+import { isVideoMutedByUser } from '../../react/features/base/media/functions';
 import {
     grantModerator,
     kickParticipant,
@@ -54,6 +55,10 @@ import { updateSettings } from '../../react/features/base/settings/actions';
 import { getDisplayName } from '../../react/features/base/settings/functions.web';
 import { setCameraFacingMode } from '../../react/features/base/tracks/actions.web';
 import { CAMERA_FACING_MODE_MESSAGE } from '../../react/features/base/tracks/constants';
+import {
+    getLocalVideoTrack,
+    isLocalTrackMuted
+} from '../../react/features/base/tracks/functions';
 import {
     autoAssignToBreakoutRooms,
     closeBreakoutRoom,
@@ -116,6 +121,7 @@ import { isAudioMuteButtonDisabled } from '../../react/features/toolbox/function
 import { setTileView, toggleTileView } from '../../react/features/video-layout/actions.any';
 import { muteAllParticipants } from '../../react/features/video-menu/actions';
 import { setVideoQuality } from '../../react/features/video-quality/actions';
+import { toggleBlurredBackgroundEffect } from '../../react/features/virtual-background/actions';
 import { toggleWhiteboard } from '../../react/features/whiteboard/actions.web';
 import { getJitsiMeetTransport } from '../transport';
 
@@ -323,7 +329,15 @@ function initCommands() {
 
             APP.store.dispatch(setAssumedBandwidthBps(value));
         },
+        'set-blurred-background': blurType => {
+            const tracks = APP.store.getState()['features/base/tracks'];
+            const videoTrack = getLocalVideoTrack(tracks)?.jitsiTrack;
+            const muted = tracks ? isLocalTrackMuted(tracks, MEDIA_TYPE.VIDEO) : isVideoMutedByUser(APP.store);
+
+            APP.store.dispatch(toggleBlurredBackgroundEffect(videoTrack, blurType, muted));
+        },
         'set-follow-me': (value, recorderOnly) => {
+
             if (value) {
                 sendAnalytics(createApiEvent('follow.me.set', {
                     recorderOnly

diff --git a/modules/API/external/external_api.js b/modules/API/external/external_api.js
@@ -60,6 +60,7 @@ const commands = {
     sendParticipantToRoom: 'send-participant-to-room',
     sendTones: 'send-tones',
     setAssumedBandwidthBps: 'set-assumed-bandwidth-bps',
+    setBlurredBackground: 'set-blurred-background',
     setFollowMe: 'set-follow-me',
     setLargeVideoParticipant: 'set-large-video-participant',
     setMediaEncryptionKey: 'set-media-encryption-key',

diff --git a/react/features/virtual-background/actions.ts b/react/features/virtual-background/actions.ts
@@ -2,6 +2,7 @@ import { IStore } from '../app/types';
 import { createVirtualBackgroundEffect } from '../stream-effects/virtual-background';
 
 import { BACKGROUND_ENABLED, SET_VIRTUAL_BACKGROUND } from './actionTypes';
+import { VIRTUAL_BACKGROUND_TYPE } from './constants';
 import logger from './logger';
 import { IVirtualBackground } from './reducer';
 
@@ -71,3 +72,34 @@ export function backgroundEnabled(backgroundEffectEnabled?: boolean) {
         backgroundEffectEnabled
     };
 }
+
+/**
+ * Simulates blurred background selection/removal on video background. Used by API only.
+ *
+ * @param {JitsiLocalTrack} videoTrack - The targeted video track.
+ * @param {string} [blurType] - Blur type to apply. Accepted values are 'slight-blur', 'blur' or 'none'.
+ * @param {boolean} muted - Muted state of the video track.
+ * @returns {Promise}
+ */
+export function toggleBlurredBackgroundEffect(videoTrack: any, blurType: 'slight-blur' | 'blur' | 'none',
+        muted: boolean) {
+    return async function(dispatch: IStore['dispatch'], _getState: IStore['getState']) {
+        if (muted || !videoTrack || !blurType) {
+            return;
+        }
+
+        if (blurType === 'none') {
+            dispatch(toggleBackgroundEffect({
+                backgroundEffectEnabled: false,
+                selectedThumbnail: blurType
+            }, videoTrack));
+        } else {
+            dispatch(toggleBackgroundEffect({
+                backgroundEffectEnabled: true,
+                backgroundType: VIRTUAL_BACKGROUND_TYPE.BLUR,
+                blurValue: blurType === 'blur' ? 25 : 8,
+                selectedThumbnail: blurType
+            }, videoTrack));
+        }
+    };
+}