From 7c8a56f542d37a4bbd3487d26fbf330587214185 Mon Sep 17 00:00:00 2001
From: a-wing <1@233.email>
Date: Sun, 4 Feb 2024 00:44:25 +0800
Subject: [PATCH] feat: add webui debuger mute audio and video

---
 assets/index.html | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/assets/index.html b/assets/index.html
index d73a7200..113c3c85 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -79,8 +79,11 @@ <h3>WHIP Video:</h3>
         <center>
         <section>SVC Layer: <select disabled id="whep-layer-select"></select></section>
         <section>
-            <button onclick="startWhep()">Start</button>
+            <button id="whep-button-disable-audio">Disable Audio</button>
             <button id="whep-button-disable-video">Disable Video</button>
+        </section>
+        <section>
+            <button onclick="startWhep()">Start</button>
             <button id="whep-button-stop">Stop</button>
         </section>
 
@@ -291,9 +294,6 @@ <h3>WHEP Video:</h3>
             if (el) el.srcObject = null
         }
 
-        // leave page
-        // addEventListener("beforeunload", stop)
-
         const element = document.getElementById(idWhipButtonStop)
         if (element) element.addEventListener('click', stop)
 
@@ -307,6 +307,8 @@ <h3>WHEP Video:</h3>
 
     const idWhepLayerSelect = "whep-layer-select"
     const idWhepButtonStop = "whep-button-stop"
+    const idWhepButtonDisableAudio = "whep-button-disable-audio"
+    const idWhepButtonDisableVideo = "whep-button-disable-video"
     const idWhepDataChannel = "whep-datachannel"
 
     initLayerSelect(idWhepLayerSelect, [
@@ -356,14 +358,23 @@ <h3>WHEP Video:</h3>
             await whep.stop()
             logWhep(num, "stopped")
         })
-        var flag = false
-        document.getElementById("whep-button-disable-video").onclick = async () => {
-            await whep.mute({
-                "kind":"video",
-                "audioEnabled": flag
-            })
-            flag = !flag
+
+        const buttonDisableAudio = document.getElementById(idWhepButtonDisableAudio)
+        let flagButtonDisableAudio = false
+        buttonDisableAudio.onclick = async () => {
+            await whep.mute({ kind: "audio", enabled: flagButtonDisableAudio })
+            buttonDisableAudio.innerText = flagButtonDisableAudio ? "Disable Audio" : "Enable Audio"
+            flagButtonDisableAudio = !flagButtonDisableAudio
         }
+
+        const buttonDisableVideo = document.getElementById(idWhepButtonDisableVideo)
+        let flagButtonDisableVideo = false
+        buttonDisableVideo.onclick = async () => {
+            await whep.mute({ kind: "video", enabled: flagButtonDisableVideo })
+            buttonDisableVideo.innerText = flagButtonDisableVideo ? "Disable Video" : "Enable Video"
+            flagButtonDisableVideo = !flagButtonDisableVideo
+        }
+
         const initEvevt = () => {
             const el = document.getElementById(idWhepLayerSelect)
             if (el) el.onchange = ev => !ev.target.value ? whep.unselectLayer() : whep.selectLayer({"encodingId": ev.target.value}).catch(e => logWhep(e))