Load image in from the URL

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

@@ -1,3 +1,5 @@
+import Auth from '/imports/ui/services/auth';
+import Users from '/imports/api/users';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import {
@@ -15,6 +17,7 @@ import MediaStreamUtils from '/imports/utils/media-stream-utils';
 import { notify } from '/imports/ui/services/notification';
 import {
   EFFECT_TYPES,
+  FALLBACK_IMAGE,
   SHOW_THUMBNAILS,
   setSessionVirtualBackgroundInfo,
   getSessionVirtualBackgroundInfo,
@@ -325,6 +328,21 @@ class VideoPreview extends Component {
                 viewState: VIEW_STATES.found,
               });
               this.displayPreview();
+
+              // Set the custom or default virtual background
+              const webcamBackground = Users.findOne({
+                meetingId: Auth.meetingID,
+                userId: Auth.userID,
+              }, {
+                fields: {
+                  webcamBackground: 1,
+                },
+              });
+              
+              const webcamBackgroundURL = webcamBackground?.webcamBackground;
+              if (webcamBackgroundURL !== '') {
+                this.handleVirtualBgSelected(EFFECT_TYPES.IMAGE_TYPE, FALLBACK_IMAGE, { url: webcamBackgroundURL });
+              }
             });
         } else {
           // There were no webcams coming from enumerateDevices. Throw an error.
@@ -428,7 +446,6 @@ class VideoPreview extends Component {
 
   // Resolves into true if the background switch is successful, false otherwise
   handleVirtualBgSelected(type, name, customParams) {
-    const { sharedDevices } = this.props;
     const { webcamDeviceId } = this.state;
     const shared = this.isAlreadyShared(webcamDeviceId);
 

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

@@ -219,6 +219,9 @@ const VirtualBgSelector = ({
   const handleCustomBgChange = (event) => {
     const file = event.target.files[0];
 
+    console.log("handle custom bg change banana")
+    console.log(file);
+
     const onSuccess = (background) => {
       dispatch({
         type: 'new',

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

@@ -15,7 +15,6 @@ import {
   getVirtualBgImagePath,
 } from '/imports/ui/services/virtual-background/service'
 import logger from '/imports/startup/client/logger';
-
 import { simd } from 'wasm-feature-detect/dist/cjs/index';
 
 const blurValue = '25px';
@@ -387,10 +386,38 @@ export async function createVirtualBackgroundService(parameters = null) {
         parameters.backgroundType = 'blur';
         parameters.isVirtualBackground = false;
     } else {
+        parameters.virtualSource = virtualBackgroundImagePath + parameters.backgroundFilename;
+
         if (parameters.customParams) {
-            parameters.virtualSource = parameters.customParams.file;
+            if (parameters.customParams.file) {
-        } else {
+                parameters.virtualSource = parameters.customParams.file;
-            parameters.virtualSource = virtualBackgroundImagePath + parameters.backgroundFilename;
+            } else {
+                const imageUrl = parameters.customParams.url;
+
+                // Function to convert image URL to a File object
+                async function getFileFromUrl(url) {
+                    try {
+                        const response = await fetch(url);
+                        if (!response.ok) {
+                            throw new Error(`HTTP error! status: ${response.status}`);
+                        }
+                        const blob = await response.blob();
+                        const file = new File([blob], 'fetchedWebcamBackground', { type: blob.type });
+                        return file;
+                    } catch (error) {
+                        logger.error('Fetch error:', error);
+                        return null;
+                    }
+                }
+
+                let fetchedWebcamBackground = await getFileFromUrl(imageUrl);
+
+                if (fetchedWebcamBackground) {
+                    parameters.virtualSource = URL.createObjectURL(fetchedWebcamBackground);
+                } else {
+                    logger.error('Failed to fetch image. Using fallback image.');
+                }
+            }
         }
     }
 

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

@@ -8,6 +8,7 @@ const EFFECT_TYPES = {
   IMAGE_TYPE: 'image',
   NONE_TYPE: 'none',
 }
+const FALLBACK_IMAGE = 'green_screen.jpg';
 
 // TODO I'm sure this is centralized somewhere; fetch it from "there" if possible
 const BASE_PATH = Meteor.settings.public.app.cdn
@@ -33,7 +34,7 @@ const MODELS = {
 
 const {
   thumbnailsPath: THUMBNAILS_PATH = '/resources/images/virtual-backgrounds/thumbnails/',
-  fileNames: IMAGE_NAMES = ['home.jpg', 'coffeeshop.jpg', 'board.jpg'],
+  fileNames: IMAGE_NAMES = ['home.jpg', 'coffeeshop.jpg', 'board.jpg', 'green_screen.jpg'],
   storedOnBBB: IS_STORED_ON_BBB = true,
   imagesPath: IMAGES_PATH = '/resources/images/virtual-backgrounds/',
   showThumbnails: SHOW_THUMBNAILS = true,
@@ -101,6 +102,7 @@ export {
   IMAGES_PATH,
   BLUR_FILENAME,
   EFFECT_TYPES,
+  FALLBACK_IMAGE,
   setSessionVirtualBackgroundInfo,
   getSessionVirtualBackgroundInfo,
   getSessionVirtualBackgroundInfoWithDefault,

bigbluebutton-web/grails-app/conf/bigbluebutton.properties

@@ -323,7 +323,7 @@ defaultAvatarURL=${bigbluebutton.web.serverURL}/html5client/resources/images/ava
 
 # The default webcam background image to display.
 useDefaultWebcamBackground=false
-defaultWebcamBackgroundURL=${bigbluebutton.web.serverURL}/html5client/resources/images/virtual-backgrounds/green_screen.jpg
+defaultWebcamBackgroundURL=${bigbluebutton.web.serverURL}/html5client/resources/images/virtual-backgrounds/board.jpg
 
 apiVersion=2.0