[mirotalksfu] - #194 Handle fetchAndStoreImage errors

public/js/Brand.js

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

public/js/Room.js

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
  * @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.48
+ * @version 1.7.49
  *
  */
 
@@ -5057,6 +5057,10 @@ function showImageSelector() {
             reader.readAsDataURL(blob);
         } catch (error) {
             console.error('Error fetching image:', error);
+            // Detect CORS issue and provide a clearer error message
+            error.message.includes('Failed to fetch')
+                ? showError(initErrorMessage, 'Error: Unable to fetch image. CORS policy may be blocking the request.')
+                : showError(initErrorMessage, `Error fetching image: ${error.message}`);
         }
     }
 
@@ -5227,6 +5231,32 @@ async function loadVirtualBackgroundSettings() {
     }
 }
 
+// ####################################################
+// HANDLE ERRORS
+// ####################################################
+
+function showError(errorElement, message, delay = 5000) {
+    errorElement.innerText = message;
+
+    elemDisplay(errorElement.id, true);
+
+    setTimeout(() => {
+        errorElement.classList.add('fade-in');
+        errorElement.classList.remove('fade-out');
+    }, 100);
+
+    setTimeout(() => {
+        errorElement.classList.remove('fade-in');
+        errorElement.classList.add('fade-out');
+    }, delay);
+
+    setTimeout(() => {
+        if (errorElement.classList.contains('fade-out')) {
+            elemDisplay(errorElement.id, false);
+        }
+    }, delay + 500);
+}
+
 // ####################################################
 // ABOUT
 // ####################################################
@@ -5239,7 +5269,7 @@ function showAbout() {
         position: 'center',
         imageUrl: BRAND.about?.imageUrl && BRAND.about.imageUrl.trim() !== '' ? BRAND.about.imageUrl : image.about,
         customClass: { image: 'img-about' },
-        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.7.48',
+        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.7.49',
         html: `
             <br />
             <div id="about">

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.48
+ * @version 1.7.49
  *
  */
 
@@ -1786,6 +1786,10 @@ class RoomClient {
                 reader.readAsDataURL(blob);
             } catch (error) {
                 console.error('Error fetching image:', error);
+                // Detect CORS issue and provide a clearer error message
+                error.message.includes('Failed to fetch')
+                    ? showError(errorMessage, 'Error: Unable to fetch image. CORS policy may be blocking the request.')
+                    : showError(errorMessage, `Error fetching image: ${error.message}`);
             }
         }