[mirotalksfu] - UI enhancemetns - minor bug fix

public/css/VideoGrid.css

@@ -27,6 +27,7 @@
     display: inline-block;
     background: transparent;
     border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0px 12px 22px rgba(0, 0, 0, 0.4);
     animation: show 0.4s ease;
 }
@@ -61,6 +62,33 @@
     background: rgba(0, 0, 0, 0.4);
 }
 
+#videoMediaContainer button {
+    position: absolute;
+    right: 0;
+    color: white;
+    display: flex;
+    align-items: center;
+    margin: 5px;
+    width: auto;
+    height: 25px;
+    border-radius: 5px;
+    background: rgba(0, 0, 0, 0.1);
+}
+
+#videoMediaContainer img {
+    position: absolute;
+    margin-left: auto;
+    margin-right: auto;
+    width: 250px;
+    display: none;
+}
+
+#videoMediaContainer video {
+    position: absolute;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 video {
     width: 100%;
     height: 100%;

public/js/Room.js

@@ -398,8 +398,6 @@ function joinRoom(peer_name, room_id) {
             peer_info,
             isAudioAllowed,
             isVideoAllowed,
-            isAudioOn,
-            isVideoOn,
             roomIsReady,
         );
         handleRoomClientEvents();
@@ -589,10 +587,12 @@ function handleButtons() {
     };
     startAudioButton.onclick = () => {
         rc.produce(RoomClient.mediaType.audio, microphoneSelect.value);
+        rc.updatePeerInfo(peer_name, rc.peer_id, 'audio', true);
         // rc.resumeProducer(RoomClient.mediaType.audio);
     };
     stopAudioButton.onclick = () => {
         rc.closeProducer(RoomClient.mediaType.audio);
+        rc.updatePeerInfo(peer_name, rc.peer_id, 'audio', false);
         // rc.pauseProducer(RoomClient.mediaType.audio);
     };
     startVideoButton.onclick = () => {
@@ -1178,7 +1178,7 @@ function wbCanvasSaveImg() {
 }
 
 function wbCanvasToJson() {
-    if (rc.thereIsConsumers()) {
+    if (rc.thereIsParticipants()) {
         let wbCanvasJson = JSON.stringify(wbCanvas.toJSON());
         rc.socket.emit('wbCanvasToJson', wbCanvasJson);
     }
@@ -1200,7 +1200,7 @@ function getWhiteboardAction(action) {
 
 function whiteboardAction(data, emit = true) {
     if (emit) {
-        if (rc.thereIsConsumers()) {
+        if (rc.thereIsParticipants()) {
             rc.socket.emit('whiteboardAction', data);
         }
     } else {
@@ -1300,10 +1300,10 @@ async function getParticipantsTable(peers) {
             table += `
             <tr id='${peer_id}'>
                 <td>${peer_name}</td>
-                <td><button id='${peer_id}__audio' onclick="rc.peerAction('me',this.id,'mute')">${peer_audio}</button></td>
+                <td><button id='${peer_id}___pAudio' onclick="rc.peerAction('me',this.id,'mute')">${peer_audio}</button></td>
-                <td><button id='${peer_id}__video' onclick="rc.peerAction('me',this.id,'hide')">${peer_video}</button></td>
+                <td><button id='${peer_id}___pVideo' onclick="rc.peerAction('me',this.id,'hide')">${peer_video}</button></td>
                 <td><button>${peer_hand}</button></td>
-                <td><button id='${peer_id}__eject' onclick="rc.peerAction('me',this.id,'eject')">${peer_eject}</button></td>
+                <td><button id='${peer_id}___pEject' onclick="rc.peerAction('me',this.id,'eject')">${peer_eject}</button></td>
             </tr>
             `;
         }

public/js/RoomClient.js

@@ -6,6 +6,10 @@ const cfg = {
 
 const html = {
     newline: '<br />',
+    audioOn: 'fas fa-microphone',
+    audioOff: 'fas fa-microphone-slash',
+    videoOn: 'fas fa-video',
+    videoOff: 'fas fa-video-slash',
 };
 
 const image = {
@@ -62,8 +66,6 @@ class RoomClient {
         peer_info,
         isAudioAllowed,
         isVideoAllowed,
-        isAudioOn,
-        isVideoOn,
         successCallback,
     ) {
         this.remoteAudioEl = remoteAudioEl;
@@ -79,8 +81,6 @@ class RoomClient {
 
         this.isAudioAllowed = isAudioAllowed;
         this.isVideoAllowed = isVideoAllowed;
-        this.isAudioOn = isAudioOn;
-        this.isVideoOn = isVideoOn;
         this.producerTransport = null;
         this.consumerTransport = null;
         this.device = null;
@@ -117,7 +117,7 @@ class RoomClient {
         this.chunkSize = 1024 * 16; // 16kb/s
 
         this.myVideoEl = null;
-        this.connectedRoom = null;
+        this.room_info = null;
         this.debug = false;
 
         this.consumers = new Map();
@@ -187,8 +187,9 @@ class RoomClient {
                         this.roomIsLocked();
                         return;
                     }
-                    this.connectedRoom = room;
+                    this.room_info = room;
-                    console.log('07 ----> Joined to room', this.connectedRoom);
+                    console.log('07 ----> Joined to room', this.room_info);
+                    await this.handleRoomInfo(this.room_info);
                     const data = await this.socket.request('getRouterRtpCapabilities');
                     this.device = await this.loadDevice(data);
                     console.log('08 ----> Get Router Rtp Capabilities codecs: ', this.device.rtpCapabilities.codecs);
@@ -202,6 +203,19 @@ class RoomClient {
             });
     }
 
+    async handleRoomInfo(room_info) {
+        let peers = new Map(JSON.parse(room_info.peers));
+        participantsCount = peers.size;
+        for (let peer of Array.from(peers.keys()).filter((id) => id !== this.peer_id)) {
+            let peer_info = peers.get(peer).peer_info;
+            console.log('|| ----> Remote Peer info', peer_info);
+            if (!peer_info.peer_video) {
+                await this.setVideoOff(peer_info, true);
+            }
+        }
+        this.refreshParticipantsCount();
+    }
+
     async loadDevice(routerRtpCapabilities) {
         let device;
         try {
@@ -360,6 +374,31 @@ class RoomClient {
             }.bind(this),
         );
 
+        this.socket.on(
+            'setVideoOff',
+            function (data) {
+                console.log('Video off:', data);
+                this.setVideoOff(data, true);
+            }.bind(this),
+        );
+
+        this.socket.on(
+            'removeMe',
+            function (data) {
+                console.log('Remove me:', data);
+                this.removeVideoOff(data.peer_id);
+                participantsCount = data.peer_counts;
+            }.bind(this),
+        );
+
+        this.socket.on(
+            'refreshParticipantsCount',
+            function (data) {
+                console.log('Participants Count:', data);
+                participantsCount = data.peer_counts;
+            }.bind(this),
+        );
+
         this.socket.on(
             'newProducers',
             async function (data) {
@@ -455,14 +494,19 @@ class RoomClient {
     // ####################################################
 
     startLocalMedia() {
-        if (this.isAudioAllowed && this.isAudioOn) {
+        if (this.isAudioAllowed && this.peer_info.peer_audio) {
             console.log('09 ----> Start audio media');
             this.produce(mediaType.audio, microphoneSelect.value);
         }
-        if (this.isVideoAllowed && this.isVideoOn) {
+        if (this.isVideoAllowed && this.peer_info.peer_video) {
             console.log('10 ----> Start video media');
             this.produce(mediaType.video, videoSelect.value);
         }
+        if (!this.peer_info.peer_video) {
+            console.log('10 ----> Video is off');
+            this.setVideoOff(this.peer_info, false);
+            this.sendVideoOff();
+        }
     }
 
     // ####################################################
@@ -567,12 +611,15 @@ class RoomClient {
 
             switch (type) {
                 case mediaType.audio:
+                    this.setIsAudio(this.peer_id, true);
                     this.event(_EVENTS.startAudio);
                     break;
                 case mediaType.video:
+                    this.setIsVideo(true);
                     this.event(_EVENTS.startVideo);
                     break;
                 case mediaType.screen:
+                    this.setIsScreen(true);
                     this.event(_EVENTS.startScreen);
                     break;
                 default:
@@ -664,7 +711,8 @@ class RoomClient {
     }
 
     async handleProducer(id, type, stream) {
-        let elem, d, p, i;
+        let elem, d, p, i, b;
+        this.removeVideoOff(this.peer_id);
         d = document.createElement('div');
         d.className = 'Camera';
         d.id = id + '__d';
@@ -678,11 +726,15 @@ class RoomClient {
         p.id = this.peer_id + '__name';
         p.innerHTML = '👤 ' + this.peer_name + ' (me)';
         i = document.createElement('i');
-        i.id = this.peer_id + '__peerHand';
+        i.id = this.peer_id + '__hand';
         i.className = 'fas fa-hand-paper pulsate';
+        b = document.createElement('button');
+        b.id = this.peer_id + '__audio';
+        b.className = this.peer_info.peer_audio ? html.audioOn : html.audioOff;
         d.appendChild(elem);
-        d.appendChild(p);
         d.appendChild(i);
+        d.appendChild(p);
+        d.appendChild(b);
         this.videoMediaContainer.appendChild(d);
         this.attachMediaStream(elem, stream, type, 'Producer');
         this.myVideoEl = elem;
@@ -778,12 +830,15 @@ class RoomClient {
 
         switch (type) {
             case mediaType.audio:
+                this.setIsAudio(this.peer_id, false);
                 this.event(_EVENTS.stopAudio);
                 break;
             case mediaType.video:
+                this.setIsVideo(false);
                 this.event(_EVENTS.stopVideo);
                 break;
             case mediaType.screen:
+                this.setIsScreen(false);
                 this.event(_EVENTS.stopScreen);
                 break;
             default:
@@ -852,9 +907,10 @@ class RoomClient {
     }
 
     handleConsumer(id, type, stream, peer_name, peer_info) {
-        let elem, d, p, i;
+        let elem, d, p, i, b;
         switch (type) {
             case mediaType.video:
+                this.removeVideoOff(peer_info.peer_id);
                 d = document.createElement('div');
                 d.className = 'Camera';
                 d.id = id + '__d';
@@ -868,11 +924,15 @@ class RoomClient {
                 p.id = peer_info.peer_id + '__name';
                 p.innerHTML = '👤 ' + peer_name;
                 i = document.createElement('i');
-                i.id = peer_info.peer_id + '__peerHand';
+                i.id = peer_info.peer_id + '__hand';
                 i.className = 'fas fa-hand-paper pulsate';
+                b = document.createElement('button');
+                b.id = peer_info.peer_id + '__audio';
+                b.className = peer_info.peer_audio ? html.audioOn : html.audioOff;
                 d.appendChild(elem);
                 d.appendChild(p);
                 d.appendChild(i);
+                d.appendChild(b);
                 this.videoMediaContainer.appendChild(d);
                 this.attachMediaStream(elem, stream, type, 'Consumer');
                 this.handleFS(elem.id);
@@ -894,6 +954,8 @@ class RoomClient {
     }
 
     removeConsumer(consumer_id) {
+        console.log('Remove consumer_id:', consumer_id);
+
         let elem = this.getId(consumer_id);
         let d = this.getId(consumer_id + '__d');
 
@@ -910,6 +972,45 @@ class RoomClient {
         this.sound('left');
     }
 
+    // ####################################################
+    // HANDLE VIDEO OFF
+    // ####################################################
+
+    async setVideoOff(peer_info, remotePeer = false) {
+        let d, i, b, p;
+        let peer_id = peer_info.peer_id;
+        let peer_name = peer_info.peer_name;
+        let peer_audio = peer_info.peer_audio;
+        d = document.createElement('div');
+        d.className = 'Camera';
+        d.id = peer_id + '__videoOff';
+        i = document.createElement('img');
+        i.className = 'center pulsate';
+        i.id = peer_id + '__img';
+        p = document.createElement('p');
+        p.id = peer_id + '__name';
+        p.innerHTML = '👤 ' + peer_name + (remotePeer ? '' : ' (me) ');
+        b = document.createElement('button');
+        b.id = peer_id + '__audio';
+        b.className = peer_audio ? html.audioOn : html.audioOff;
+        d.appendChild(i);
+        d.appendChild(p);
+        d.appendChild(b);
+        this.videoMediaContainer.appendChild(d);
+        this.setVideoAvatarImgName(i.id, peer_name);
+        this.getId(i.id).style.display = 'block';
+        resizeVideoMedia();
+    }
+
+    removeVideoOff(peer_id) {
+        let pvOff = this.getId(peer_id + '__videoOff');
+        if (pvOff) {
+            pvOff.parentNode.removeChild(pvOff);
+            resizeVideoMedia();
+            this.sound('left');
+        }
+    }
+
     // ####################################################
     // EXIT ROOM
     // ####################################################
@@ -1005,6 +1106,37 @@ class RoomClient {
         });
     }
 
+    setVideoAvatarImgName(elemId, peer_name) {
+        let elem = this.getId(elemId);
+        let avatarImgSize = 250;
+        elem.setAttribute(
+            'src',
+            cfg.msgAvatar + '?name=' + peer_name + '&size=' + avatarImgSize + '&background=random&rounded=true',
+        );
+    }
+
+    setIsAudio(peer_id, status) {
+        this.peer_info.peer_audio = status;
+        let b = this.getPeerAudioBtn(peer_id);
+        if (b) b.className = this.peer_info.peer_audio ? html.audioOn : html.audioOff;
+    }
+
+    setIsVideo(status) {
+        this.peer_info.peer_video = status;
+        if (!this.peer_info.peer_video) {
+            this.setVideoOff(this.peer_info, false);
+            this.sendVideoOff();
+        }
+    }
+
+    setIsScreen(status) {
+        return status;
+    }
+
+    sendVideoOff() {
+        this.socket.emit('setVideoOff', this.peer_info);
+    }
+
     // ####################################################
     // GET
     // ####################################################
@@ -1038,6 +1170,18 @@ class RoomClient {
         return room_info;
     }
 
+    refreshParticipantsCount() {
+        this.socket.emit('refreshParticipantsCount');
+    }
+
+    getPeerAudioBtn(peer_id) {
+        return this.getId(peer_id + '__audio');
+    }
+
+    getPeerHandBtn(peer_id) {
+        return this.getId(peer_id + '__hand');
+    }
+
     // ####################################################
     // UTILITY
     // ####################################################
@@ -1074,8 +1218,8 @@ class RoomClient {
         });
     }
 
-    thereIsConsumers() {
+    thereIsParticipants() {
-        if (this.consumers.size > 0) {
+        if (this.consumers.size > 0 || participantsCount > 1) {
             return true;
         }
         return false;
@@ -1202,7 +1346,7 @@ class RoomClient {
     }
 
     sendMessage() {
-        if (!this.thereIsConsumers()) {
+        if (!this.thereIsParticipants()) {
             chatMessage.value = '';
             this.userLog('info', 'No participants in the room', 'top-end');
             return;
@@ -1495,7 +1639,7 @@ class RoomClient {
             if (result.isConfirmed) {
                 this.fileToSend = result.value;
                 if (this.fileToSend && this.fileToSend.size > 0) {
-                    if (!this.thereIsConsumers()) {
+                    if (!this.thereIsParticipants()) {
                         userLog('info', 'No participants detected', 'top-end');
                         return;
                     }
@@ -1761,27 +1905,28 @@ class RoomClient {
 
     peerAction(from_peer_name, id, action, emit = true, broadcast = false) {
         let peer_id = id;
-
         if (emit) {
             if (!broadcast) {
                 if (participantsCount === 1) return;
 
-                const words = peer_id.split('__');
+                const words = peer_id.split('___');
                 peer_id = words[0];
 
                 switch (action) {
                     case 'eject':
                         let peer = this.getId(peer_id);
-                        if (peer) peer.parentNode.removeChild(peer);
+                        if (peer) {
-                        participantsCount--;
+                            peer.parentNode.removeChild(peer);
-                        refreshParticipantsCount(participantsCount);
+                            participantsCount--;
+                            refreshParticipantsCount(participantsCount);
+                        }
                         break;
                     case 'mute':
-                        let peerAudioButton = this.getId(peer_id + '__audio');
+                        let peerAudioButton = this.getId(peer_id + '___pAudio');
                         if (peerAudioButton) peerAudioButton.innerHTML = _PEER.audioOff;
                         break;
                     case 'hide':
-                        let peerVideoButton = this.getId(peer_id + '__video');
+                        let peerVideoButton = this.getId(peer_id + '___pVideo');
                         if (peerVideoButton) peerVideoButton.innerHTML = _PEER.videoOff;
                 }
             } else {
@@ -1845,6 +1990,7 @@ class RoomClient {
                 case 'mute':
                     if (peer_id === this.peer_id || broadcast) {
                         this.closeProducer(mediaType.audio);
+                        this.updatePeerInfo(this.peer_name, this.peer_id, 'audio', false);
                         this.userLog(
                             'warning',
                             from_peer_name + '  ' + _PEER.audioOff + ' has closed yours audio',
@@ -1877,14 +2023,14 @@ class RoomClient {
         if (emit) {
             switch (type) {
                 case 'audio':
-                    this.peer_info.peer_audio = status;
+                    this.setIsAudio(peer_id, status);
                     break;
                 case 'video':
-                    this.peer_info.peer_video = status;
+                    this.setIsVideo(status);
                     break;
                 case 'hand':
                     this.peer_info.peer_hand = status;
-                    let peer_hand = this.getId(peer_id + '__peerHand');
+                    let peer_hand = this.getPeerHandBtn(peer_id);
                     if (status) {
                         if (peer_hand) peer_hand.style.display = 'flex';
                         this.event(_EVENTS.raiseHand);
@@ -1905,11 +2051,13 @@ class RoomClient {
         } else {
             switch (type) {
                 case 'audio':
+                    this.setIsAudio(peer_id, status);
                     break;
                 case 'video':
+                    this.setIsVideo(status);
                     break;
                 case 'hand':
-                    let peer_hand = this.getId(peer_id + '__peerHand');
+                    let peer_hand = this.getPeerHandBtn(peer_id);
                     if (status) {
                         if (peer_hand) peer_hand.style.display = 'flex';
                         this.userLog(
@@ -1931,7 +2079,7 @@ class RoomClient {
         let peer_id = peer_info.peer_id;
         let peer_hand_status = peer_info.peer_hand;
         if (peer_hand_status) {
-            let peer_hand = this.getId(peer_id + '__peerHand');
+            let peer_hand = this.getPeerHandBtn(peer_id);
             if (peer_hand) peer_hand.style.display = 'flex';
         }
         //...

src/Room.js

@@ -216,6 +216,12 @@ module.exports = class Room {
         }
     }
 
+    sendToAll(action, data) {
+        for (let peer_id of Array.from(this.peers.keys())) {
+            this.send(peer_id, action, data);
+        }
+    }
+
     send(socket_id, action, data) {
         this.io.to(socket_id).emit(action, data);
     }

src/Server.js

@@ -276,6 +276,11 @@ io.on('connection', (socket) => {
         roomList.get(socket.room_id).broadCast(socket.id, 'whiteboardAction', data);
     });
 
+    socket.on('setVideoOff', (data) => {
+        log.debug('Video off', getPeerName());
+        roomList.get(socket.room_id).broadCast(socket.id, 'setVideoOff', data);
+    });
+
     socket.on('join', (data, cb) => {
         if (!roomList.has(socket.room_id)) {
             return cb({
@@ -331,9 +336,9 @@ io.on('connection', (socket) => {
     });
 
     socket.on('connectTransport', async ({ transport_id, dtlsParameters }, callback) => {
+        if (!roomList.has(socket.room_id)) return;
         log.debug('Connect transport', getPeerName());
 
-        if (!roomList.has(socket.room_id)) return;
         await roomList.get(socket.room_id).connectPeerTransport(socket.id, transport_id, dtlsParameters);
 
         callback('success');
@@ -401,8 +406,17 @@ io.on('connection', (socket) => {
     });
 
     socket.on('getRoomInfo', (_, cb) => {
-        cb(roomList.get(socket.room_id).toJson());
         log.debug('Send Room Info');
+        cb(roomList.get(socket.room_id).toJson());
+    });
+
+    socket.on('refreshParticipantsCount', () => {
+        let data = {
+            room_id: socket.room_id,
+            peer_counts: roomList.get(socket.room_id).getPeers().size,
+        };
+        log.debug('Refresh Participants count', data);
+        roomList.get(socket.room_id).sendToAll('refreshParticipantsCount', data);
     });
 
     socket.on('message', (data) => {
@@ -423,6 +437,8 @@ io.on('connection', (socket) => {
         if (roomList.get(socket.room_id).getPeers().size === 0 && roomList.get(socket.room_id).isLocked()) {
             roomList.get(socket.room_id).setLocked(false);
         }
+
+        roomList.get(socket.room_id).broadCast(socket.id, 'removeMe', removeMeData());
     });
 
     socket.on('exitRoom', async (_, callback) => {
@@ -440,6 +456,8 @@ io.on('connection', (socket) => {
             roomList.delete(socket.room_id);
         }
 
+        roomList.get(socket.room_id).broadCast(socket.id, 'removeMe', removeMeData());
+
         socket.room_id = null;
 
         callback('Successfully exited room');
@@ -459,6 +477,14 @@ io.on('connection', (socket) => {
         );
     }
 
+    function removeMeData() {
+        return {
+            room_id: socket.room_id,
+            peer_id: socket.id,
+            peer_counts: roomList.get(socket.room_id).getPeers().size,
+        };
+    }
+
     function bytesToSize(bytes) {
         let sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
         if (bytes == 0) return '0 Byte';