4de72e2d98
Web playback rewritten from push-scheduling to pull-based ring buffer:
- ScriptProcessorNode pulls frames from buffer every ~21ms
- Buffer capped at 10 frames (~200ms) — drops oldest on overflow
- Latency permanently bounded, no drift over time
Also: install ring crypto provider for rustls TLS on Linux,
build on debian-12 to match mequ glibc.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
227 lines
7.3 KiB
HTML
227 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WarzonePhone</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: #1a1a2e; color: #e0e0e0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
|
|
.container { text-align: center; max-width: 400px; padding: 2rem; }
|
|
h1 { font-size: 1.5rem; margin-bottom: 0.5rem; color: #00d4ff; }
|
|
.subtitle { color: #888; font-size: 0.85rem; margin-bottom: 2rem; }
|
|
#callBtn { background: #00d4ff; color: #1a1a2e; border: none; padding: 1rem 3rem; font-size: 1.2rem; border-radius: 50px; cursor: pointer; transition: all 0.2s; }
|
|
#callBtn:hover { background: #00b8d4; transform: scale(1.05); }
|
|
#callBtn.active { background: #ff4444; color: white; }
|
|
#callBtn:disabled { background: #444; color: #888; cursor: not-allowed; }
|
|
.status { margin-top: 1.5rem; font-size: 0.9rem; color: #888; min-height: 1.5rem; }
|
|
.stats { margin-top: 1rem; font-size: 0.8rem; color: #666; font-family: monospace; }
|
|
.level { margin-top: 1rem; height: 6px; background: #333; border-radius: 3px; overflow: hidden; }
|
|
.level-bar { height: 100%; background: #00d4ff; width: 0%; transition: width 50ms; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>WarzonePhone</h1>
|
|
<p class="subtitle">Lossy VoIP Protocol</p>
|
|
<button id="callBtn" onclick="toggleCall()">Connect</button>
|
|
<div class="level"><div class="level-bar" id="levelBar"></div></div>
|
|
<div class="status" id="status"></div>
|
|
<div class="stats" id="stats"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const SAMPLE_RATE = 48000;
|
|
const FRAME_SIZE = 960; // 20ms at 48kHz
|
|
|
|
let ws = null;
|
|
let audioCtx = null;
|
|
let mediaStream = null;
|
|
let scriptNode = null;
|
|
let active = false;
|
|
let framesSent = 0;
|
|
let framesRecv = 0;
|
|
let startTime = 0;
|
|
|
|
// Playback buffer
|
|
let playbackQueue = [];
|
|
let isPlaying = false;
|
|
|
|
function setStatus(msg) { document.getElementById('status').textContent = msg; }
|
|
function setStats(msg) { document.getElementById('stats').textContent = msg; }
|
|
|
|
function toggleCall() {
|
|
if (active) { stopCall(); }
|
|
else { startCall(); }
|
|
}
|
|
|
|
async function startCall() {
|
|
const btn = document.getElementById('callBtn');
|
|
btn.disabled = true;
|
|
setStatus('Requesting microphone...');
|
|
|
|
try {
|
|
mediaStream = await navigator.mediaDevices.getUserMedia({
|
|
audio: { sampleRate: SAMPLE_RATE, channelCount: 1, echoCancellation: true, noiseSuppression: true }
|
|
});
|
|
} catch(e) {
|
|
setStatus('Mic access denied: ' + e.message);
|
|
btn.disabled = false;
|
|
return;
|
|
}
|
|
|
|
// Connect WebSocket
|
|
const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const wsUrl = proto + '//' + location.host + '/ws';
|
|
setStatus('Connecting to relay...');
|
|
|
|
ws = new WebSocket(wsUrl);
|
|
ws.binaryType = 'arraybuffer';
|
|
|
|
ws.onopen = () => {
|
|
setStatus('Connected — speaking...');
|
|
btn.textContent = 'Disconnect';
|
|
btn.classList.add('active');
|
|
btn.disabled = false;
|
|
active = true;
|
|
framesSent = 0;
|
|
framesRecv = 0;
|
|
startTime = Date.now();
|
|
startAudioCapture();
|
|
startStatsUpdate();
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
// Received PCM audio from server (s16le bytes)
|
|
const pcmData = new Int16Array(event.data);
|
|
framesRecv++;
|
|
playAudio(pcmData);
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
setStatus('Disconnected');
|
|
stopCall();
|
|
};
|
|
|
|
ws.onerror = (e) => {
|
|
setStatus('Connection error');
|
|
stopCall();
|
|
};
|
|
}
|
|
|
|
function stopCall() {
|
|
active = false;
|
|
const btn = document.getElementById('callBtn');
|
|
btn.textContent = 'Connect';
|
|
btn.classList.remove('active');
|
|
btn.disabled = false;
|
|
|
|
if (scriptNode) { scriptNode.disconnect(); scriptNode = null; }
|
|
if (audioCtx) { audioCtx.close(); audioCtx = null; }
|
|
if (mediaStream) { mediaStream.getTracks().forEach(t => t.stop()); mediaStream = null; }
|
|
if (ws) { ws.close(); ws = null; }
|
|
playbackQueue = [];
|
|
setStatus('');
|
|
setStats('');
|
|
}
|
|
|
|
function startAudioCapture() {
|
|
audioCtx = new AudioContext({ sampleRate: SAMPLE_RATE });
|
|
console.log('AudioContext sampleRate:', audioCtx.sampleRate);
|
|
setStatus('Connected — mic active (sample rate: ' + audioCtx.sampleRate + 'Hz)');
|
|
const source = audioCtx.createMediaStreamSource(mediaStream);
|
|
|
|
// ScriptProcessorNode requires power-of-2 buffer. We use 1024 and
|
|
// accumulate samples, sending exactly FRAME_SIZE (960) chunks.
|
|
const CAPTURE_BUF = 1024;
|
|
scriptNode = audioCtx.createScriptProcessor(CAPTURE_BUF, 1, 1);
|
|
|
|
let accumulator = new Float32Array(0);
|
|
|
|
scriptNode.onaudioprocess = (e) => {
|
|
if (!active || !ws || ws.readyState !== WebSocket.OPEN) return;
|
|
|
|
const input = e.inputBuffer.getChannelData(0);
|
|
|
|
// Append to accumulator
|
|
const newAcc = new Float32Array(accumulator.length + input.length);
|
|
newAcc.set(accumulator);
|
|
newAcc.set(input, accumulator.length);
|
|
accumulator = newAcc;
|
|
|
|
// Send complete FRAME_SIZE chunks
|
|
while (accumulator.length >= FRAME_SIZE) {
|
|
const frame = accumulator.slice(0, FRAME_SIZE);
|
|
accumulator = accumulator.slice(FRAME_SIZE);
|
|
|
|
const pcm = new Int16Array(FRAME_SIZE);
|
|
for (let i = 0; i < FRAME_SIZE; i++) {
|
|
pcm[i] = Math.max(-32768, Math.min(32767, Math.round(frame[i] * 32767)));
|
|
}
|
|
|
|
// Update level meter
|
|
let maxVal = 0;
|
|
for (let i = 0; i < pcm.length; i++) maxVal = Math.max(maxVal, Math.abs(pcm[i]));
|
|
document.getElementById('levelBar').style.width = (maxVal / 32768 * 100) + '%';
|
|
|
|
ws.send(pcm.buffer);
|
|
framesSent++;
|
|
}
|
|
};
|
|
|
|
source.connect(scriptNode);
|
|
scriptNode.connect(audioCtx.destination);
|
|
}
|
|
|
|
// Ring buffer playback using AudioWorklet-style approach
|
|
let playbackBuffer = [];
|
|
let playbackNode = null;
|
|
|
|
function initPlayback() {
|
|
if (playbackNode) return;
|
|
// Use a ScriptProcessorNode as a pull-based audio sink.
|
|
// It asks for audio every ~21ms (1024 samples at 48kHz).
|
|
// We feed it from our ring buffer of received frames.
|
|
playbackNode = audioCtx.createScriptProcessor(1024, 1, 1);
|
|
playbackNode.onaudioprocess = (e) => {
|
|
const output = e.outputBuffer.getChannelData(0);
|
|
// Pull from buffer — drop old frames if we're behind
|
|
while (playbackBuffer.length > 10) {
|
|
playbackBuffer.shift(); // drop oldest, keeps latency bounded
|
|
}
|
|
if (playbackBuffer.length > 0) {
|
|
const frame = playbackBuffer.shift();
|
|
// frame is 960 samples, output is 1024 — copy what we can
|
|
const len = Math.min(frame.length, output.length);
|
|
for (let i = 0; i < len; i++) output[i] = frame[i];
|
|
for (let i = len; i < output.length; i++) output[i] = 0;
|
|
} else {
|
|
// Underrun — silence
|
|
for (let i = 0; i < output.length; i++) output[i] = 0;
|
|
}
|
|
};
|
|
playbackNode.connect(audioCtx.destination);
|
|
}
|
|
|
|
function playAudio(pcmInt16) {
|
|
if (!audioCtx) return;
|
|
initPlayback();
|
|
|
|
const floatData = new Float32Array(pcmInt16.length);
|
|
for (let i = 0; i < pcmInt16.length; i++) {
|
|
floatData[i] = pcmInt16[i] / 32768.0;
|
|
}
|
|
playbackBuffer.push(floatData);
|
|
}
|
|
|
|
function startStatsUpdate() {
|
|
const interval = setInterval(() => {
|
|
if (!active) { clearInterval(interval); return; }
|
|
const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
|
|
setStats(`${elapsed}s | sent: ${framesSent} | recv: ${framesRecv} | loss: ${framesSent > 0 ? ((1 - framesRecv/framesSent) * 100).toFixed(1) : 0}%`);
|
|
}, 1000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|