From 5636a7c4a6ae65537140e51dd3d2ebcc810e340a Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Sat, 2 Nov 2024 11:11:49 +0100 Subject: [PATCH] [mirotalksfu] - #173 Fix YT iframe for Mobile Safari, update dep --- app/src/Server.js | 2 +- package.json | 4 ++-- public/js/Room.js | 4 ++-- public/js/RoomClient.js | 32 +++++++++++++++++++++++++++++++- 4 files changed, 36 insertions(+), 6 deletions(-) diff --git a/app/src/Server.js b/app/src/Server.js index 0f3bdd8f..0908a98b 100644 --- a/app/src/Server.js +++ b/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 * */ diff --git a/package.json b/package.json index 8b10596a..47eb67f6 100644 --- a/package.json +++ b/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", diff --git a/public/js/Room.js b/public/js/Room.js index c3bc76cd..5875813f 100644 --- a/public/js/Room.js +++ b/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: `
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index 51bb0508..b62cb367 100644 --- a/public/js/RoomClient.js +++ b/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;