Replace HTTP audio stream with WebSocket + Web Audio API
HTTP Ogg-Streaming hat zu viel Latenz durch Browser-Buffering. Neuer Ansatz: Raw PCM S16_LE über WebSocket, Web Audio API spielt direkt ab. Latenz ~100-200ms statt mehrere Sekunden. - /audio-ws: WebSocket-Endpunkt, streamt arecord PCM-Chunks (512 Bytes = ~32ms) - live.html: startAudio() öffnet WebSocket, dekodiert PCM zu Float32, plant Playback mit AudioContext.createBufferSource() in 40ms-Queue Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Julian Vollmer
parent
fa9888f83e
commit
e4b8cc55f7
54
app/main.py
54
app/main.py
|
|
@ -12,8 +12,10 @@ import time
|
|||
import os
|
||||
import threading
|
||||
from flask import Flask, Response, render_template, request, jsonify
|
||||
from flask_sock import Sock
|
||||
|
||||
app = Flask(__name__)
|
||||
sock = Sock(app)
|
||||
|
||||
STREAM_WIDTH = 1280
|
||||
STREAM_HEIGHT = 720
|
||||
|
|
@ -105,56 +107,40 @@ def stream():
|
|||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Audio-Stream (Ogg/Opus via ffmpeg)
|
||||
# Audio-Stream via WebSocket (Raw PCM → Web Audio API)
|
||||
# Minimale Latenz: kein HTTP-Buffering, kein Codec-Delay
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
AUDIO_DEVICE = "plughw:2,0"
|
||||
AUDIO_SAMPLERATE = 16000
|
||||
AUDIO_CHUNK = 512 # ~32ms bei 16kHz
|
||||
|
||||
|
||||
def generate_audio():
|
||||
cmd = [
|
||||
"ffmpeg",
|
||||
"-fflags", "nobuffer",
|
||||
"-flags", "low_delay",
|
||||
"-f", "alsa",
|
||||
"-thread_queue_size", "128",
|
||||
"-i", AUDIO_DEVICE,
|
||||
"-ar", str(AUDIO_SAMPLERATE),
|
||||
"-ac", "1",
|
||||
"-c:a", "libopus",
|
||||
"-b:a", "24k",
|
||||
"-frame_duration", "20",
|
||||
"-page_duration", "20000",
|
||||
"-flush_packets", "1",
|
||||
"-f", "ogg",
|
||||
"-",
|
||||
]
|
||||
@sock.route("/audio-ws")
|
||||
def audio_ws(ws):
|
||||
process = subprocess.Popen(
|
||||
cmd, stdout=subprocess.PIPE, stderr=subprocess.DEVNULL
|
||||
[
|
||||
"arecord",
|
||||
"-D", AUDIO_DEVICE,
|
||||
"-f", "S16_LE",
|
||||
"-r", str(AUDIO_SAMPLERATE),
|
||||
"-c", "1",
|
||||
],
|
||||
stdout=subprocess.PIPE,
|
||||
stderr=subprocess.DEVNULL,
|
||||
)
|
||||
try:
|
||||
while True:
|
||||
chunk = process.stdout.read(4096)
|
||||
chunk = process.stdout.read(AUDIO_CHUNK)
|
||||
if not chunk:
|
||||
break
|
||||
yield chunk
|
||||
ws.send(chunk)
|
||||
except Exception:
|
||||
pass
|
||||
finally:
|
||||
process.kill()
|
||||
|
||||
|
||||
@app.route("/audio")
|
||||
def audio():
|
||||
return Response(
|
||||
generate_audio(),
|
||||
mimetype="audio/ogg; codecs=opus",
|
||||
headers={
|
||||
"Cache-Control": "no-cache, no-store",
|
||||
"X-Accel-Buffering": "no",
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# WLAN-Verwaltung
|
||||
# ---------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -167,7 +167,6 @@
|
|||
<a class="btn" href="/">⚙ Einstellungen</a>
|
||||
</div>
|
||||
|
||||
<audio id="audio-stream" src="/audio" preload="none"></audio>
|
||||
|
||||
<script>
|
||||
// UI bei Tap/Klick kurz einblenden
|
||||
|
|
@ -193,24 +192,60 @@
|
|||
updateClock();
|
||||
setInterval(updateClock, 1000);
|
||||
|
||||
// Audio
|
||||
// Audio via WebSocket + Web Audio API (minimale Latenz)
|
||||
let audioOn = false;
|
||||
let audioCtx = null;
|
||||
let audioWs = null;
|
||||
let nextPlayTime = 0;
|
||||
const SAMPLE_RATE = 16000;
|
||||
|
||||
function toggleAudio() {
|
||||
const a = document.getElementById("audio-stream");
|
||||
const btn = document.getElementById("audio-btn");
|
||||
if (audioOn) {
|
||||
a.pause();
|
||||
a.src = "";
|
||||
stopAudio();
|
||||
btn.textContent = "🔇 Ton an";
|
||||
audioOn = false;
|
||||
} else {
|
||||
a.src = "/audio";
|
||||
a.play();
|
||||
startAudio();
|
||||
btn.textContent = "🔊 Ton aus";
|
||||
audioOn = true;
|
||||
}
|
||||
}
|
||||
|
||||
function startAudio() {
|
||||
audioCtx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: SAMPLE_RATE });
|
||||
nextPlayTime = audioCtx.currentTime;
|
||||
|
||||
const wsUrl = `ws://${location.host}/audio-ws`;
|
||||
audioWs = new WebSocket(wsUrl);
|
||||
audioWs.binaryType = "arraybuffer";
|
||||
|
||||
audioWs.onmessage = (event) => {
|
||||
const pcm16 = new Int16Array(event.data);
|
||||
const buffer = audioCtx.createBuffer(1, pcm16.length, SAMPLE_RATE);
|
||||
const data = buffer.getChannelData(0);
|
||||
for (let i = 0; i < pcm16.length; i++) {
|
||||
data[i] = pcm16[i] / 32768.0;
|
||||
}
|
||||
const source = audioCtx.createBufferSource();
|
||||
source.buffer = buffer;
|
||||
source.connect(audioCtx.destination);
|
||||
const now = audioCtx.currentTime;
|
||||
// Kleine Puffer-Queue (~40ms) damit keine Lücken entstehen
|
||||
if (nextPlayTime < now) nextPlayTime = now + 0.04;
|
||||
source.start(nextPlayTime);
|
||||
nextPlayTime += buffer.duration;
|
||||
};
|
||||
|
||||
audioWs.onerror = () => stopAudio();
|
||||
}
|
||||
|
||||
function stopAudio() {
|
||||
if (audioWs) { audioWs.close(); audioWs = null; }
|
||||
if (audioCtx) { audioCtx.close(); audioCtx = null; }
|
||||
nextPlayTime = 0;
|
||||
}
|
||||
|
||||
// Fullscreen
|
||||
function toggleFullscreen() {
|
||||
if (!document.fullscreenElement) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue