initial commit

2023-03-06 19:12:54 +02:00
commit 9ac446ef9b
6 changed files with 175 additions and 0 deletions
--- a/web/client.html
+++ b/web/client.html
@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Real-time Speech-to-Text</title>
+    <style>
+      .recording {
+        background-color: red;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Real-time Speech-to-Text</h1>
+    <p id="connection-status">WebSocket disconnected</p>
+    <button id="record-button" disabled > Start Recording</button>
+    <p id="transcription"></p>
+    <script>
+        let socket = new WebSocket('ws://localhost:8081');
+        let audioRecorder;
+        let recording = false;
+        let recordButton;
+        let connectionStatus;
+
+        function connect(socket) {
+            console.log("trying to connect to server");
+            socket.onopen = () => {
+                console.log("WebSocket connection opened.");
+                connectionStatus.innerHTML = "Connected";
+                recordButton.disabled = false;
+            };
+            socket.onmessage = (event) => {
+                transcription.innerHTML = event.data;
+            };
+            socket.onclose = () => {
+                console.log("WebSocket connection closed");
+                connectionStatus.innerHTML = "Disconnected";
+                recordButton.disabled = true;
+                setTimeout(connect, 5000);
+            };
+        }
+
+        function startRecording() {
+            recording = true;
+            navigator.mediaDevices.getUserMedia({ audio: true })
+                .then((stream) => {
+                    audioRecorder = new MediaRecorder(stream);
+                    audioRecorder.start();
+                    audioRecorder.addEventListener('dataavailable', (event) => {
+                        console.log("Sent some audio data to server.");
+                        socket.send(event.data);
+                    });
+                });
+            recordButton.classList.add("recording");
+            recordButton.innerHTML = "Stop Recording";
+        }
+
+        function stopRecording() {
+            recording = false;
+            audioRecorder.stop();
+            recordButton.classList.remove("recording");
+            recordButton.innerHTML = "Start Recording";
+        }
+
+        function toggleRecording() {
+            if (recording) {
+                stopRecording();
+            } else {
+                startRecording();
+            }
+        }
+
+        window.onload = () => {
+            recordButton = document.getElementById("record-button");
+            recordButton.addEventListener('click', toggleRecording);
+            connectionStatus = document.getElementById("connection-status");
+            connect(socket);
+        };
+    </script>
+    <script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"></script>
+  </body>
+</html>