support for storing multiple virtual backgrounds

bigbluebutton-html5/imports/ui/components/video-preview/component.jsx

@@ -368,6 +368,7 @@ class VideoPreview extends Component {
     setSessionVirtualBackgroundInfo(
       this.currentVideoStream.virtualBgType,
       this.currentVideoStream.virtualBgName,
+      webcamDeviceId,
     );
     this.cleanupStreamAndVideo();
     startSharing(webcamDeviceId);
@@ -638,11 +639,11 @@ class VideoPreview extends Component {
   }
 
   renderVirtualBgSelector() {
-    const { isStartSharingDisabled } = this.state;
+    const { isStartSharingDisabled, webcamDeviceId } = this.state;
     const initialVirtualBgState = this.currentVideoStream ? {
       type: this.currentVideoStream.virtualBgType,
       name: this.currentVideoStream.virtualBgName
-    } : getSessionVirtualBackgroundInfo();
+    } : getSessionVirtualBackgroundInfo(webcamDeviceId);
 
     return (
       <VirtualBgSelector

bigbluebutton-html5/imports/ui/components/video-provider/component.jsx

@@ -18,6 +18,7 @@ import {
   EFFECT_TYPES,
   getSessionVirtualBackgroundInfo,
 } from '/imports/ui/services/virtual-background/service';
+import { notify } from '/imports/ui/services/notification';
 
 // Default values and default empty object to be backwards compat with 2.2.
 // FIXME Remove hardcoded defaults 2.3.
@@ -892,14 +893,44 @@ class VideoProvider extends Component {
       peer.attached = true;
 
       if (isLocal) {
-        const { type, name } = getSessionVirtualBackgroundInfo();
-        if (type !== EFFECT_TYPES.NONE_TYPE) {
-          peer.bbbVideoStream.startVirtualBackground(type, name);
-        }
+        const deviceId = MediaStreamUtils.extractVideoDeviceId(peer.bbbVideoStream.mediaStream);
+        const { type, name } = getSessionVirtualBackgroundInfo(deviceId);
+
+        this.restoreVirtualBackground(peer.bbbVideoStream, type, name).catch((error) => {
+          this.handleVirtualBgError(error, type, name);
+        });
       }
     }
   }
 
+  restoreVirtualBackground(stream, type, name) {
+    return new Promise((resolve, reject) => {
+      if (type !== EFFECT_TYPES.NONE_TYPE) {
+        stream.startVirtualBackground(type, name).then(() => {
+          resolve();
+        }).catch((error) => {
+          reject(error);
+        });
+      }
+      resolve();
+    });
+  }
+
+  handleVirtualBgError(error, type, name) {
+    const { intl } = this.props;
+    logger.error({
+      logCode: `video_provider_virtualbg_error`,
+      extraInfo: {
+        errorName: error.name,
+        errorMessage: error.message,
+        virtualBgType: type,
+        virtualBgName: name,
+      },
+    }, `Failed to restore virtual background after reentering the room: ${error.message}`);
+
+    notify(intl.formatMessage(intlMessages.virtualBgGenericError), 'error', 'video');
+  }
+
   createVideoTag(stream, video) {
     const peer = this.webRtcPeers[stream];
     this.videoTags[stream] = video;

bigbluebutton-html5/imports/ui/services/virtual-background/service.js

@@ -66,18 +66,18 @@ const getVirtualBackgroundThumbnail = (name) => {
 //   type: <EFFECT_TYPES>,
 //   name: effect filename, if any
 // }
-const setSessionVirtualBackgroundInfo = (type, name) => {
-  return Session.set('VirtualBackgroundInfo', { type, name });
+const setSessionVirtualBackgroundInfo = (type, name, deviceId) => {
+  return Session.set(`VirtualBackgroundInfo_${deviceId}`, { type, name });
 }
 
-const getSessionVirtualBackgroundInfo = () => {
-  return Session.get('VirtualBackgroundInfo') || {
+const getSessionVirtualBackgroundInfo = (deviceId) => {
+  return Session.get(`VirtualBackgroundInfo_${deviceId}`) || {
     type: EFFECT_TYPES.NONE_TYPE,
   };
 }
 
-const getSessionVirtualBackgroundInfoWithDefault = () => {
-  return Session.get('VirtualBackgroundInfo') || {
+const getSessionVirtualBackgroundInfoWithDefault = (deviceId) => {
+  return Session.get(`VirtualBackgroundInfo_${deviceId}`) || {
     type: EFFECT_TYPES.BLUR_TYPE,
     name: BLUR_FILENAME,
   };