[mirotalksfu] - add extra info

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.77
+ * @version 1.4.78
  *
  */
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.4.77",
+    "version": "1.4.78",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {

public/css/Room.css

@@ -341,6 +341,10 @@ body {
     transition: all 0.3s ease-in-out;
 }
 
+#extraInfo {
+    max-height: 400px;
+}
+
 /*--------------------------------------------------------------
 # Settings Table
 --------------------------------------------------------------*/

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.77
+ * @version 1.4.78
  *
  */
 
@@ -63,6 +63,7 @@ const bars = document.querySelectorAll('.volume-bar');
 const userAgent = navigator.userAgent.toLowerCase();
 const isTabletDevice = isTablet(userAgent);
 const isIPadDevice = isIpad(userAgent);
+const thisInfo = getInfo();
 
 const Base64Prefix = 'data:application/pdf;base64,';
 
@@ -844,6 +845,44 @@ function getPeerInfo() {
     };
 }
 
+function getInfo() {
+    const parser = new UAParser(userAgent);
+
+    try {
+        const parserResult = parser.getResult();
+        console.log('Info', parserResult);
+
+        // Filter out properties with 'Unknown' values
+        const filterUnknown = (obj) => {
+            const filtered = {};
+            for (const [key, value] of Object.entries(obj)) {
+                if (value && value !== 'Unknown') {
+                    filtered[key] = value;
+                }
+            }
+            return filtered;
+        };
+
+        const filteredResult = {
+            //ua: parserResult.ua,
+            browser: filterUnknown(parserResult.browser),
+            cpu: filterUnknown(parserResult.cpu),
+            device: filterUnknown(parserResult.device),
+            engine: filterUnknown(parserResult.engine),
+            os: filterUnknown(parserResult.os),
+        };
+
+        // Convert the filtered result to a readable JSON string
+        const resultString = JSON.stringify(filteredResult, null, 2);
+
+        extraInfo.innerText = resultString;
+
+        return parserResult;
+    } catch (error) {
+        console.error('Error parsing user agent:', error);
+    }
+}
+
 // ####################################################
 // ENTER YOUR NAME | Enable/Disable AUDIO/VIDEO
 // ####################################################
@@ -4032,7 +4071,7 @@ function showAbout() {
         imageUrl: image.about,
         customClass: { image: 'img-about' },
         position: 'center',
-        title: 'WebRTC SFU v1.4.77',
+        title: 'WebRTC SFU v1.4.78',
         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.77
+ * @version 1.4.78
  *
  */
 

public/views/Room.html

@@ -90,6 +90,10 @@
 
         <script async src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
+        <!-- UAParser -->
+
+        <script defer src="https://cdn.jsdelivr.net/npm/ua-parser-js@latest/dist/ua-parser.min.js"></script>
+
         <script async src="../js/Umami.js"></script>
         <script async src="../js/Translate.js"></script>
 
@@ -1020,6 +1024,19 @@ access to use this app.
                                     </div>
                                 </td>
                             </tr>
+                            <tr>
+                                <td>
+                                    <div class="title">
+                                        <i class="fa-solid fa-circle-info"></i>
+                                        <p>Extra info:</p>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <pre id="extraInfo"></pre>
+                                </td>
+                            </tr>
                         </table>
                     </div>