[mirotalksfu] - improvements

public/js/Room.js

@@ -544,6 +544,7 @@ function joinRoom(peer_name, room_id) {
     } else {
         console.log('05 ----> join Room ' + room_id);
         rc = new RoomClient(
+            localAudio,
             remoteAudios,
             videoMediaContainer,
             window.mediasoupClient,
@@ -898,7 +899,7 @@ function handleSelects() {
         rc.setLocalStorageDevices(RoomClient.mediaType.audio, microphoneSelect.selectedIndex, microphoneSelect.value);
     };
     speakerSelect.onchange = () => {
-        rc.attachSinkId(rc.myVideoEl, speakerSelect.value);
+        rc.attachSinkId(rc.myAudioEl, speakerSelect.value);
         rc.setLocalStorageDevices(RoomClient.mediaType.speaker, speakerSelect.selectedIndex, speakerSelect.value);
     };
     videoSelect.onchange = () => {

public/js/RoomClient.js

@@ -96,6 +96,7 @@ const _EVENTS = {
 let recordedBlobs;
 class RoomClient {
     constructor(
+        localAudioEl,
         remoteAudioEl,
         videoMediaContainer,
         mediasoupClient,
@@ -109,6 +110,7 @@ class RoomClient {
         isScreenAllowed,
         successCallback,
     ) {
+        this.localAudioEl = localAudioEl;
         this.remoteAudioEl = remoteAudioEl;
         this.videoMediaContainer = videoMediaContainer;
         this.mediasoupClient = mediasoupClient;
@@ -164,6 +166,7 @@ class RoomClient {
         this.chunkSize = 1024 * 16; // 16kb/s
 
         this.myVideoEl = null;
+        this.myAudioEl = null;
         this.debug = false;
 
         this.videoProducerId = null;
@@ -691,15 +694,16 @@ class RoomClient {
 
             this.producers.set(producer.id, producer);
 
-            let elem;
+            let elem, au;
             if (!audio) {
                 this.localVideoStream = stream;
-                elem = await this.handleProducer(producer.id, type, stream);
                 this.videoProducerId = producer.id;
+                elem = await this.handleProducer(producer.id, type, stream);
                 //if (!screen && !isEnumerateDevices) enumerateVideoDevices(stream);
             } else {
                 this.localAudioStream = stream;
                 this.audioProducerId = producer.id;
+                au = await this.handleProducer(producer.id, type, stream);
                 //if (!isEnumerateDevices) enumerateAudioDevices(stream);
             }
 
@@ -717,6 +721,12 @@ class RoomClient {
 
                     handleAspectRatio();
                     console.log('[transportClose] Video-element-count', this.videoMediaContainer.childElementCount);
+                } else {
+                    au.srcObject.getTracks().forEach(function (track) {
+                        track.stop();
+                    });
+                    au.parentNode.removeChild(au);
+                    console.log('[transportClose] audio-element-count', this.localAudioEl.childElementCount);
                 }
                 this.producers.delete(producer.id);
             });
@@ -731,6 +741,12 @@ class RoomClient {
 
                     handleAspectRatio();
                     console.log('[closingProducer] Video-element-count', this.videoMediaContainer.childElementCount);
+                } else {
+                    au.srcObject.getTracks().forEach(function (track) {
+                        track.stop();
+                    });
+                    au.parentNode.removeChild(au);
+                    console.log('[closingProducer] audio-element-count', this.localAudioEl.childElementCount);
                 }
                 this.producers.delete(producer.id);
             });
@@ -845,10 +861,13 @@ class RoomClient {
 
     async handleProducer(id, type, stream) {
         let elem, vb, ts, d, p, i, au, fs, pm, pb;
+        switch (type) {
+            case mediaType.video:
+            case mediaType.screen:
                 this.removeVideoOff(this.peer_id);
                 d = document.createElement('div');
                 d.className = 'Camera';
-        d.id = id + '__d';
+                d.id = id + '__video';
                 elem = document.createElement('video');
                 elem.setAttribute('id', id);
                 elem.setAttribute('playsinline', true);
@@ -914,6 +933,23 @@ class RoomClient {
                     this.setTippy(au.id, 'Audio status', 'top-end');
                 }
                 console.log('[addProducer] Video-element-count', this.videoMediaContainer.childElementCount);
+                break;
+            case mediaType.audio:
+                elem = document.createElement('audio');
+                elem.id = id + '__localAudio';
+                elem.controls = false;
+                elem.autoplay = true;
+                elem.muted = true;
+                elem.volume = 0;
+                this.myAudioEl = elem;
+                this.localAudioEl.appendChild(elem);
+                this.attachMediaStream(elem, stream, type, 'Producer');
+                if (this.isAudioAllowed && !speakerSelect.disabled) {
+                    this.attachSinkId(elem, speakerSelect.value);
+                }
+                console.log('[addProducer] audio-element-count', this.localAudioEl.childElementCount);
+                break;
+        }
         return elem;
     }
 
@@ -989,7 +1025,7 @@ class RoomClient {
 
         if (type !== mediaType.audio) {
             let elem = this.getId(producer_id);
-            let d = this.getId(producer_id + '__d');
+            let d = this.getId(producer_id + '__video');
             elem.srcObject.getTracks().forEach(function (track) {
                 track.stop();
             });
@@ -999,6 +1035,15 @@ class RoomClient {
             console.log('[producerClose] Video-element-count', this.videoMediaContainer.childElementCount);
         }
 
+        if (type === mediaType.audio) {
+            let au = this.getId(producer_id + '__localAudio');
+            au.srcObject.getTracks().forEach(function (track) {
+                track.stop();
+            });
+            this.localAudioEl.removeChild(au);
+            console.log('[producerClose] Audio-element-count', this.localAudioEl.childElementCount);
+        }
+
         switch (type) {
             case mediaType.audio:
                 this.setIsAudio(this.peer_id, false);
@@ -1089,7 +1134,7 @@ class RoomClient {
                 this.removeVideoOff(remotePeerId);
                 d = document.createElement('div');
                 d.className = 'Camera';
-                d.id = id + '__d';
+                d.id = id + '__video';
                 elem = document.createElement('video');
                 elem.setAttribute('id', id);
                 elem.setAttribute('playsinline', true);
@@ -1202,7 +1247,7 @@ class RoomClient {
         if (elem) elem.parentNode.removeChild(elem);
 
         if (consumer_kind === 'video') {
-            let d = this.getId(consumer_id + '__d');
+            let d = this.getId(consumer_id + '__video');
             if (d) d.parentNode.removeChild(d);
             handleAspectRatio();
             console.log(
@@ -1387,17 +1432,6 @@ class RoomClient {
     // ####################################################
 
     attachMediaStream(elem, stream, type, who) {
-        if (who === 'Producer') {
-            const producerStream = new MediaStream();
-            producerStream.addTrack(stream.getVideoTracks()[0]);
-            if (this.isAudioAllowed) {
-                producerStream.addTrack(this.localAudioStream.getAudioTracks()[0]);
-            }
-            elem.srcObject = producerStream;
-            if (this.isAudioAllowed && !speakerSelect.disabled) {
-                this.attachSinkId(elem, speakerSelect.value);
-            }
-        } else {
         let track;
         switch (type) {
             case mediaType.audio:
@@ -1411,7 +1445,6 @@ class RoomClient {
         const consumerStream = new MediaStream();
         consumerStream.addTrack(track);
         elem.srcObject = consumerStream;
-        }
         console.log(who + ' Success attached media ' + type);
     }
 
@@ -1709,7 +1742,7 @@ class RoomClient {
         isVideoControlsOn = value == 'On' ? true : false;
         let cameras = this.getEcN('Camera');
         for (let i = 0; i < cameras.length; i++) {
-            let cameraId = cameras[i].id.replace('__d', '');
+            let cameraId = cameras[i].id.replace('__video', '');
             let videoPlayer = this.getId(cameraId);
             videoPlayer.hasAttribute('controls')
                 ? videoPlayer.removeAttribute('controls')
@@ -2767,26 +2800,23 @@ class RoomClient {
         let pbProducer = this.getId(peerId + '_pitchBar');
         let pbConsumer = this.getId(peerId + '__pitchBar');
         let audioVolume = data.audioVolume * 10; //10-100
+        let audioColor = 'lime';
         //console.log('Active speaker', { peer_name: peerName, peer_id: peerId, audioVolume: audioVolume });
-        if (audioVolume > 40) {
+        if ([50, 60, 70].includes(audioVolume)) audioColor = 'orange';
-            if (producerAudioBtn) producerAudioBtn.style.color = 'orange';
+        if ([80, 90, 100].includes(audioVolume)) audioColor = 'red';
-            if (consumerAudioBtn) consumerAudioBtn.style.color = 'orange';
+        if (producerAudioBtn) producerAudioBtn.style.color = audioColor;
-            if (pbProducer) pbProducer.style.backgroundColor = 'orange';
+        if (consumerAudioBtn) consumerAudioBtn.style.color = audioColor;
-            if (pbConsumer) pbConsumer.style.backgroundColor = 'orange';
+        if (pbProducer) pbProducer.style.backgroundColor = audioColor;
-        } else {
+        if (pbConsumer) pbConsumer.style.backgroundColor = audioColor;
-            if (producerAudioBtn) producerAudioBtn.style.color = 'lime';
-            if (consumerAudioBtn) consumerAudioBtn.style.color = 'lime';
-            if (pbProducer) pbProducer.style.backgroundColor = 'lime';
-            if (pbConsumer) pbConsumer.style.backgroundColor = 'lime';
-        }
         if (pbProducer) pbProducer.style.height = audioVolume + '%';
         if (pbConsumer) pbConsumer.style.height = audioVolume + '%';
         setTimeout(function () {
-            if (producerAudioBtn) producerAudioBtn.style.color = 'white';
+            audioColor = 'white';
-            if (consumerAudioBtn) consumerAudioBtn.style.color = 'white';
+            if (producerAudioBtn) producerAudioBtn.style.color = audioColor;
+            if (consumerAudioBtn) consumerAudioBtn.style.color = audioColor;
             if (pbProducer) pbProducer.style.height = '0%';
             if (pbConsumer) pbConsumer.style.height = '0%';
-        }, 2000);
+        }, 4000);
     }
 
     // ####################################################

public/views/Room.html

@@ -281,6 +281,7 @@
         <div id="videoMediaContainer">
             <!-- <div class="Camera"></div> -->
         </div>
+        <div id="localAudio"></div>
         <div id="remoteAudios"></div>
 
         <div id="sendFileDiv" class="fadein center">