[mirotalksfu] - #194 Save virtual background settings for future sessions

public/js/Brand.js

@@ -64,7 +64,7 @@ let BRAND = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: '<strong>WebRTC SFU v1.7.39</strong>',
+        title: '<strong>WebRTC SFU v1.7.40</strong>',
         html: `
             <button 
                 id="support-button" 

public/js/Room.js

@@ -193,8 +193,8 @@ const initSpeakerSelect = getId('initSpeakerSelect');
 // DYNAMIC SETTINGS
 // ####################################################
 
-let virtualBackgroundSelectedImage;
 let virtualBackgroundBlurLevel;
+let virtualBackgroundSelectedImage;
 let imageCounter = 0; // Virtual Background upload custom images
 
 let swalBackground = 'radial-gradient(#393939, #000000)'; //'rgba(0, 0, 0, 0.7)';
@@ -2317,13 +2317,7 @@ async function changeCamera(deviceId) {
             );
             checkInitConfig();
             handleCameraMirror(initVideo);
-
-            await applyVirtualBackground(
-                initVideo,
-                initStream,
-                virtualBackgroundBlurLevel,
-                virtualBackgroundSelectedImage,
-            );
+            await loadVirtualBackgroundSettings();
         })
         .catch((error) => {
             console.error('[Error] changeCamera', error);
@@ -4973,6 +4967,7 @@ function showImageSelector() {
         virtualBackgroundBlurLevel = null;
         virtualBackgroundSelectedImage = null;
         initVideoSelect.onchange();
+        saveVirtualBackgroundSettings(virtualBackgroundBlurLevel, virtualBackgroundSelectedImage);
     });
     imageGrid.appendChild(cleanVbImg);
     setTippy(cleanVbImg.id, 'Remove virtual background', 'top');
@@ -5085,7 +5080,7 @@ function showImageSelector() {
         customImg.src = imgData;
         customImg.alt = 'Custom Background';
         customImg.addEventListener('click', async function () {
-            await applyVirtualBackground(initVideo, initStream, false, imgData);
+            await applyVirtualBackground(initVideo, initStream, null, imgData);
         });
 
         // Create delete button
@@ -5203,7 +5198,7 @@ function showImageSelector() {
         img.dataset.index = index + 1;
         img.addEventListener('click', async function () {
             console.log('Selected Image Index:', this.dataset.index);
-            await applyVirtualBackground(initVideo, initStream, false, imageUrl);
+            await applyVirtualBackground(initVideo, initStream, null, imageUrl);
         });
         imageGrid.appendChild(img);
     });
@@ -5229,6 +5224,34 @@ async function applyVirtualBackground(videoElement, stream, blurLevel, backgroun
         virtualBackgroundBlurLevel = null;
         virtualBackgroundSelectedImage = null;
     }
+
+    saveVirtualBackgroundSettings(blurLevel, backgroundImage);
+}
+
+// ####################################################
+// VIRTUAL BACKGROUND LOCAL STORAGE SETTINGS
+// ####################################################
+
+function saveVirtualBackgroundSettings(blurLevel, imageUrl) {
+    const settings = {
+        blurLevel: blurLevel || null,
+        imageUrl: imageUrl || null,
+    };
+    localStorage.setItem('virtualBackgroundSettings', JSON.stringify(settings));
+}
+
+async function loadVirtualBackgroundSettings() {
+    const savedSettings = localStorage.getItem('virtualBackgroundSettings');
+    if (savedSettings) {
+        const { blurLevel, imageUrl } = JSON.parse(savedSettings);
+        if (blurLevel) {
+            console.log('-------> Apply Blur');
+            await applyVirtualBackground(initVideo, initStream, blurLevel);
+        } else if (imageUrl) {
+            console.log('-------> Apply Virtual background');
+            await applyVirtualBackground(initVideo, initStream, null, imageUrl);
+        }
+    }
 }
 
 // ####################################################

public/js/RoomClient.js

@@ -9,7 +9,7 @@
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.7.39
+ * @version 1.7.40
  *
  */
 
@@ -1697,6 +1697,7 @@ class RoomClient {
             virtualBackgroundBlurLevel = null;
             virtualBackgroundSelectedImage = null;
             videoSelect.onchange();
+            saveVirtualBackgroundSettings(virtualBackgroundBlurLevel, virtualBackgroundSelectedImage);
         });
         imageGridVideo.appendChild(cleanVbImg);
         setTippy(cleanVbImg.id, 'Remove virtual background', 'top');
@@ -1949,6 +1950,8 @@ class RoomClient {
             virtualBackgroundBlurLevel = null;
         }
         videoSelect.onchange();
+
+        saveVirtualBackgroundSettings(blurLevel, backgroundImage);
     }
 
     // ####################################################