feat: HTTPS web frontend (self-signed) + server-side token endpoint
- nginx serves the UI over HTTPS on 8090 with a self-signed cert (browsers require a secure context for microphone access) - added /token endpoint (tiny Python HTTP server) that signs LiveKit JWTs server-side, keeping the API secret out of the browser - app.js now fetches a signed token from /token and uses wss:// when the page is served over HTTPS - supervisord runs the token-server as a fourth process
This commit is contained in:
Shane
+43
-70
@@ -1,35 +1,30 @@
|
||||
// Voice Assistant — LiveKit client
|
||||
const { Room, RoomEvent, RemoteParticipant, AudioPlaybackStats } = LivekitClient;
|
||||
const { Room, RoomEvent } = LivekitClient;
|
||||
|
||||
// ── Config (injected from environment at build time, or hardcoded for LAN) ──
|
||||
const LIVEKIT_URL = `ws://${window.location.hostname}:7880`;
|
||||
const API_KEY = "devkey";
|
||||
// ── Config ──────────────────────────────────────────────────────────────────
|
||||
// LiveKit server runs on the same host. When served over HTTPS, use wss://.
|
||||
const LIVEKIT_URL = `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.hostname}:7880`;
|
||||
const ROOM_NAME = "voice-room";
|
||||
const AGENT_NAME = "voice-assistant";
|
||||
|
||||
// ── State ──
|
||||
// ── State ───────────────────────────────────────────────────────────────────
|
||||
let room = null;
|
||||
let agentParticipant = null;
|
||||
|
||||
// ── DOM ──
|
||||
// ── DOM ─────────────────────────────────────────────────────────────────────
|
||||
const startBtn = document.getElementById("startBtn");
|
||||
const stopBtn = document.getElementById("stopBtn");
|
||||
const statusEl = document.getElementById("status");
|
||||
const messagesEl = document.getElementById("messages");
|
||||
const voiceSelect = document.getElementById("voiceSelect");
|
||||
|
||||
// ── Voice switching ──
|
||||
// ── Voice switching ─────────────────────────────────────────────────────────
|
||||
voiceSelect.addEventListener("change", () => {
|
||||
const voice = voiceSelect.value;
|
||||
if (room && agentParticipant) {
|
||||
// Send data message to agent to switch voice
|
||||
room.localParticipant.publishData(
|
||||
JSON.stringify({ type: "set_voice", voice }).encodeInto(new Uint8Array()),
|
||||
[agentParticipant]
|
||||
);
|
||||
sendVoiceMessage(voice);
|
||||
addMessage("system", `Voice changed to ${voice}`);
|
||||
} else {
|
||||
// Save preference for next session
|
||||
localStorage.setItem("preferred_voice", voice);
|
||||
}
|
||||
});
|
||||
@@ -40,31 +35,32 @@ if (savedVoice) {
|
||||
voiceSelect.value = savedVoice;
|
||||
}
|
||||
|
||||
// ── Start ──
|
||||
// ── Start ───────────────────────────────────────────────────────────────────
|
||||
startBtn.addEventListener("click", async () => {
|
||||
try {
|
||||
statusEl.textContent = "Connecting...";
|
||||
|
||||
|
||||
// Get a signed access token from the token endpoint
|
||||
const token = await fetchToken(ROOM_NAME);
|
||||
|
||||
room = new Room({
|
||||
adaptiveStream: true,
|
||||
dynacast: true,
|
||||
});
|
||||
|
||||
// Listen for transcripts from the agent
|
||||
// Listen for agent participant joining
|
||||
room.on(RoomEvent.ParticipantConnected, (participant) => {
|
||||
if (participant.identity === AGENT_NAME || participant.kind === "agent") {
|
||||
agentParticipant = participant;
|
||||
statusEl.textContent = "Agent connected";
|
||||
|
||||
// Send current voice selection
|
||||
statusEl.textContent = "Agent connected — speak now";
|
||||
|
||||
// Send current voice selection to the agent
|
||||
const voice = voiceSelect.value;
|
||||
room.localParticipant.publishData(
|
||||
JSON.stringify({ type: "set_voice", voice }).encodeInto(new Uint8Array()),
|
||||
[participant]
|
||||
);
|
||||
sendVoiceMessage(voice);
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for transcripts from the agent
|
||||
room.on(RoomEvent.DataReceived, (payload, participant) => {
|
||||
try {
|
||||
const msg = JSON.parse(payload.decodeToString());
|
||||
@@ -86,16 +82,14 @@ startBtn.addEventListener("click", async () => {
|
||||
statusEl.textContent = "Disconnected";
|
||||
startBtn.disabled = false;
|
||||
stopBtn.disabled = true;
|
||||
agentParticipant = null;
|
||||
});
|
||||
|
||||
await room.connect(LIVEKIT_URL, {
|
||||
accessToken: generateToken(),
|
||||
accessToken: token,
|
||||
autoSubscribe: true,
|
||||
});
|
||||
|
||||
// Request agent join
|
||||
await requestAgentJoin();
|
||||
|
||||
statusEl.textContent = "Connected — speak now";
|
||||
startBtn.disabled = true;
|
||||
stopBtn.disabled = false;
|
||||
@@ -106,7 +100,7 @@ startBtn.addEventListener("click", async () => {
|
||||
}
|
||||
});
|
||||
|
||||
// ── Stop ──
|
||||
// ── Stop ────────────────────────────────────────────────────────────────────
|
||||
stopBtn.addEventListener("click", () => {
|
||||
if (room) {
|
||||
room.disconnect();
|
||||
@@ -118,55 +112,34 @@ stopBtn.addEventListener("click", () => {
|
||||
stopBtn.disabled = true;
|
||||
});
|
||||
|
||||
// ── Helper: generate a LiveKit access token (simplified for LAN dev) ──
|
||||
// In production, this would be done server-side. For LAN dev, we use a static token.
|
||||
function generateToken() {
|
||||
// The LiveKit server with devkey/devsecret will accept any token signed with that key.
|
||||
// For simplicity in this LAN setup, we'll let the server handle auth.
|
||||
return "dev-token";
|
||||
// ── Helper: fetch a signed access token from the token endpoint ────────────
|
||||
async function fetchToken(roomName) {
|
||||
const resp = await fetch("/token", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ room: roomName }),
|
||||
});
|
||||
if (!resp.ok) throw new Error(`Token endpoint returned ${resp.status}`);
|
||||
const data = await resp.json();
|
||||
return data.token;
|
||||
}
|
||||
|
||||
// ── Helper: request agent to join the room ──
|
||||
async function requestAgentJoin() {
|
||||
// Send a data message to trigger agent dispatch
|
||||
if (room && room.localParticipant) {
|
||||
const msg = JSON.stringify({ type: "join_agent", agent: AGENT_NAME });
|
||||
room.localParticipant.publishData(
|
||||
msg.encodeInto(new Uint8Array()),
|
||||
[] // broadcast to all participants
|
||||
);
|
||||
}
|
||||
// ── Helper: send voice selection to the agent via data channel ─────────────
|
||||
function sendVoiceMessage(voice) {
|
||||
if (!room || !room.localParticipant) return;
|
||||
const payload = new TextEncoder().encode(JSON.stringify({ type: "set_voice", voice }));
|
||||
room.localParticipant.publishData(payload, {
|
||||
topic: "voice-control",
|
||||
reliable: true,
|
||||
});
|
||||
}
|
||||
|
||||
// ── Helper: add a message to the transcript ──
|
||||
// ── Helper: add a message to the transcript ─────────────────────────────────
|
||||
function addMessage(role, text) {
|
||||
const div = document.createElement("div");
|
||||
div.className = `message ${role}`;
|
||||
div.innerHTML = `<span class="role">${role === "user" ? "You" : role === "agent" ? "Assistant" : "System"}</span> ${text}`;
|
||||
const label = role === "user" ? "You" : role === "agent" ? "Assistant" : "System";
|
||||
div.innerHTML = `<span class="role">${label}</span> ${text}`;
|
||||
messagesEl.appendChild(div);
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
}
|
||||
|
||||
// ── Capture user speech for transcript display ──
|
||||
// We'll use the Web Speech API as a fallback for showing what the user said.
|
||||
// The actual STT is handled by the agent's Azure STT pipeline.
|
||||
let recognition = null;
|
||||
if ("webkitSpeechRecognition" in window || "SpeechRecognition" in window) {
|
||||
const SpeechRec = window.SpeechRecognition || window.webkitSpeechRecognition;
|
||||
recognition = new SpeechRec();
|
||||
recognition.continuous = true;
|
||||
recognition.interimResults = true;
|
||||
recognition.lang = "en-US";
|
||||
|
||||
recognition.onresult = (event) => {
|
||||
for (let i = event.resultIndex; i < event.results.length; i++) {
|
||||
if (event.results[i].isFinal) {
|
||||
addMessage("user", event.results[i][0].transcript);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Start/stop recognition with the room connection
|
||||
const origConnect = Room.prototype.connect;
|
||||
// We'll start recognition when room connects
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user