[mirotalksfu] - #122 add push to talk

README.md

@@ -45,6 +45,7 @@
 -   Chat with Emoji Picker to show you feeling, private messages, Markdown support, possibility to Save the conversations, and many more.
 -   ChatGPT (openAI), designed to answer users' questions, provide relevant information, and connect them with relevant resources.
 -   Speech recognition, execute the app features simply with your voice.
+-   Push to talk, like a walkie-talkie.
 -   Advance collaborative whiteboard for the teachers.
 -   Select Microphone - Speaker and Video source.
 -   Recording your Screen, Audio, or Video.

public/css/Room.css

@@ -355,6 +355,9 @@ th {
 .custom-width {
     width: 130px;
 }
+.width-150 {
+    width: 150px;
+}
 
 /*--------------------------------------------------------------
 # Style the tab

public/js/Room.js

@@ -82,6 +82,8 @@ isPresenter = isPeerPresenter();
 let peer_info = null;
 
 let isHideMeActive = false;
+let isPushToTalkActive = false;
+let isSpaceDown = false;
 let isPitchBarEnabled = true;
 let isSoundEnabled = true;
 let isLobbyEnabled = false;
@@ -156,6 +158,11 @@ function initClient() {
         setTippy('tabAspectBtn', 'Aspect', 'top');
         setTippy('tabStylingBtn', 'Styling', 'top');
         setTippy('tabLanguagesBtn', 'Languages', 'top');
+        setTippy(
+            'switchPushToTalk',
+            'If Active, When SpaceBar keydown the microphone will be resumed, on keyup will be paused, like a walkie-talkie.',
+            'right',
+        );
         setTippy('lobbyAcceptAllBtn', 'Accept', 'top');
         setTippy('lobbyRejectAllBtn', 'Reject', 'top');
         setTippy(
@@ -873,6 +880,7 @@ function roomIsReady() {
             }
         }
         BUTTONS.chat.chatMaxButton && show(chatMaxButton);
+        BUTTONS.settings.pushToTalk && show(pushToTalkDiv);
     }
     if (DetectRTC.browser.name != 'Safari') {
         document.onfullscreenchange = () => {
@@ -1107,6 +1115,7 @@ function handleButtons() {
         rc.updatePeerInfo(peer_name, socket.id, 'hand', false);
     };
     startAudioButton.onclick = () => {
+        if (isPushToTalkActive) return;
         setAudioButtonsDisabled(true);
         if (!isEnumerateAudioDevices) initEnumerateAudioDevices();
         rc.produce(RoomClient.mediaType.audio, microphoneSelect.value);
@@ -1114,6 +1123,7 @@ function handleButtons() {
         // rc.resumeProducer(RoomClient.mediaType.audio);
     };
     stopAudioButton.onclick = () => {
+        if (isPushToTalkActive) return;
         setAudioButtonsDisabled(true);
         rc.closeProducer(RoomClient.mediaType.audio);
         rc.updatePeerInfo(peer_name, socket.id, 'audio', false);
@@ -1410,6 +1420,43 @@ function handleSelects() {
         rc.attachSinkId(rc.myAudioEl, initSpeakerSelect.value);
         lS.setLocalStorageDevices(lS.MEDIA_TYPE.speaker, initSpeakerSelect.selectedIndex, initSpeakerSelect.value);
     };
+    switchPushToTalk.onchange = (e) => {
+        const producerExist = rc.producerExist(RoomClient.mediaType.audio);
+        if (!producerExist && !isPushToTalkActive) {
+            console.log('Push-to-talk: start audio producer');
+            setAudioButtonsDisabled(true);
+            if (!isEnumerateAudioDevices) initEnumerateAudioDevices();
+            rc.produce(RoomClient.mediaType.audio, microphoneSelect.value);
+            rc.updatePeerInfo(peer_name, socket.id, 'audio', true);
+        }
+        isPushToTalkActive = !isPushToTalkActive;
+        if (producerExist && !isPushToTalkActive) {
+            console.log('Push-to-talk: resume audio producer');
+            rc.resumeProducer(RoomClient.mediaType.audio);
+            rc.updatePeerInfo(peer_name, socket.id, 'audio', true);
+        }
+        e.target.blur(); // Removes focus from the element
+        console.log(`Push-to-talk enabled: ${isPushToTalkActive}`);
+    };
+    document.addEventListener('keydown', (e) => {
+        if (!isPushToTalkActive) return;
+        if (e.code === 'Space') {
+            if (isSpaceDown) return;
+            rc.resumeProducer(RoomClient.mediaType.audio);
+            rc.updatePeerInfo(peer_name, socket.id, 'audio', true);
+            isSpaceDown = true;
+            console.log('Push-to-talk: audio resumed');
+        }
+    });
+    document.addEventListener('keyup', (e) => {
+        if (!isPushToTalkActive) return;
+        if (e.code === 'Space') {
+            rc.pauseProducer(RoomClient.mediaType.audio);
+            rc.updatePeerInfo(peer_name, socket.id, 'audio', false);
+            isSpaceDown = false;
+            console.log('Push-to-talk: audio paused');
+        }
+    });
     // room
     switchLobby.onchange = (e) => {
         isLobbyEnabled = e.currentTarget.checked;
@@ -1417,18 +1464,21 @@ function handleSelects() {
         rc.lobbyToggle();
         lsSettings.lobby = isLobbyEnabled;
         lS.setSettings(lsSettings);
+        e.target.blur();
     };
     switchPitchBar.onchange = (e) => {
         isPitchBarEnabled = e.currentTarget.checked;
         rc.roomMessage('pitchBar', isPitchBarEnabled);
         lsSettings.pitch_bar = isPitchBarEnabled;
         lS.setSettings(lsSettings);
+        e.target.blur();
     };
     switchSounds.onchange = (e) => {
         isSoundEnabled = e.currentTarget.checked;
         rc.roomMessage('sounds', isSoundEnabled);
         lsSettings.sounds = isSoundEnabled;
         lS.setSettings(lsSettings);
+        e.target.blur();
     };
     // styling
     BtnAspectRatio.onchange = () => {
@@ -1468,6 +1518,7 @@ function handleSelects() {
         } else {
             userLog('info', 'Chat not will be shown, when you receive a message', 'top-end');
         }
+        e.target.blur();
     };
     // whiteboard options
     wbDrawingColorEl.onchange = () => {

public/js/RoomClient.js

@@ -1319,6 +1319,10 @@ class RoomClient {
         resizeVideoMedia();
     }
 
+    producerExist(type) {
+        return this.producerLabel.has(type);
+    }
+
     closeThenProduce(type, deviceId = null, swapCamera = false) {
         this.closeProducer(type);
         setTimeout(function () {

public/js/Rules.js

@@ -28,6 +28,7 @@ const BUTTONS = {
         unlockRoomButton: true,
         lobbyButton: true,
         tabRecording: true,
+        pushToTalk: true,
     },
     producerVideo: {
         videoPictureInPicture: true,

public/views/Room.html

@@ -341,6 +341,24 @@ access to use this app.
                             </button>
                             <br />
                         </div>
+                        <div id="pushToTalkDiv" class="hidden">
+                            <hr style="border: 1px solid grey" />
+                            <table class="settingsTable">
+                                <tr id="ptButton">
+                                    <td class="width-150">
+                                        <div class="title">
+                                            <i class="fa-solid fa-hand-pointer"></i>
+                                            <p>Push to talk</p>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <div class="form-check form-switch form-switch-md title">
+                                            <input id="switchPushToTalk" class="form-check-input" type="checkbox" />
+                                        </div>
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
                         <br />
                     </div>