[mirotalksfu] - improvements

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
  *
  */
 

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": {

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: `
         <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.4.73
+ * @version 1.4.74
  *
  */
 

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 {

public/views/RtmpStreamer.html

@@ -49,8 +49,11 @@
 
         <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
-        <!-- JS scripts -->
+        <!-- UAParser -->
 
+        <script defer src="https://cdn.jsdelivr.net/npm/ua-parser-js@latest/dist/ua-parser.min.js"></script>
+
+        <!-- JS scripts -->
         <script defer src="../js/Brand.js"></script>
         <script defer src="../js/RtmpStreamer.js"></script>
     </head>
@@ -82,7 +85,7 @@
                 <button id="copy" title="Click to copy the RTMP URL">Copy</button>
             </div>
 
-            <video id="video" width="640" height="480" autoplay></video>
+            <video id="video" width="640" height="480"></video>
 
             <div class="button-group">
                 <button id="startCamera" title="Click to start camera streaming">Start Camera Streaming</button>

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'

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