[mirotalkbro] - add popup for video/audio status

miroslavpejic85 · Jan 20, 2025 · e0f7b14 · e0f7b14
1 parent 81e9b5b
commit e0f7b14
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/public/css/common.css b/public/css/common.css
@@ -288,8 +288,8 @@ td button:hover {
     color: red;
 }
 
-.color-white {
-    color: white;
+.color-green {
+    color: greenyellow;
 }
 
 .hidden {

diff --git a/public/js/broadcast.js b/public/js/broadcast.js
@@ -466,6 +466,7 @@ function toggleAudio(enable) {
     elementDisplay(enableAudio, !enable);
     elementDisplay(disableAudio, enable && broadcastSettings.buttons.audio);
     sendToViewersDataChannel('audio', { enable });
+    checkTrackAndPopup(broadcastStream);
 }
 
 // =====================================================
@@ -480,6 +481,7 @@ function toggleVideo() {
     videoOff.style.visibility = videoBtn.style.color == 'red' ? 'visible' : 'hidden';
     broadcastStream.getVideoTracks()[0].enabled = !broadcastStream.getVideoTracks()[0].enabled;
     sendToViewersDataChannel('video', { visibility: videoOff.style.visibility });
+    checkTrackAndPopup(broadcastStream);
 }
 
 // =====================================================

diff --git a/public/js/utils.js b/public/js/utils.js
@@ -111,6 +111,29 @@ function stopVideoTrack(mediaStream) {
     }
 }
 
+function checkTrackAndPopup(mediaStream) {
+    let message = '';
+
+    const audioTrack = mediaStream.getAudioTracks()[0];
+    const videoTrack = mediaStream.getVideoTracks()[0];
+
+    const on = '<span class="color-green">on</span>';
+    const off = '<span class="color-red">off</span>';
+
+    if (audioTrack) {
+        const audioEnabled = audioTrack.enabled;
+        message = `Your microphone is ${audioEnabled ? on : off}`;
+    }
+
+    if (videoTrack) {
+        const videoEnabled = videoTrack.enabled;
+        const videoMessage = `Your camera is ${videoEnabled ? on : off}`;
+        message = message ? `${message}, ${videoMessage}` : videoMessage;
+    }
+
+    popupMessage('toast', 'Microphone/Camera', message, 'top');
+}
+
 function handleMediaStreamError(error) {
     let errorMessage = error;
     let shouldHandleGetUserMediaError = true;

diff --git a/public/js/viewer.js b/public/js/viewer.js
@@ -340,7 +340,7 @@ function toggleAudio(enabled) {
         enabled: enabled,
     });
 
-    popupMessage('toast', 'Microphone', `Your microphone is ${enabled ? 'on' : 'off'}`, 'top');
+    checkTrackAndPopup(viewerStream);
 }
 
 // =====================================================
@@ -364,7 +364,7 @@ function toggleVideo() {
         enabled: !enabled,
     });
 
-    popupMessage('toast', 'Camera', `Your camera is ${enabled ? 'off' : 'on'}`, 'top');
+    checkTrackAndPopup(viewerStream);
 }
 
 // =====================================================