[mirotalksfu] - add microphone volume indicator

public/css/Room.css

@@ -450,6 +450,39 @@ th {
     display: block;
 }
 
+/*--------------------------------------------------------------
+# Settings - microphone volume indicator
+--------------------------------------------------------------*/
+
+#volumeContainer {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background-color: var(--body-bg);
+    border-radius: 10px;
+}
+
+#volumeBar {
+    flex: 1;
+    height: 5px;
+    background-color: #000000;
+    position: relative;
+    border-radius: 5px;
+}
+
+#volumeLevel {
+    height: 100%;
+    background-color: #007bff;
+    border-radius: 5px;
+    transition: width 100ms ease-in-out;
+}
+
+#volumeText {
+    margin-left: 10px;
+    font-weight: bold;
+    color: #333;
+}
+
 /*--------------------------------------------------------------
 # Chat Room
 --------------------------------------------------------------*/

public/js/Room.js

@@ -307,6 +307,7 @@ async function initEnumerateAudioDevices() {
         .getUserMedia({ audio: true })
         .then((stream) => {
             enumerateAudioDevices(stream);
+            getMicrophoneVolumeIndicator(stream);
             isAudioAllowed = true;
         })
         .catch(() => {
@@ -376,6 +377,37 @@ function addChild(device, els) {
     });
 }
 
+// ####################################################
+// MICROPHONE VOLUME INDICATOR
+// ####################################################
+
+function getMicrophoneVolumeIndicator(stream) {
+    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    const microphone = audioContext.createMediaStreamSource(stream);
+    const scriptProcessor = audioContext.createScriptProcessor(1024, 1, 1);
+    scriptProcessor.onaudioprocess = function (event) {
+        const inputBuffer = event.inputBuffer.getChannelData(0);
+        let sum = 0;
+        for (let i = 0; i < inputBuffer.length; i++) {
+            sum += inputBuffer[i] * inputBuffer[i];
+        }
+        const rms = Math.sqrt(sum / inputBuffer.length);
+        const volume = Math.max(0, Math.min(1, rms * 10)) * 100;
+        if (volume > 1) updateVolumeIndicator(volume);
+    };
+    microphone.connect(scriptProcessor);
+    scriptProcessor.connect(audioContext.destination);
+}
+
+function updateVolumeIndicator(volume) {
+    const MIN_VOLUME = 0;
+    const MAX_VOLUME = 100;
+    const clampedVolume = Math.min(MAX_VOLUME, Math.max(MIN_VOLUME, volume));
+    const volumePercentage = ((clampedVolume - MIN_VOLUME) / (MAX_VOLUME - MIN_VOLUME)) * 100;
+    volumeLevel.style.width = `${volumePercentage}%`;
+    //volumeText.textContent = `${clampedVolume.toFixed(0)}%`;
+}
+
 // ####################################################
 // API CHECK
 // ####################################################

public/js/RoomClient.js

@@ -900,6 +900,7 @@ class RoomClient {
                 this.audioProducerId = producer.id;
                 au = await this.handleProducer(producer.id, type, stream);
                 //if (!isEnumerateDevices) enumerateAudioDevices(stream);
+                getMicrophoneVolumeIndicator(stream);
             }
 
             producer.on('trackended', () => {

public/views/Room.html

@@ -321,6 +321,13 @@ access to use this app.
                         </div>
                         <select id="microphoneSelect" class="form-select text-light bg-dark"></select>
                         <br />
+                        <div id="volumeContainer">
+                            <div id="volumeBar">
+                                <div id="volumeLevel"></div>
+                            </div>
+                            <!-- <span id="volumeText">0%</span> -->
+                        </div>
+                        <br />
                         <div id="speakerSelectDiv">
                             <div class="title">
                                 <i class="fas fa-headphones"></i>