[mirotalksfu] - #173 Fix YT iframe for Mobile Safari, update dep

app/src/Server.js

@@ -55,7 +55,7 @@ dev dependencies: {
  * @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.6.14
+ * @version 1.6.15
  *
  */
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.6.14",
+    "version": "1.6.15",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
@@ -78,7 +78,7 @@
         "mediasoup-client": "3.7.17",
         "ngrok": "^5.0.0-beta.2",
         "nodemailer": "^6.9.16",
-        "openai": "^4.69.0",
+        "openai": "^4.70.2",
         "qs": "6.13.0",
         "socket.io": "4.8.1",
         "swagger-ui-express": "5.0.1",

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.6.14
+ * @version 1.6.15
  *
  */
 
@@ -4555,7 +4555,7 @@ function showAbout() {
         imageUrl: image.about,
         customClass: { image: 'img-about' },
         position: 'center',
-        title: 'WebRTC SFU v1.6.14',
+        title: 'WebRTC SFU v1.6.15',
         html: `
         <br />
         <div id="about">

public/js/RoomClient.js

@@ -255,6 +255,8 @@ class RoomClient {
         this.device = null;
 
         this.isMobileDevice = DetectRTC.isMobileDevice;
+        this.isMobileSafari = this.isMobileDevice && DetectRTC.browser.name === 'Safari';
+
         this.isScreenShareSupported =
             navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia ? true : false;
 
@@ -6063,7 +6065,7 @@ class RoomClient {
     openVideo(data) {
         let d, vb, e, video, pn;
         let peer_name = data.peer_name;
-        let video_url = data.video_url;
+        let video_url = data.video_url + (this.isMobileSafari ? '&enablejsapi=1&mute=1' : ''); // Safari need user interaction
         let is_youtube = data.is_youtube;
         let video_type = this.getVideoType(video_url);
         this.closeVideo();
@@ -6085,6 +6087,34 @@ class RoomClient {
             );
             video.setAttribute('frameborder', '0');
             video.setAttribute('allowfullscreen', true);
+
+            // Safari on Mobile needs user interaction to unmute video
+            if (this.isMobileSafari) {
+                Swal.fire({
+                    allowOutsideClick: false,
+                    allowEscapeKey: false,
+                    background: swalBackground,
+                    position: 'top',
+                    // icon: 'info',
+                    imageUrl: image.videoShare,
+                    title: 'Unmute Video',
+                    text: 'Tap the button below to unmute and play the video with sound.',
+                    confirmButtonText: 'Unmute',
+                    didOpen: () => {
+                        // Focus on the button when the popup opens
+                        const unmuteButton = Swal.getConfirmButton();
+                        if (unmuteButton) unmuteButton.focus();
+                    },
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        if (video && video.contentWindow) {
+                            // Unmute the video and play
+                            video.contentWindow.postMessage('{"event":"command","func":"unMute","args":""}', '*');
+                            video.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
+                        }
+                    }
+                });
+            }
         } else {
             video = document.createElement('video');
             video.type = video_type;