[call-me] - add toggle audio/video stream

package.json

@@ -1,6 +1,6 @@
 {
     "name": "call-me",
-    "version": "1.0.39",
+    "version": "1.0.40",
     "description": "Your Go-To for Instant Video Calls",
     "author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
     "license": "AGPLv3",

public/client.js

@@ -19,8 +19,10 @@ const usernameIn = document.getElementById('usernameIn');
 const signInBtn = document.getElementById('signInBtn');
 const roomPage = document.getElementById('roomPage');
 const callUsernameIn = document.getElementById('callUsernameIn');
-const callBtn = document.getElementById('callBtn');
 const hideBtn = document.getElementById('hideBtn');
+const callBtn = document.getElementById('callBtn');
+const videoBtn = document.getElementById('videoBtn');
+const audioBtn = document.getElementById('audioBtn');
 const hangUpBtn = document.getElementById('hangUpBtn');
 const localVideoContainer = document.getElementById('localVideoContainer');
 const localVideo = document.getElementById('localVideo');
@@ -281,6 +283,8 @@ function handleListeners() {
     // Event listeners
     signInBtn.addEventListener('click', handleSignInClick);
     callBtn.addEventListener('click', handleCallClick);
+    videoBtn.addEventListener('click', handleVideoClick);
+    audioBtn.addEventListener('click', handleAudioClick);
     hideBtn.addEventListener('click', toggleLocalVideo);
     hangUpBtn.addEventListener('click', handleHangUpClick);
     localVideoContainer.addEventListener('click', toggleFullScreen);
@@ -332,6 +336,20 @@ function handleCallClick() {
     }
 }
 
+// Toggle video stream
+function handleVideoClick() {
+    const videoTrack = stream.getVideoTracks()[0];
+    videoTrack.enabled = !videoTrack.enabled;
+    videoBtn.classList.toggle('btn-danger');
+}
+
+// Toggle audio stream
+function handleAudioClick() {
+    const audioTrack = stream.getAudioTracks()[0];
+    audioTrack.enabled = !audioTrack.enabled;
+    audioBtn.classList.toggle('btn-danger');
+}
+
 // Toggle local video visibility
 function toggleLocalVideo() {
     localVideoContainer.classList.toggle('hide');

public/index.html

@@ -117,6 +117,26 @@
                     >
                         <i class="fas fa-phone"></i>
                     </button>
+                    <!-- Button to toggle video stream -->
+                    <button
+                        id="videoBtn"
+                        class="btn btn-custom btn-success btn-m"
+                        data-toggle="tooltip"
+                        data-placement="top"
+                        title="Toggle video"
+                    >
+                        <i class="fas fa-video"></i>
+                    </button>
+                    <!-- Button to toggle audio stream -->
+                    <button
+                        id="audioBtn"
+                        class="btn btn-custom btn-success btn-m"
+                        data-toggle="tooltip"
+                        data-placement="top"
+                        title="Toggle audio"
+                    >
+                        <i class="fas fa-microphone"></i>
+                    </button>
                     <!-- Button to hang up the call -->
                     <button
                         id="hangUpBtn"

public/style.css

@@ -306,3 +306,7 @@ input {
 ::-webkit-scrollbar-track {
     background: #1a1b1f;
 }
+
+.red {
+    background: red !important;
+}