g

templates/index.html

@@ -39,6 +39,7 @@
         const stopButton = document.getElementById('stopButton');
         const consoleDiv = document.getElementById('console');
         let websocket = null;
+        let mediaRecorder = null;
 
         function logMessage(message, type) {
             const log = document.createElement('p');
@@ -59,6 +60,16 @@
             stopButton.disabled = false;
 
             try {
+                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                logMessage('Microphone access granted', 'info');
+
+                mediaRecorder = new MediaRecorder(stream);
+                mediaRecorder.ondataavailable = function(event) {
+                    if (websocket && websocket.readyState === WebSocket.OPEN) {
+                        websocket.send(event.data);
+                    }
+                };
+
                 const response = await fetch(`${window.location.origin}/start_detection`, {
                     method: 'POST',
                 });
@@ -78,6 +89,8 @@
                 websocket.onclose = function() {
                     logMessage('WebSocket connection closed', 'info');
                 };
+
+                mediaRecorder.start(3000);  // Start recording with 3-second intervals
             } catch (error) {
                 logMessage(`Error: ${error.message}`, 'error');
             }
@@ -94,6 +107,10 @@
             stopButton.disabled = true;
 
             try {
+                if (mediaRecorder && mediaRecorder.state === 'recording') {
+                    mediaRecorder.stop();
+                }
+
                 const response = await fetch(`${window.location.origin}/stop_detection`, {
                     method: 'POST',
                 });