[mirotalksfu] - add participant lists + eject

public/Room.html

@@ -77,7 +77,7 @@
                     <i class="fas fa-arrow-left"></i>
                 </button>
                 <button id="shareButton" class="hidden">
-                    <i class="fas fa-users"></i>
+                    <i class="fas fa-share-alt"></i>
                 </button>
                 <div class="dropdown">
                     <button id="devicesButton" class="hidden">
@@ -147,6 +147,9 @@
                 <button id="stopScreenButton" class="hidden">
                     <i class="fas fa-stop-circle"></i>
                 </button>
+                <button id="participantsButton" class="hidden">
+                    <i class="fas fa-users"></i>
+                </button>
                 <button id="lockRoomButton" class="hidden">
                     <i class="fas fa-lock-open"></i>
                 </button>

public/css/Room.css

@@ -530,6 +530,29 @@ button:hover {
     color: rgb(0, 180, 50);
 }
 
+/*--------------------------------------------------------------
+# Room Participants
+--------------------------------------------------------------*/
+
+#roomParticipants {
+    max-height: 480px;
+    overflow: auto;
+}
+
+#roomParticipants ul {
+    text-align: justify;
+    list-style: inside;
+}
+
+#roomParticipants button {
+    color: red;
+    border-radius: 5px;
+}
+#roomParticipants button:hover {
+    color: white;
+    border-radius: 5px;
+}
+
 /*--------------------------------------------------------------
 # Pulse class effect
 --------------------------------------------------------------*/

public/js/Room.js

@@ -67,6 +67,7 @@ function initClient() {
         setTippy('stopVideoButton', 'Stop Video', 'bottom');
         setTippy('startScreenButton', 'Start Screen', 'bottom');
         setTippy('stopScreenButton', 'Stop Screen', 'bottom');
+        setTippy('participantsButton', 'Show participants', 'bottom');
         setTippy('lockRoomButton', 'Room Lock', 'bottom');
         setTippy('unlockRoomButton', 'Room Unlock', 'bottom');
         setTippy('aboutButton', 'About', 'bottom');
@@ -114,7 +115,6 @@ async function initEnumerateDevices() {
     if (!isAudioAllowed && !isVideoAllowed) {
         window.location.href = `/permission?room_id=${room_id}&message=Not allowed both Audio and Video`;
     } else {
-        getPeerInfo();
         getPeerGeoLocation();
         whoAreYou();
     }
@@ -182,13 +182,17 @@ function appenChild(device, el) {
 
 function getPeerInfo() {
     peer_info = {
-        detectRTCversion: DetectRTC.version,
-        isWebRTCSupported: DetectRTC.isWebRTCSupported,
-        isMobileDevice: DetectRTC.isMobileDevice,
-        osName: DetectRTC.osName,
-        osVersion: DetectRTC.osVersion,
-        browserName: DetectRTC.browser.name,
-        browserVersion: DetectRTC.browser.version,
+        detect_rtc_version: DetectRTC.version,
+        is_webrtc_Supported: DetectRTC.isWebRTCSupported,
+        is_mobile_device: DetectRTC.isMobileDevice,
+        os_name: DetectRTC.osName,
+        os_version: DetectRTC.osVersion,
+        browser_name: DetectRTC.browser.name,
+        browser_version: DetectRTC.browser.version,
+        peer_id: socket.id,
+        peer_name: peer_name,
+        peer_audio: isAudioOn,
+        peer_video: isVideoOn,
     };
 }
 
@@ -229,6 +233,7 @@ function whoAreYou() {
             peer_name = name;
         },
     }).then(() => {
+        getPeerInfo();
         shareRoom();
         joinRoom(peer_name, room_id);
     });
@@ -244,12 +249,12 @@ function whoAreYou() {
 }
 
 function handleAudio(e) {
-    isAudioOn ? (isAudioOn = false) : (isAudioOn = true);
+    isAudioOn = isAudioOn ? false : true;
     e.target.className = 'fas fa-microphone' + (isAudioOn ? '' : '-slash');
 }
 
 function handleVideo(e) {
-    isVideoOn ? (isVideoOn = false) : (isVideoOn = true);
+    isVideoOn = isVideoOn ? false : true;
     e.target.className = 'fas fa-video' + (isVideoOn ? '' : '-slash');
 }
 
@@ -273,9 +278,6 @@ async function shareRoom(useNavigator = false) {
 
         Swal.fire({
             background: swalBackground,
-            imageUrl: swalImageUrl,
-            imageWidth: 300,
-            imageHeight: 150,
             position: 'center',
             title: '<strong>Hello ' + peer_name + '</strong>',
             html:
@@ -326,7 +328,7 @@ function makeRoomQR() {
         value: RoomURL,
     });
     qr.set({
-        size: 128,
+        size: 256,
     });
 }
 
@@ -402,6 +404,7 @@ function roomIsReady() {
     if (isAudioAllowed) show(startAudioButton);
     if (isVideoAllowed) show(startVideoButton);
     show(videoMedia);
+    show(participantsButton);
     show(lockRoomButton);
     show(aboutButton);
     handleButtons();
@@ -556,6 +559,9 @@ function handleButtons() {
     stopScreenButton.onclick = () => {
         rc.closeProducer(RoomClient.mediaType.screen);
     };
+    participantsButton.onclick = () => {
+        getRoomParticipants();
+    };
     lockRoomButton.onclick = () => {
         rc.roomAction('lock');
     };
@@ -713,14 +719,49 @@ function userLog(icon, message, position) {
 
 async function sound(name) {
     let sound = '../sounds/' + name + '.wav';
-    let audioToPlay = new Audio(sound);
+    let audio = new Audio(sound);
     try {
-        await audioToPlay.play();
+        await audio.play();
     } catch (err) {
         return false;
     }
 }
 
+// ####################################################
+// HANDLE PARTICIPANTS
+// ####################################################
+
+async function getRoomParticipants() {
+    let room_info = await rc.getRoomInfo();
+    let peers = new Map(JSON.parse(room_info.peers));
+    let lists = `<div id="roomParticipants"><ul>`;
+
+    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>`)
+            : (lists += `<li id='${peer_id}'>👤 ${peer_name} <button id='${peer_id}' onclick="rc.peerAction('me',this.id,'eject')">eject</button></li>`);
+    }
+    lists += `</ul></div>`;
+
+    sound('open');
+
+    Swal.fire({
+        background: swalBackground,
+        position: 'center',
+        title: `Participants ${peers.size}`,
+        html: lists,
+        showClass: {
+            popup: 'animate__animated animate__fadeInDown',
+        },
+        hideClass: {
+            popup: 'animate__animated animate__fadeOutUp',
+        },
+    });
+}
+
 // ####################################################
 // ABOUT
 // ####################################################

public/js/RoomClient.js

@@ -70,10 +70,10 @@ class RoomClient {
 
         this.socket = socket;
         this.room_id = room_id;
+        this.peer_id = socket.id;
         this.peer_name = peer_name;
         this.peer_geo = peer_geo;
         this.peer_info = peer_info;
-        this.peer_info.peerName = peer_name;
 
         this.isAudioAllowed = isAudioAllowed;
         this.isVideoAllowed = isVideoAllowed;
@@ -86,8 +86,6 @@ class RoomClient {
         this.isMobileDevice = DetectRTC.isMobileDevice;
 
         this._isConnected = false;
-        this.peerGeo = null;
-        this.peerInfo = null;
         this.isVideoOnFullScreen = false;
         this.isDocumentOnFullScreen = false;
         this.isChatOpen = false;
@@ -141,9 +139,6 @@ class RoomClient {
             async function () {
                 let data = {
                     room_id: this.room_id,
-                    peer_name: this.peer_name,
-                    peer_audio: this.isAudioOn,
-                    peer_video: this.isVideoOn,
                     peer_info: this.peer_info,
                     peer_geo: this.peer_geo,
                 };
@@ -379,6 +374,14 @@ class RoomClient {
             }.bind(this),
         );
 
+        this.socket.on(
+            'peerAction',
+            function (data) {
+                console.log('Peer action:', data);
+                this.peerAction(data.from_peer_name, data.peer_id, data.action, false);
+            }.bind(this),
+        );
+
         this.socket.on(
             'disconnect',
             function () {
@@ -618,17 +621,7 @@ class RoomClient {
         this.attachMediaStream(elem, stream, type, 'Producer');
         this.handleFS(elem.id);
         this.setTippy(elem.id, 'Full Screen', 'top-end');
-        if (this.debug) {
-            this.setTippy(
-                p.id,
-                JSON.stringify(
-                    this.peer_info,
-                    ['peerName', 'isMobileDevice', 'osName', 'osVersion', 'browserName', 'browserVersion'],
-                    2,
-                ),
-                'top-start',
-            );
-        }
+        this.popupPeerInfo(p.id, this.peer_info);
         this.sound('joined');
         return elem;
     }
@@ -804,17 +797,7 @@ class RoomClient {
                 this.attachMediaStream(elem, stream, type, 'Consumer');
                 this.handleFS(elem.id);
                 this.setTippy(elem.id, 'Full Screen', 'top-end');
-                if (this.debug) {
-                    this.setTippy(
-                        p.id,
-                        JSON.stringify(
-                            peer_info,
-                            ['peerName', 'isMobileDevice', 'osName', 'osVersion', 'browserName', 'browserVersion'],
-                            2,
-                        ),
-                        'top-start',
-                    );
-                }
+                this.popupPeerInfo(p.id, peer_info);
                 this.sound('joined');
                 break;
             case mediaType.audio:
@@ -966,10 +949,9 @@ class RoomClient {
         return document.getElementById(id);
     }
 
-    async getMyRoomInfo() {
-        let roomInfo = await this.socket.request('getMyRoomInfo');
-        console.log('Room info', roomInfo);
-        return roomInfo;
+    async getRoomInfo() {
+        let room_info = await this.socket.request('getRoomInfo');
+        return room_info;
     }
 
     // ####################################################
@@ -982,9 +964,9 @@ class RoomClient {
 
     async sound(name) {
         let sound = '../sounds/' + name + '.wav';
-        let audioToPlay = new Audio(sound);
+        let audio = new Audio(sound);
         try {
-            await audioToPlay.play();
+            await audio.play();
         } catch (err) {
             return false;
         }
@@ -1441,4 +1423,73 @@ class RoomClient {
             if (result.isConfirmed) this.exit();
         });
     }
+
+    // ####################################################
+    // PEER ACTION
+    // ####################################################
+
+    peerAction(from_peer_name, peer_id, action, emit = true) {
+        switch (action) {
+            case 'eject':
+                let peer = this.getId(peer_id);
+                if (peer) peer.parentNode.removeChild(peer);
+                if (peer_id === this.peer_id) {
+                    this.sound(action);
+                    let timerInterval;
+                    Swal.fire({
+                        allowOutsideClick: false,
+                        background: swalBackground,
+                        title: from_peer_name,
+                        html: 'Will eject you from the room after <b style="color: red;"></b> milliseconds.',
+                        timer: 5000,
+                        timerProgressBar: true,
+                        didOpen: () => {
+                            Swal.showLoading();
+                            const b = Swal.getHtmlContainer().querySelector('b');
+                            timerInterval = setInterval(() => {
+                                b.textContent = Swal.getTimerLeft();
+                            }, 100);
+                        },
+                        willClose: () => {
+                            clearInterval(timerInterval);
+                        },
+                    }).then(() => {
+                        this.exit();
+                    });
+                }
+                break;
+            // ...
+        }
+        if (emit) {
+            let data = {
+                from_peer_name: this.peer_name,
+                peer_id: peer_id,
+                action: action,
+            };
+            this.socket.emit('peerAction', data);
+        }
+    }
+
+    popupPeerInfo(id, peer_info) {
+        if (this.debug) {
+            this.setTippy(
+                id,
+                JSON.stringify(
+                    peer_info,
+                    [
+                        'peer_name',
+                        'peer_audio',
+                        'peer_video',
+                        'is_mobile_device',
+                        'os_name',
+                        'os_version',
+                        'browser_name',
+                        'browser_version',
+                    ],
+                    2,
+                ),
+                'top-start',
+            );
+        }
+    }
 }

src/Peer.js

@@ -6,10 +6,10 @@ const log = new Logger('Peer');
 module.exports = class Peer {
     constructor(socket_id, data) {
         this.id = socket_id;
-        this.peer_name = data.peer_name;
-        this.peer_audio = data.peer_audio;
-        this.peer_video = data.peer_video;
         this.peer_info = data.peer_info;
+        this.peer_name = data.peer_info.peer_name;
+        this.peer_audio = data.peer_info.peer_audio;
+        this.peer_video = data.peer_info.peer_video;
         this.transports = new Map();
         this.consumers = new Map();
         this.producers = new Map();
@@ -55,7 +55,7 @@ module.exports = class Peer {
             'transportclose',
             function () {
                 log.debug('Producer transport close', {
-                    peer_name: this.peer_name,
+                    peer_name: this.peer_info.peer_name,
                     consumer_id: producer.id,
                 });
                 producer.close();
@@ -107,7 +107,7 @@ module.exports = class Peer {
             'transportclose',
             function () {
                 log.debug('Consumer transport close', {
-                    peer_name: this.peer_name,
+                    peer_name: this.peer_info.peer_name,
                     consumer_id: consumer.id,
                 });
                 this.consumers.delete(consumer.id);

src/Room.js

@@ -203,13 +203,19 @@ module.exports = class Room {
     // SENDER
     // ####################################################
 
-    broadCast(socket_id, peer_name, data) {
+    broadCast(socket_id, action, data) {
         for (let otherID of Array.from(this.peers.keys()).filter((id) => id !== socket_id)) {
-            this.send(otherID, peer_name, data);
+            this.send(otherID, action, data);
         }
     }
 
-    send(socket_id, peer_name, data) {
-        this.io.to(socket_id).emit(peer_name, data);
+    sendTo(socket_id, action, data) {
+        for (let peer_id of Array.from(this.peers.keys()).filter((id) => id === socket_id)) {
+            this.send(peer_id, action, data);
+        }
+    }
+
+    send(socket_id, action, data) {
+        this.io.to(socket_id).emit(action, data);
     }
 };

src/Server.js

@@ -213,10 +213,14 @@ io.on('connection', (socket) => {
                 break;
         }
         log.debug('Room locked:', roomList.get(socket.room_id).isLocked());
-        // send to all participants
         roomList.get(socket.room_id).broadCast(socket.id, 'roomAction', action);
     });
 
+    socket.on('peerAction', (data) => {
+        log.debug('Peer action:', data);
+        roomList.get(socket.room_id).sendTo(data.peer_id, 'peerAction', data);
+    });
+
     socket.on('join', (data, cb) => {
         if (!roomList.has(socket.room_id)) {
             return cb({
@@ -329,7 +333,7 @@ io.on('connection', (socket) => {
         callback();
     });
 
-    socket.on('getMyRoomInfo', (_, cb) => {
+    socket.on('getRoomInfo', (_, cb) => {
         cb(roomList.get(socket.room_id).toJson());
     });
 
@@ -378,9 +382,12 @@ io.on('connection', (socket) => {
         if (json) {
             return {
                 peer_name:
-                    roomList.get(socket.room_id) && roomList.get(socket.room_id).getPeers().get(socket.id).peer_name,
+                    roomList.get(socket.room_id) &&
+                    roomList.get(socket.room_id).getPeers().get(socket.id).peer_info.peer_name,
             };
         }
-        return roomList.get(socket.room_id) && roomList.get(socket.room_id).getPeers().get(socket.id).peer_name;
+        return (
+            roomList.get(socket.room_id) && roomList.get(socket.room_id).getPeers().get(socket.id).peer_info.peer_name
+        );
     }
 });