admin-valentin/WhisperLiveKit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

throw errors if websocket connection fails

Browse source
This commit is contained in:
Quentin Fuxa 2024-12-24 19:31:08 +01:00
parent 0553b75415
commit 50bbd26517
1 changed files with 218 additions and 156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
src/live_transcription.html
View file

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Audio Transcription</title> <title>Audio Transcription</title>
<style> <style>
body { body {
@ -54,7 +54,8 @@
align-items: flex-start; align-items: flex-start;
gap: 5px; gap: 5px;
} }
#chunkSelector, #websocketInput { #chunkSelector,
#websocketInput {
font-size: 16px; font-size: 16px;
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
@ -64,7 +65,8 @@
#websocketInput { #websocketInput {
width: 200px; width: 200px;
} }
#chunkSelector:focus, #websocketInput:focus { #chunkSelector:focus,
#websocketInput:focus {
outline: none; outline: none;
border-color: #007bff; border-color: #007bff;
} }
@ -99,7 +101,14 @@
<div id="transcriptions"></div> <div id="transcriptions"></div>
<script> <script>
let isRecording = false, websocket, recorder, chunkDuration = 1000, websocketUrl = "ws://localhost:8000/ws"; let isRecording = false,
websocket,
recorder,
chunkDuration = 1000,
websocketUrl = "ws://localhost:8000/ws";
// Tracks whether the user voluntarily closed the WebSocket
let userClosing = false;
const statusText = document.getElementById("status"); const statusText = document.getElementById("status");
const recordButton = document.getElementById("recordButton"); const recordButton = document.getElementById("recordButton");
@ -114,13 +123,47 @@
chunkDuration = parseInt(chunkSelector.value); chunkDuration = parseInt(chunkSelector.value);
}); });
// Update WebSocket URL dynamically // Update WebSocket URL dynamically, with some basic checks
websocketInput.addEventListener("change", () => { websocketInput.addEventListener("change", () => {
websocketUrl = websocketInput.value; const urlValue = websocketInput.value.trim();
// Quick check to see if it starts with ws:// or wss://
if (!urlValue.startsWith("ws://") && !urlValue.startsWith("wss://")) {
statusText.textContent =
"Invalid WebSocket URL. It should start with ws:// or wss://";
return;
}
websocketUrl = urlValue;
statusText.textContent = "WebSocket URL updated. Ready to connect.";
}); });
function setupWebSocket() { function setupWebSocket() {
try {
websocket = new WebSocket(websocketUrl); websocket = new WebSocket(websocketUrl);
} catch (error) {
statusText.textContent =
"Invalid WebSocket URL. Please check the URL and try again.";
throw error;
}
websocket.onopen = () => {
statusText.textContent = "Connected to server";
};
websocket.onclose = (event) => {
if (userClosing) {
statusText.textContent = "WebSocket closed by user.";
} else {
statusText.textContent = "Disconnected from server (unexpected).";
}
userClosing = false;
};
websocket.onerror = () => {
statusText.textContent = "Error connecting to WebSocket";
stopRecording();
};
websocket.onmessage = (event) => { websocket.onmessage = (event) => {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
const { transcription, buffer } = data; const { transcription, buffer } = data;
@ -134,42 +177,61 @@
<span class="buffer">${buffer}</span> <span class="buffer">${buffer}</span>
`; `;
}; };
websocket.onerror = () => {
statusText.textContent = "Error connecting to WebSocket";
stopRecording(); // Stop recording if WebSocket fails
};
} }
async function startRecording() { async function startRecording() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
recorder = new MediaRecorder(stream, { mimeType: "audio/webm" }); recorder = new MediaRecorder(stream, { mimeType: "audio/webm" });
recorder.ondataavailable = (e) => websocket?.send(e.data); recorder.ondataavailable = (e) => {
recorder.start(chunkDuration); // Use dynamic chunk duration if (websocket && websocket.readyState === WebSocket.OPEN) {
websocket.send(e.data);
}
};
recorder.start(chunkDuration);
isRecording = true; isRecording = true;
updateUI(); updateUI();
} catch (err) {
statusText.textContent =
"Error accessing microphone. Please allow microphone access.";
}
} }
function stopRecording() { function stopRecording() {
userClosing = true;
recorder?.stop(); recorder?.stop();
recorder = null; recorder = null;
isRecording = false; isRecording = false;
websocket?.close(); websocket?.close();
websocket = null; websocket = null;
updateUI(); updateUI();
} }
async function toggleRecording() { async function toggleRecording() {
if (isRecording) stopRecording(); if (!isRecording) {
else { fullTranscription = "";
transcriptionsDiv.innerHTML = "";
try {
setupWebSocket(); setupWebSocket();
} catch (err) {
return;
}
await startRecording(); await startRecording();
} else {
stopRecording();
} }
} }
function updateUI() { function updateUI() {
recordButton.classList.toggle("recording", isRecording); recordButton.classList.toggle("recording", isRecording);
statusText.textContent = isRecording ? "Recording..." : "Click to start transcription"; statusText.textContent = isRecording
? "Recording..."
: "Click to start transcription";
} }
recordButton.addEventListener("click", toggleRecording); recordButton.addEventListener("click", toggleRecording);