Remove browser call-in page
This commit is contained in:
@@ -1,155 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Call In - Luke at the Roost</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #1a1a2e;
|
||||
--bg-light: #252547;
|
||||
--accent: #e94560;
|
||||
--text: #fff;
|
||||
--text-muted: #888;
|
||||
--radius: 8px;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.container {
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.subtitle {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 30px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #444;
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-light);
|
||||
color: var(--text);
|
||||
font-size: 1em;
|
||||
outline: none;
|
||||
}
|
||||
.form-group input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.call-btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.call-btn:hover { opacity: 0.9; }
|
||||
.call-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.hangup-btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
background: #c0392b;
|
||||
color: #fff;
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 12px;
|
||||
display: none;
|
||||
}
|
||||
.hangup-btn:hover { opacity: 0.9; }
|
||||
.status {
|
||||
margin-top: 20px;
|
||||
padding: 16px;
|
||||
background: var(--bg-light);
|
||||
border-radius: var(--radius);
|
||||
display: none;
|
||||
}
|
||||
.status.visible { display: block; }
|
||||
.status-label {
|
||||
font-size: 0.85em;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.status-text {
|
||||
font-size: 1.1em;
|
||||
font-weight: 500;
|
||||
}
|
||||
.on-air .status-text {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
.mic-meter {
|
||||
margin-top: 16px;
|
||||
height: 6px;
|
||||
background: #333;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
.mic-meter.visible { display: block; }
|
||||
.mic-meter-fill {
|
||||
height: 100%;
|
||||
background: #2ecc71;
|
||||
width: 0%;
|
||||
transition: width 0.1s;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Luke at the Roost</h1>
|
||||
<p class="subtitle">Call in to the show</p>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="text" id="caller-name" placeholder="Your name" maxlength="30" autocomplete="off">
|
||||
</div>
|
||||
|
||||
<button id="call-btn" class="call-btn">Call In</button>
|
||||
<button id="hangup-btn" class="hangup-btn">Hang Up</button>
|
||||
|
||||
<div id="status" class="status">
|
||||
<div class="status-label">Status</div>
|
||||
<div id="status-text" class="status-text">Connecting...</div>
|
||||
</div>
|
||||
|
||||
<div id="mic-meter" class="mic-meter">
|
||||
<div id="mic-meter-fill" class="mic-meter-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/call-in.js?v=6"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,293 +0,0 @@
|
||||
/**
|
||||
* Call-In Page — Browser WebSocket audio streaming
|
||||
* Captures mic via AudioWorklet, sends Int16 PCM 16kHz mono over WebSocket.
|
||||
* Receives Int16 PCM 16kHz mono back for playback.
|
||||
*/
|
||||
|
||||
let ws = null;
|
||||
let audioCtx = null;
|
||||
let micStream = null;
|
||||
let workletNode = null;
|
||||
let playbackNode = null;
|
||||
let callerId = null;
|
||||
|
||||
const callBtn = document.getElementById('call-btn');
|
||||
const hangupBtn = document.getElementById('hangup-btn');
|
||||
const statusEl = document.getElementById('status');
|
||||
const statusText = document.getElementById('status-text');
|
||||
const nameInput = document.getElementById('caller-name');
|
||||
const micMeter = document.getElementById('mic-meter');
|
||||
const micMeterFill = document.getElementById('mic-meter-fill');
|
||||
|
||||
callBtn.addEventListener('click', startCall);
|
||||
hangupBtn.addEventListener('click', hangUp);
|
||||
nameInput.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') startCall();
|
||||
});
|
||||
|
||||
async function startCall() {
|
||||
const name = nameInput.value.trim() || 'Anonymous';
|
||||
callBtn.disabled = true;
|
||||
setStatus('Connecting...', false);
|
||||
|
||||
try {
|
||||
// Get mic access
|
||||
micStream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: { echoCancellation: true, noiseSuppression: true, sampleRate: 16000 }
|
||||
});
|
||||
|
||||
// Set up AudioContext
|
||||
audioCtx = new AudioContext({ sampleRate: 48000 });
|
||||
|
||||
// Register worklet processors inline via blob
|
||||
const processorCode = `
|
||||
// --- Capture processor: downsample to 16kHz, emit small chunks ---
|
||||
class CallerProcessor extends AudioWorkletProcessor {
|
||||
constructor() {
|
||||
super();
|
||||
this.buffer = [];
|
||||
this.targetSamples = 960; // 60ms at 16kHz
|
||||
}
|
||||
process(inputs) {
|
||||
const input = inputs[0][0];
|
||||
if (!input) return true;
|
||||
|
||||
// Downsample with averaging (anti-aliased)
|
||||
const step = Math.floor(sampleRate / 16000);
|
||||
for (let i = 0; i + step <= input.length; i += step) {
|
||||
let sum = 0;
|
||||
for (let j = 0; j < step; j++) {
|
||||
sum += input[i + j];
|
||||
}
|
||||
this.buffer.push(sum / step);
|
||||
}
|
||||
|
||||
while (this.buffer.length >= this.targetSamples) {
|
||||
const chunk = this.buffer.splice(0, this.targetSamples);
|
||||
const int16 = new Int16Array(chunk.length);
|
||||
for (let i = 0; i < chunk.length; i++) {
|
||||
const s = Math.max(-1, Math.min(1, chunk[i]));
|
||||
int16[i] = s < 0 ? s * 32768 : s * 32767;
|
||||
}
|
||||
this.port.postMessage(int16.buffer, [int16.buffer]);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
registerProcessor('caller-processor', CallerProcessor);
|
||||
|
||||
// --- Playback processor: ring buffer with 16kHz->sampleRate upsampling ---
|
||||
class PlaybackProcessor extends AudioWorkletProcessor {
|
||||
constructor() {
|
||||
super();
|
||||
this.ringSize = 16000 * 10; // 10s ring buffer at 16kHz
|
||||
this.ring = new Float32Array(this.ringSize);
|
||||
this.writePos = 0;
|
||||
this.readPos = 0;
|
||||
this.available = 0;
|
||||
this.started = false;
|
||||
this.jitterMs = 100; // buffer 100ms before starting playback
|
||||
this.jitterSamples = Math.floor(16000 * this.jitterMs / 1000);
|
||||
|
||||
this.port.onmessage = (e) => {
|
||||
const data = e.data;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.ring[this.writePos] = data[i];
|
||||
this.writePos = (this.writePos + 1) % this.ringSize;
|
||||
}
|
||||
this.available += data.length;
|
||||
if (this.available > this.ringSize) {
|
||||
// Overflow — skip ahead
|
||||
this.available = this.ringSize;
|
||||
this.readPos = (this.writePos - this.ringSize + this.ringSize) % this.ringSize;
|
||||
}
|
||||
};
|
||||
}
|
||||
process(inputs, outputs) {
|
||||
const output = outputs[0][0];
|
||||
if (!output) return true;
|
||||
|
||||
// Wait for jitter buffer to fill before starting
|
||||
if (!this.started) {
|
||||
if (this.available < this.jitterSamples) {
|
||||
output.fill(0);
|
||||
return true;
|
||||
}
|
||||
this.started = true;
|
||||
}
|
||||
|
||||
const ratio = 16000 / sampleRate;
|
||||
const srcNeeded = Math.ceil(output.length * ratio);
|
||||
|
||||
if (this.available >= srcNeeded) {
|
||||
for (let i = 0; i < output.length; i++) {
|
||||
const srcPos = i * ratio;
|
||||
const idx = Math.floor(srcPos);
|
||||
const frac = srcPos - idx;
|
||||
const p0 = (this.readPos + idx) % this.ringSize;
|
||||
const p1 = (p0 + 1) % this.ringSize;
|
||||
output[i] = this.ring[p0] * (1 - frac) + this.ring[p1] * frac;
|
||||
}
|
||||
this.readPos = (this.readPos + srcNeeded) % this.ringSize;
|
||||
this.available -= srcNeeded;
|
||||
} else {
|
||||
// Underrun — silence, reset jitter buffer
|
||||
output.fill(0);
|
||||
this.started = false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
registerProcessor('playback-processor', PlaybackProcessor);
|
||||
`;
|
||||
const blob = new Blob([processorCode], { type: 'application/javascript' });
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
await audioCtx.audioWorklet.addModule(blobUrl);
|
||||
URL.revokeObjectURL(blobUrl);
|
||||
|
||||
// Connect mic to worklet
|
||||
const source = audioCtx.createMediaStreamSource(micStream);
|
||||
workletNode = new AudioWorkletNode(audioCtx, 'caller-processor');
|
||||
|
||||
// Connect WebSocket
|
||||
const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
ws = new WebSocket(`${proto}//${location.host}/api/caller/stream`);
|
||||
ws.binaryType = 'arraybuffer';
|
||||
|
||||
ws.onopen = () => {
|
||||
ws.send(JSON.stringify({ type: 'join', name }));
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
if (typeof event.data === 'string') {
|
||||
handleControlMessage(JSON.parse(event.data));
|
||||
} else {
|
||||
handleAudioData(event.data);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
setStatus('Disconnected', false);
|
||||
cleanup();
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
setStatus('Connection error', false);
|
||||
cleanup();
|
||||
};
|
||||
|
||||
// Forward mic audio to WebSocket
|
||||
workletNode.port.onmessage = (e) => {
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(e.data);
|
||||
}
|
||||
};
|
||||
|
||||
source.connect(workletNode);
|
||||
// Don't connect worklet to destination — we don't want to hear our own mic
|
||||
|
||||
// Set up playback worklet for received audio
|
||||
playbackNode = new AudioWorkletNode(audioCtx, 'playback-processor');
|
||||
playbackNode.connect(audioCtx.destination);
|
||||
|
||||
// Show mic meter
|
||||
const analyser = audioCtx.createAnalyser();
|
||||
analyser.fftSize = 256;
|
||||
source.connect(analyser);
|
||||
startMicMeter(analyser);
|
||||
|
||||
// UI
|
||||
nameInput.disabled = true;
|
||||
hangupBtn.style.display = 'block';
|
||||
|
||||
} catch (err) {
|
||||
console.error('Call error:', err);
|
||||
setStatus('Failed: ' + err.message, false);
|
||||
callBtn.disabled = false;
|
||||
cleanup();
|
||||
}
|
||||
}
|
||||
|
||||
function handleControlMessage(msg) {
|
||||
if (msg.status === 'queued') {
|
||||
callerId = msg.caller_id;
|
||||
setStatus(`Waiting in queue (position ${msg.position})...`, false);
|
||||
} else if (msg.status === 'on_air') {
|
||||
setStatus('ON AIR', true);
|
||||
} else if (msg.status === 'disconnected') {
|
||||
setStatus('Disconnected', false);
|
||||
cleanup();
|
||||
}
|
||||
}
|
||||
|
||||
function handleAudioData(buffer) {
|
||||
if (!playbackNode) return;
|
||||
|
||||
// Convert Int16 PCM to Float32 and send to playback worklet
|
||||
const int16 = new Int16Array(buffer);
|
||||
const float32 = new Float32Array(int16.length);
|
||||
for (let i = 0; i < int16.length; i++) {
|
||||
float32[i] = int16[i] / 32768;
|
||||
}
|
||||
playbackNode.port.postMessage(float32, [float32.buffer]);
|
||||
}
|
||||
|
||||
function hangUp() {
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
ws.close();
|
||||
}
|
||||
setStatus('Disconnected', false);
|
||||
cleanup();
|
||||
}
|
||||
|
||||
function cleanup() {
|
||||
if (workletNode) {
|
||||
workletNode.disconnect();
|
||||
workletNode = null;
|
||||
}
|
||||
if (playbackNode) {
|
||||
playbackNode.disconnect();
|
||||
playbackNode = null;
|
||||
}
|
||||
if (micStream) {
|
||||
micStream.getTracks().forEach(t => t.stop());
|
||||
micStream = null;
|
||||
}
|
||||
if (audioCtx) {
|
||||
audioCtx.close().catch(() => {});
|
||||
audioCtx = null;
|
||||
}
|
||||
ws = null;
|
||||
callerId = null;
|
||||
callBtn.disabled = false;
|
||||
nameInput.disabled = false;
|
||||
hangupBtn.style.display = 'none';
|
||||
micMeter.classList.remove('visible');
|
||||
}
|
||||
|
||||
function setStatus(text, isOnAir) {
|
||||
statusEl.classList.add('visible');
|
||||
statusText.textContent = text;
|
||||
if (isOnAir) {
|
||||
statusEl.classList.add('on-air');
|
||||
} else {
|
||||
statusEl.classList.remove('on-air');
|
||||
}
|
||||
}
|
||||
|
||||
function startMicMeter(analyser) {
|
||||
micMeter.classList.add('visible');
|
||||
const data = new Uint8Array(analyser.frequencyBinCount);
|
||||
|
||||
function update() {
|
||||
if (!analyser || !audioCtx) return;
|
||||
analyser.getByteFrequencyData(data);
|
||||
let sum = 0;
|
||||
for (let i = 0; i < data.length; i++) sum += data[i];
|
||||
const avg = sum / data.length;
|
||||
const pct = Math.min(100, (avg / 128) * 100);
|
||||
micMeterFill.style.width = pct + '%';
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
update();
|
||||
}
|
||||
Reference in New Issue
Block a user