From 47e2c4a5fe9086991fde8b432f6d8001d599beaf Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Mon, 1 Jul 2024 15:28:24 +0200 Subject: [PATCH] [mirotalksfu] - improvements --- app/src/Server.js | 2 +- package.json | 2 +- public/js/Room.js | 4 +-- public/js/RoomClient.js | 2 +- public/js/RtmpStreamer.js | 26 ++++++++++++++++--- public/views/RtmpStreamer.html | 7 +++-- .../docker-compose.template.yml | 2 ++ rtmpServers/node-media-server/src/sign.js | 2 +- 8 files changed, 36 insertions(+), 11 deletions(-) diff --git a/app/src/Server.js b/app/src/Server.js index f7004ecf..75607fbd 100644 --- a/app/src/Server.js +++ b/app/src/Server.js @@ -44,7 +44,7 @@ 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.4.73 + * @version 1.4.74 * */ diff --git a/package.json b/package.json index e0dae3c7..c9feaf05 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mirotalksfu", - "version": "1.4.73", + "version": "1.4.74", "description": "WebRTC SFU browser-based video calls", "main": "Server.js", "scripts": { diff --git a/public/js/Room.js b/public/js/Room.js index 44dc0e16..33a9c6b8 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.4.73 + * @version 1.4.74 * */ @@ -4032,7 +4032,7 @@ function showAbout() { imageUrl: image.about, customClass: { image: 'img-about' }, position: 'center', - title: 'WebRTC SFU v1.4.73', + title: 'WebRTC SFU v1.4.74', html: `
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index 089f8d9c..9ad98d46 100644 --- a/public/js/RoomClient.js +++ b/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.4.73 + * @version 1.4.74 * */ diff --git a/public/js/RtmpStreamer.js b/public/js/RtmpStreamer.js index 8f698e9f..54a6388a 100644 --- a/public/js/RtmpStreamer.js +++ b/public/js/RtmpStreamer.js @@ -45,12 +45,23 @@ function showError(message) { showPopup(message, 'error'); } +function isChromeBased() { + const parser = new UAParser(); + const browser = parser.getBrowser(); + const browserName = browser.name.toLowerCase(); + + // List of known Chrome-based browser names + const chromeBasedBrowsers = ['chrome', 'chromium', 'opera', 'edge', 'brave', 'samsung internet']; + + return chromeBasedBrowsers.includes(browserName); +} + function checkBrowserSupport() { const userAgent = navigator.userAgent.toLowerCase(); console.log('UserAgent', userAgent); - if (userAgent.includes('chrome') && !userAgent.includes('edge') && !userAgent.includes('opr')) { + if (isChromeBased()) { console.log('Browser is Chrome-based. Proceed with functionality.'); } else { toggleButtons(true); @@ -85,7 +96,7 @@ window.onload = function () { async function startCapture(constraints) { try { const stream = await navigator.mediaDevices.getUserMedia(constraints); - videoElement.srcObject = stream; + attachMediaStream(stream); return stream; } catch (err) { console.error('Error accessing media devices.', err); @@ -96,7 +107,7 @@ async function startCapture(constraints) { async function startScreenCapture(constraints) { try { const stream = await navigator.mediaDevices.getDisplayMedia(constraints); - videoElement.srcObject = stream; + attachMediaStream(stream); return stream; } catch (err) { console.error('Error accessing screen media.', err); @@ -104,6 +115,15 @@ async function startScreenCapture(constraints) { } } +function attachMediaStream(stream) { + videoElement.srcObject = stream; + videoElement.playsInline = true; + videoElement.autoplay = true; + videoElement.muted = true; + videoElement.volume = 0; + videoElement.controls = false; +} + async function initRTMP(stream) { const apiSecret = apiSecretInput.value; try { diff --git a/public/views/RtmpStreamer.html b/public/views/RtmpStreamer.html index 7c536918..df17a24b 100644 --- a/public/views/RtmpStreamer.html +++ b/public/views/RtmpStreamer.html @@ -49,8 +49,11 @@ - + + + + @@ -82,7 +85,7 @@

MiroTalk RTMP Streamer

- +
diff --git a/rtmpServers/node-media-server/docker-compose.template.yml b/rtmpServers/node-media-server/docker-compose.template.yml index 39145c8e..67743b6e 100644 --- a/rtmpServers/node-media-server/docker-compose.template.yml +++ b/rtmpServers/node-media-server/docker-compose.template.yml @@ -6,6 +6,8 @@ services: image: mirotalk/nms:latest volumes: - ./src/config.js/:/app/src/config.js/:ro + # - /etc/letsencrypt/live/your-domain-name/fullchain.pem/:/app/src/cert.pem/:ro + # - /etc/letsencrypt/live/your-domain-name/privkey.pem/:/app/src/key.pem/:ro ports: - '1935:1935' - '8081:8081' diff --git a/rtmpServers/node-media-server/src/sign.js b/rtmpServers/node-media-server/src/sign.js index 7e4d0f99..52c9cdaf 100644 --- a/rtmpServers/node-media-server/src/sign.js +++ b/rtmpServers/node-media-server/src/sign.js @@ -37,7 +37,7 @@ function generateRTMPUrl(baseURL, streamPath, secretKey, expirationHours = 8) { return rtmpUrl; } -// Example usage +// Example usage (change it for your server setup) const baseURL = 'rtmp://localhost:1935'; // Rtmp server const streamKey = uuidv4(); // Generate random stream key const streamPath = '/live/' + streamKey; // Path/stream-key