From cf8f7528d074114cc5508e4e5a16b94f914781b6 Mon Sep 17 00:00:00 2001 From: Daniel Petri Rocha Date: Fri, 12 Jul 2024 20:06:49 +0000 Subject: [PATCH] Load image in from the URL --- .../ui/components/video-preview/component.jsx | 19 +++++++++- .../virtual-background/component.jsx | 3 ++ .../ui/services/virtual-background/index.js | 35 ++++++++++++++++--- .../ui/services/virtual-background/service.js | 4 ++- .../grails-app/conf/bigbluebutton.properties | 2 +- 5 files changed, 56 insertions(+), 7 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/video-preview/component.jsx b/bigbluebutton-html5/imports/ui/components/video-preview/component.jsx index 71cdac9b6b..3a29583108 100755 --- a/bigbluebutton-html5/imports/ui/components/video-preview/component.jsx +++ b/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); diff --git a/bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/component.jsx b/bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/component.jsx index 9c9176a11c..217778bf45 100644 --- a/bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/component.jsx +++ b/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', diff --git a/bigbluebutton-html5/imports/ui/services/virtual-background/index.js b/bigbluebutton-html5/imports/ui/services/virtual-background/index.js index 5f42d8c5d6..27e85fc866 100644 --- a/bigbluebutton-html5/imports/ui/services/virtual-background/index.js +++ b/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; - } else { - parameters.virtualSource = virtualBackgroundImagePath + parameters.backgroundFilename; + if (parameters.customParams.file) { + parameters.virtualSource = parameters.customParams.file; + } 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.'); + } + } } } diff --git a/bigbluebutton-html5/imports/ui/services/virtual-background/service.js b/bigbluebutton-html5/imports/ui/services/virtual-background/service.js index b220a6cd43..3b3937cc2a 100644 --- a/bigbluebutton-html5/imports/ui/services/virtual-background/service.js +++ b/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, diff --git a/bigbluebutton-web/grails-app/conf/bigbluebutton.properties b/bigbluebutton-web/grails-app/conf/bigbluebutton.properties index 1ec9a86f5f..40161eeba9 100644 --- a/bigbluebutton-web/grails-app/conf/bigbluebutton.properties +++ b/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