[mirotalksfu] - #194 Add support for drag & drop virtual background images

public/js/Brand.js

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

public/js/Room.js

@@ -4993,9 +4993,8 @@ function showImageSelector() {
         setTippy(imgButton.id, tooltip, 'top');
     }
 
-    function handleFileUpload(event) {
-        const file = event.target.files[0];
-        if (file) {
+    function handleFileUpload(file) {
+        if (file && file.type.startsWith('image/')) {
             const reader = new FileReader();
             reader.onload = async (e) => {
                 const imgData = e.target.result;
@@ -5011,7 +5010,9 @@ function showImageSelector() {
         fileInput.type = 'file';
         fileInput.accept = 'image/*';
         fileInput.style.display = 'none';
-        fileInput.addEventListener('change', handleFileUpload);
+        fileInput.addEventListener('change', (event) => {
+            handleFileUpload(event.target.files[0]);
+        });
 
         setupFileUploadButton('initUploadImg', image.upload, 'Upload your custom image', () => fileInput.click());
 
@@ -5096,6 +5097,24 @@ function showImageSelector() {
 
     // Load stored images and add to image grid UI
     indexedDBHelper.getAllImages().then((images) => images.forEach(addImageToUI));
+
+    // Upload image with drag and drop
+    imageGrid.addEventListener('dragover', (event) => {
+        event.preventDefault();
+        imageGrid.classList.add('drag-over');
+    });
+
+    imageGrid.addEventListener('dragleave', () => {
+        imageGrid.classList.remove('drag-over');
+    });
+
+    imageGrid.addEventListener('drop', (event) => {
+        event.preventDefault();
+        imageGrid.classList.remove('drag-over');
+        if (event.dataTransfer.files.length > 0) {
+            handleFileUpload(event.dataTransfer.files[0]);
+        }
+    });
 }
 
 // ####################################################
@@ -5111,7 +5130,10 @@ async function applyVirtualBackground(videoElement, stream, blurLevel, backgroun
         virtualBackgroundBlurLevel = blurLevel;
         virtualBackgroundSelectedImage = null;
     } else if (backgroundImage) {
-        videoElement.srcObject = await virtualBackground.applyVirtualBackgroundToWebRTCStream(videoTrack, backgroundImage);
+        videoElement.srcObject = await virtualBackground.applyVirtualBackgroundToWebRTCStream(
+            videoTrack,
+            backgroundImage,
+        );
         virtualBackgroundSelectedImage = backgroundImage;
         virtualBackgroundBlurLevel = null;
     } else {

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.44
+ * @version 1.7.45
  *
  */
 
@@ -1493,7 +1493,10 @@ class RoomClient {
 
                     if (virtualBackgroundBlurLevel) {
                         // Apply blur before sending it to WebRTC stream
-                        stream = await virtualBackground.applyBlurToWebRTCStream(videoTrack, virtualBackgroundBlurLevel);
+                        stream = await virtualBackground.applyBlurToWebRTCStream(
+                            videoTrack,
+                            virtualBackgroundBlurLevel,
+                        );
                     }
 
                     if (virtualBackgroundSelectedImage) {
@@ -1720,9 +1723,8 @@ class RoomClient {
             setTippy(imgButton.id, tooltip, 'top');
         }
 
-        function handleFileUpload(event) {
-            const file = event.target.files[0];
-            if (file) {
+        function handleFileUpload(file) {
+            if (file && file.type.startsWith('image/')) {
                 const reader = new FileReader();
                 reader.onload = async (e) => {
                     const imgData = e.target.result;
@@ -1738,7 +1740,9 @@ class RoomClient {
             fileInput.type = 'file';
             fileInput.accept = 'image/*';
             fileInput.style.display = 'none';
-            fileInput.addEventListener('change', handleFileUpload);
+            fileInput.addEventListener('change', (event) => {
+                handleFileUpload(event.target.files[0]);
+            });
 
             setupFileUploadButton('uploadImg', image.upload, 'Upload your custom image', () => fileInput.click());
 
@@ -1823,6 +1827,24 @@ class RoomClient {
 
         // Load stored images and add to image grid UI
         indexedDBHelper.getAllImages().then((images) => images.forEach(addImageToUI));
+
+        // Upload image with drag and drop
+        imageGridVideo.addEventListener('dragover', (event) => {
+            event.preventDefault();
+            imageGridVideo.classList.add('drag-over');
+        });
+
+        imageGridVideo.addEventListener('dragleave', () => {
+            imageGridVideo.classList.remove('drag-over');
+        });
+
+        imageGridVideo.addEventListener('drop', (event) => {
+            event.preventDefault();
+            imageGridVideo.classList.remove('drag-over');
+            if (event.dataTransfer.files.length > 0) {
+                handleFileUpload(event.dataTransfer.files[0]);
+            }
+        });
     }
 
     // ####################################################