[mirotalksfu] - add chat speech recognition

README.md

@@ -31,6 +31,7 @@ Open the app with the following **supported browsers** and many more.
 -   Screen Sharing to present documents, slides, and more ...
 -   File Sharing, share any files to your participants in the room
 -   Chat with Emoji Picker to show you feeling and the possibility to Save the conversations
+-   Speech recognition, ability to identify a person based on their voiceprint.
 -   Advance collaborative whiteboard for the teachers
 -   Select Microphone - Speaker and Video source
 -   Recording your Screen, Audio, or Video

public/js/Room.js

@@ -93,6 +93,8 @@ function initClient() {
         setTippy('participantsRefreshBtn', 'Refresh', 'top');
         setTippy('chatMessage', 'Press enter to send', 'top-start');
         setTippy('chatSendButton', 'Send', 'top');
+        setTippy('chatSpeechStartButton', 'Start speech recognition', 'top');
+        setTippy('chatSpeechStopButton', 'Stop speech recognition', 'top');
         setTippy('chatEmojiButton', 'Emoji', 'top');
         setTippy('chatCloseEmojiButton', 'Close emoji', 'top');
         setTippy('chatCleanButton', 'Clean', 'bottom');
@@ -469,6 +471,9 @@ function roomIsReady() {
     show(chatButton);
     show(chatSendButton);
     show(chatEmojiButton);
+    if (isWebkitSpeechRecognitionSupported) {
+        show(chatSpeechStartButton);
+    }
     if (DetectRTC.isMobileDevice) {
         show(swapCameraButton);
         setChatSize();
@@ -633,6 +638,12 @@ function handleButtons() {
     chatCloseEmojiButton.onclick = () => {
         rc.toggleChatEmoji();
     };
+    chatSpeechStartButton.onclick = () => {
+        startSpeech(true);
+    };
+    chatSpeechStopButton.onclick = () => {
+        startSpeech(false);
+    };
     fullScreenButton.onclick = () => {
         rc.toggleFullScreen();
     };

public/js/SpeechRec.js

@@ -0,0 +1,44 @@
+let isWebkitSpeechRecognitionSupported = false;
+let recognition;
+
+if ('webkitSpeechRecognition' in window) {
+    recognition = new webkitSpeechRecognition();
+
+    recognition.maxAlternatives = 1;
+    recognition.continuous = true;
+
+    recognition.onstart = function () {
+        console.log('Start speech recognition');
+        hide(chatSpeechStartButton);
+        show(chatSpeechStopButton);
+    };
+
+    recognition.onresult = (e) => {
+        let current = e.resultIndex;
+        let transcript = e.results[current][0].transcript;
+        chatMessage.value = transcript;
+    };
+
+    recognition.onerror = function (event) {
+        console.warn('Speech recognition error', event.error);
+    };
+
+    recognition.onend = function () {
+        console.log('Stop speech recognition');
+        show(chatSpeechStartButton);
+        hide(chatSpeechStopButton);
+    };
+
+    isWebkitSpeechRecognitionSupported = true;
+    console.info('Browser supports webkitSpeechRecognition');
+} else {
+    console.warn('This browser not supports webkitSpeechRecognition');
+}
+
+function startSpeech(action) {
+    if (action) {
+        recognition.start();
+    } else {
+        recognition.stop();
+    }
+}

public/view/Room.html

@@ -75,6 +75,7 @@
         <script src="../sfu/MediasoupClient.js"></script>
         <script src="../js/Room.js"></script>
         <script src="../js/RoomClient.js"></script>
+        <script src="../js/SpeechRec.js"></script>
         <script src="../js/VideoGrid.js"></script>
         <script src="https://kit.fontawesome.com/d2f1016e6f.js" crossorigin="anonymous"></script>
         <script src="https://cdn.rawgit.com/muaz-khan/DetectRTC/master/DetectRTC.js"></script>
@@ -336,6 +337,12 @@ access to use this app.
                     <button id="chatEmojiButton" class="hidden">
                         <i class="fas fa-smile"></i>
                     </button>
+                    <button id="chatSpeechStartButton" class="hidden">
+                        <i class="fas fa-microphone-slash"></i>
+                    </button>
+                    <button id="chatSpeechStopButton" class="hidden">
+                        <i class="fas fa-microphone"></i>
+                    </button>
                     <button id="chatSendButton" class="hidden">
                         <i class="fas fa-paper-plane"></i>
                     </button>