[mirotalksfu] - refactoring

README.md

@@ -23,7 +23,7 @@ Powered by `WebRTC` with [SFU](https://mediasoup.org) integrated server.
 
 ## DigitalOcean
 
-This application has been tested and `works perfectly` on [DigitalOcean](https://m.do.co/c/1070207afbb1) `droplet Ubuntu 20.04 (LTS) x64`, with [Ngnix](https://www.nginx.com/) and [Let's encrypt](https://letsencrypt.org/).
+This application has been tested on [DigitalOcean](https://m.do.co/c/1070207afbb1) `droplet Ubuntu 20.04 (LTS) x64`, with [Ngnix](https://www.nginx.com/) and [Let's Encrypt](https://letsencrypt.org/).
 
 [![DigitalOcean Referral Badge](https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%201.svg)](https://www.digitalocean.com/?refcode=1070207afbb1&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)
 

public/Room.html

@@ -64,7 +64,7 @@
         <script src="https://kit.fontawesome.com/d2f1016e6f.js" crossorigin="anonymous"></script>
         <script src="https://cdn.rawgit.com/muaz-khan/DetectRTC/master/DetectRTC.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.2"></script>
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.4"></script>
         <script src="https://unpkg.com/emoji-picker-element@1" type="module"></script>
         <script src="https://unpkg.com/@popperjs/core@2"></script>
         <script src="https://unpkg.com/tippy.js@6"></script>

public/css/Room.css

@@ -539,12 +539,8 @@ button:hover {
     overflow: auto;
 }
 
-#roomParticipants ul {
-    text-align: justify;
-    list-style: inside;
-}
-
 #roomParticipants button {
+    background: transparent;
     color: red;
     border-radius: 5px;
 }
@@ -553,6 +549,25 @@ button:hover {
     border-radius: 5px;
 }
 
+#roomParticipants table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+#roomParticipants td,
+#roomParticipants th {
+    /* border: 1px solid #444444; */
+    color: white;
+    text-align: left;
+    padding: 8px;
+}
+
+/*
+#roomParticipants tr:nth-child(even) {
+    background-color: #000000;
+}
+*/
+
 /*--------------------------------------------------------------
 # Pulse class effect
 --------------------------------------------------------------*/

public/js/Room.js

@@ -183,7 +183,7 @@ function appenChild(device, el) {
 function getPeerInfo() {
     peer_info = {
         detect_rtc_version: DetectRTC.version,
-        is_webrtc_Supported: DetectRTC.isWebRTCSupported,
+        is_webrtc_supported: DetectRTC.isWebRTCSupported,
         is_mobile_device: DetectRTC.isMobileDevice,
         os_name: DetectRTC.osName,
         os_version: DetectRTC.osVersion,
@@ -736,17 +736,20 @@ async function sound(name) {
 async function getRoomParticipants() {
     let room_info = await rc.getRoomInfo();
     let peers = new Map(JSON.parse(room_info.peers));
-    let lists = `<div id="roomParticipants"><ul>`;
+    let table = `<div id="roomParticipants"><table>
-
+    <tr>
+        <th></th>
+        <th></th>
+    </tr>`;
     for (let peer of Array.from(peers.keys())) {
         let peer_info = peers.get(peer).peer_info;
         let peer_name = peer_info.peer_name;
         let peer_id = peer_info.peer_id;
         rc.peer_id === peer_id
-            ? (lists += `<li>👤 ${peer_name} (me)</li>`)
+            ? (table += `<tr><td>👤 ${peer_name} (me)</td><td></td></tr>`)
-            : (lists += `<li id='${peer_id}'>👤 ${peer_name} <button id='${peer_id}' onclick="rc.peerAction('me',this.id,'eject')">eject</button></li>`);
+            : (table += `<tr id='${peer_id}'><td>👤 ${peer_name}</td><td><button id='${peer_id}' onclick="rc.peerAction('me',this.id,'eject')">eject</button></td></tr>`);
     }
-    lists += `</ul></div>`;
+    table += `</table></div>`;
 
     sound('open');
 
@@ -754,7 +757,7 @@ async function getRoomParticipants() {
         background: swalBackground,
         position: 'center',
         title: `Participants ${peers.size}`,
-        html: lists,
+        html: table,
         showClass: {
             popup: 'animate__animated animate__fadeInDown',
         },

public/landing.html

@@ -3,7 +3,7 @@
     <head>
         <!-- Title and Icon -->
 
-        <title>MiroTalk SFU a Free Video Calls and Screen Sharing.</title>
+        <title>MiroTalk SFU - Free Video Calls, Messaging and Screen Sharing.</title>
         <link rel="shortcut icon" href="images/logo.svg" />
         <link rel="apple-touch-icon" href="images/logo.svg" />
 

src/Server.js

@@ -2,20 +2,21 @@
 
 const express = require('express');
 const cors = require('cors');
-const app = express();
 const compression = require('compression');
 const https = require('httpolyglot');
-const fs = require('fs');
 const mediasoup = require('mediasoup');
 const config = require('./config');
 const path = require('path');
 const ngrok = require('ngrok');
+const fs = require('fs');
 const Room = require('./Room');
 const Peer = require('./Peer');
 const ServerApi = require('./ServerApi');
 const Logger = require('./Logger');
 const log = new Logger('Server');
 
+const app = express();
+
 const options = {
     key: fs.readFileSync(path.join(__dirname, config.sslKey), 'utf-8'),
     cert: fs.readFileSync(path.join(__dirname, config.sslCrt), 'utf-8'),
@@ -23,7 +24,7 @@ const options = {
 
 const httpsServer = https.createServer(options, app);
 const io = require('socket.io')(httpsServer);
-const localHost = 'https://' + 'localhost' + ':' + config.listenPort; // config.listenIp
+const host = 'https://' + 'localhost' + ':' + config.listenPort; // config.listenIp
 
 // all mediasoup workers
 let workers = [];
@@ -130,8 +131,8 @@ async function ngrokStart() {
         let pu1 = data.tunnels[1].public_url;
         let tunnel = pu0.startsWith('https') ? pu0 : pu1;
         log.debug('Listening on', {
-            https: localHost,
+            server: host,
-            ngrok: tunnel,
+            tunnel: tunnel,
         });
     } catch (err) {
         console.error('Ngrok Start error: ', err);
@@ -149,7 +150,7 @@ httpsServer.listen(config.listenPort, () => {
         return;
     }
     log.debug('Listening on', {
-        https: localHost,
+        server: host,
     });
 });