/* ===================================================================== TELEFONIEREN IM CHAT (18.09.2026) Filipe: „ich will dass du das nimmst was man selbst in die app reinsetzten kann, nicht meinen pc belastet und trotzdem vielleicht in gruppe, mit video oder einzelnd." DER TON GEHT NICHT ÜBER DEN SERVER. Er geht direkt von Browser zu Browser. Der Server reicht nur die Verbindungsdaten weiter -- ein paar Kilobyte je Anruf, danach ist er aus dem Spiel. Das ist die Antwort auf „nicht meinen PC belasten": Bei zwei Teilnehmern kodiert jedes Gerät genau einen Strom und dekodiert einen, wie bei jedem gewöhnlichen Videoanruf. --------------------------------------------------------------------- WARUM EINE VERBINDUNG JE GEGENÜBER Bei drei Leuten baut jeder mit jedem eine eigene Verbindung auf -- `verbindungen` ist deshalb eine Karte von Personennummer auf RTCPeerConnection und keine einzelne Variable. Mit einer einzelnen ginge zu zweit alles gut, und beim dritten Teilnehmer wäre die erste Verbindung stillschweigend überschrieben: Man sieht sich zu dritt im Kasten und hört nur einen. --------------------------------------------------------------------- WER RUFT AN, WER ANTWORTET Bei WebRTC muss genau EINER das Angebot machen, sonst reden beide gleichzeitig („glare"): Zwei Angebote heben sich auf, und die Verbindung kommt nie zustande. DIE REGEL IST DIE KLEINERE NUMMER. Wer die niedrigere Personennummer hat, macht das Angebot; der andere wartet. Das ist willkürlich, aber es ist auf beiden Seiten OHNE ABSPRACHE dieselbe Entscheidung -- und genau das braucht man hier. Eine Absprache darüber wäre wieder eine Nachricht, die verlorengehen kann. ===================================================================== */ (() => { 'use strict'; if (!window.RTCPeerConnection) return; // sehr alter Browser const $ = (id) => document.getElementById(id); /* Was der Server über die Verbindungsadressen sagt. */ let adressen = []; let nurGleichesNetz = false; let gruppeMax = 4; /* Der laufende Anruf. `null`, wenn keiner läuft. */ let anruf = null; // { raumId, video, verbindungen: Map, stroeme: Map, eigener } let ichId = null; const el = (art, klasse, text) => { const k = document.createElement(art); if (klasse) k.className = klasse; if (text != null) k.textContent = text; return k; }; /* ---------- Der Kasten ------------------------------------------------ */ function kastenBauen() { let k = $('anruf'); if (k) return k; k = el('div', 'anruf'); k.id = 'anruf'; k.hidden = true; k.setAttribute('role', 'dialog'); k.setAttribute('aria-label', 'Anruf'); k.innerHTML = `
Verbindung …
`; document.body.append(k); $('anruf-ton').addEventListener('click', tonSchalten); $('anruf-video').addEventListener('click', videoSchalten); $('anruf-auflegen').addEventListener('click', () => auflegen(true)); return k; } const lage = (text) => { const l = $('anruf-lage'); if (l) l.textContent = text; }; /* ---------- Die Gegenstelle ------------------------------------------- */ function verbindungFuer(wer) { if (anruf.verbindungen.has(wer)) return anruf.verbindungen.get(wer); const v = new RTCPeerConnection({ iceServers: adressen }); anruf.verbindungen.set(wer, v); /* Den eigenen Ton (und Bild) hineingeben. */ for (const spur of anruf.eigener.getTracks()) v.addTrack(spur, anruf.eigener); /* DIE VERBINDUNGSWEGE. Jeder gefundene Weg wird einzeln geschickt, sobald er da ist -- nicht gesammelt am Ende. Wer wartet, bis alle gefunden sind, wartet auf den langsamsten, und das sind mehrere Sekunden Stille am Anfang jedes Gesprächs. */ v.onicecandidate = (e) => { if (e.candidate) schicken(wer, { weg: e.candidate }); }; v.ontrack = (e) => { anruf.stroeme.set(wer, e.streams[0]); leuteZeichnen(); }; v.onconnectionstatechange = () => { if (v.connectionState === 'connected') lage('Verbunden'); /* `failed` heisst: Es kommt nichts mehr. Das gehoert gesagt -- ein Kasten, der ewig „Verbindung …" zeigt, laesst einen warten, wo nichts mehr kommt. */ if (v.connectionState === 'failed') { lage(nurGleichesNetz ? 'Keine Verbindung – dafür fehlt noch ein Vermittlungsserver.' : 'Keine Verbindung.'); } }; return v; } async function angebotMachen(wer) { const v = verbindungFuer(wer); const angebot = await v.createOffer(); await v.setLocalDescription(angebot); schicken(wer, { angebot: v.localDescription }); } async function signalVerarbeiten(von, inhalt) { if (!anruf) return; const v = verbindungFuer(von); try { if (inhalt.angebot) { await v.setRemoteDescription(inhalt.angebot); const antwort = await v.createAnswer(); await v.setLocalDescription(antwort); schicken(von, { antwort: v.localDescription }); } else if (inhalt.antwort) { await v.setRemoteDescription(inhalt.antwort); } else if (inhalt.weg) { /* Ein Weg kann eintreffen, bevor die Beschreibung da ist -- dann wirft addIceCandidate. Das ist kein Fehler, sondern Reihenfolge; er wird beim nächsten Versuch ohnehin wieder angeboten. */ await v.addIceCandidate(inhalt.weg).catch(() => {}); } } catch (f) { console.warn('[anruf] Signal:', f?.message); } } const schicken = (an, inhalt) => fetch(`/workspace/api/anruf/${anruf.raumId}/signal`, { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ an, inhalt }), }).catch(() => {}); /* ---------- Anfangen und Aufhören -------------------------------------- */ async function eigenenStromHolen(mitVideo) { try { return await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true }, video: mitVideo ? { width: { ideal: 640 }, height: { ideal: 480 } } : false, }); } catch (f) { /* DER HÄUFIGSTE FALL IST NICHT „KAPUTT", SONDERN „ABGELEHNT". Ein „ging nicht" wäre hier die unbrauchbarste Auskunft von allen -- man sucht dann am Gerät statt an der Berechtigung. */ if (f?.name === 'NotAllowedError') { throw new Error('Der Browser lässt das Mikrofon nicht zu. ' + 'Im Schloss-Symbol neben der Adresse freigeben.'); } if (f?.name === 'NotFoundError') { throw new Error('Kein Mikrofon gefunden.'); } throw new Error('Das Mikrofon ließ sich nicht öffnen.'); } } async function starten(raumId, mitVideo) { if (anruf) return; kastenBauen(); $('anruf').hidden = false; lage('Mikrofon …'); let eigener; try { eigener = await eigenenStromHolen(mitVideo); } catch (f) { lage(f.message); setTimeout(() => { if (!anruf) $('anruf').hidden = true; }, 6000); return; } anruf = { raumId, video: mitVideo, verbindungen: new Map(), stroeme: new Map(), eigener, beginn: Date.now() }; $('anruf-video').hidden = !mitVideo; if (mitVideo) $('anruf-video').setAttribute('aria-pressed', 'true'); lage('Es klingelt …'); uhrLaufen(); const a = await fetch(`/workspace/api/anruf/${raumId}/start`, { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ video: mitVideo }), }).catch(() => null); if (!a || !a.ok) { const d = a ? await a.json().catch(() => ({})) : {}; lage(d.fehler || 'Der Anruf ließ sich nicht starten.'); setTimeout(() => auflegen(false), 5000); return; } leuteZeichnen(); } async function annehmen(raumId) { const a = await fetch(`/workspace/api/anruf/${raumId}/dabei`, { method: 'POST', credentials: 'same-origin', }).catch(() => null); if (!a || !a.ok) { const d = a ? await a.json().catch(() => ({})) : {}; window.anrufMeldung?.(d.fehler || 'Der Anruf ist schon vorbei.'); klingelnAus(); return; } const d = await a.json(); kastenBauen(); $('anruf').hidden = false; let eigener; try { eigener = await eigenenStromHolen(d.video); } catch (f) { lage(f.message); await fetch(`/workspace/api/anruf/${raumId}/ende`, { method: 'POST', credentials: 'same-origin' }).catch(() => {}); setTimeout(() => { $('anruf').hidden = true; }, 6000); return; } anruf = { raumId, video: d.video, verbindungen: new Map(), stroeme: new Map(), eigener, beginn: Date.now() }; $('anruf-video').hidden = !d.video; if (d.video) $('anruf-video').setAttribute('aria-pressed', 'true'); klingelnAus(); lage('Verbindung …'); uhrLaufen(); /* Mit allen, die schon dabei sind, eine Verbindung aufbauen -- aber das ANGEBOT macht nur, wer die kleinere Nummer hat. */ for (const p of d.wer || []) { if (p.id === ichId) continue; if (ichId < p.id) angebotMachen(p.id); else verbindungFuer(p.id); } leuteZeichnen(); } async function auflegen(melden) { klingelnAus(); if (!anruf) { const k = $('anruf'); if (k) k.hidden = true; return; } const raumId = anruf.raumId; for (const v of anruf.verbindungen.values()) { try { v.close(); } catch { /* egal */ } } for (const s of anruf.eigener.getTracks()) s.stop(); anruf = null; const k = $('anruf'); if (k) k.hidden = true; uhrStoppen(); if (melden) { await fetch(`/workspace/api/anruf/${raumId}/ende`, { method: 'POST', credentials: 'same-origin' }).catch(() => {}); } } /* ---------- Was man sieht --------------------------------------------- */ function leuteZeichnen() { const ziel = $('anruf-leute'); if (!ziel || !anruf) return; ziel.textContent = ''; /* Das eigene Bild zuerst und stumm -- sich selbst zu hören ist ein Echo, das jedes Gespräch unbrauchbar macht. */ if (anruf.video) { const eigen = el('video', 'anruf__bild anruf__bild--ich'); eigen.autoplay = true; eigen.playsInline = true; eigen.muted = true; eigen.srcObject = anruf.eigener; ziel.append(eigen); } for (const [wer, strom] of anruf.stroeme) { if (anruf.video) { const v = el('video', 'anruf__bild'); v.autoplay = true; v.playsInline = true; v.srcObject = strom; ziel.append(v); } else { const t = el('audio'); t.autoplay = true; t.srcObject = strom; ziel.append(t); ziel.append(el('span', 'anruf__name', 'Verbunden')); } void wer; } } let uhr = null; function uhrLaufen() { uhrStoppen(); uhr = setInterval(() => { if (!anruf) return uhrStoppen(); const s = Math.floor((Date.now() - anruf.beginn) / 1000); const z = $('anruf-zeit'); if (z) z.textContent = `${String(Math.floor(s / 60)).padStart(2, '0')}:` + `${String(s % 60).padStart(2, '0')}`; }, 1000); } function uhrStoppen() { if (uhr) { clearInterval(uhr); uhr = null; } } function tonSchalten() { if (!anruf) return; const an = anruf.eigener.getAudioTracks().some((s) => s.enabled); for (const s of anruf.eigener.getAudioTracks()) s.enabled = !an; const k = $('anruf-ton'); k.textContent = an ? 'Mikro aus' : 'Mikro an'; k.setAttribute('aria-pressed', String(!an)); } function videoSchalten() { if (!anruf) return; const an = anruf.eigener.getVideoTracks().some((s) => s.enabled); for (const s of anruf.eigener.getVideoTracks()) s.enabled = !an; const k = $('anruf-video'); k.textContent = an ? 'Kamera aus' : 'Kamera an'; k.setAttribute('aria-pressed', String(!an)); } /* ---------- Es klingelt ------------------------------------------------ */ function klingelnZeigen(raumId, von, mitVideo) { klingelnAus(); const k = el('div', 'anruf-klingelt'); k.id = 'anruf-klingelt'; k.setAttribute('role', 'alertdialog'); k.append(el('p', 'anruf-klingelt__wer', `${von?.name || 'Jemand'} ruft an${mitVideo ? ' – mit Video' : ''}`)); const reihe = el('div', 'anruf-klingelt__knoepfe'); const ja = el('button', 'anruf-klingelt__ja', 'Rangehen'); ja.type = 'button'; ja.addEventListener('click', () => annehmen(raumId)); const nein = el('button', 'anruf-klingelt__nein', 'Ablehnen'); nein.type = 'button'; nein.addEventListener('click', async () => { klingelnAus(); await fetch(`/workspace/api/anruf/${raumId}/ende`, { method: 'POST', credentials: 'same-origin' }).catch(() => {}); }); reihe.append(ja, nein); k.append(reihe); document.body.append(k); /* Nach der Klingelzeit von selbst weg -- sonst steht die Einladung zu einem Gespräch da, an dem längst niemand mehr teilnimmt. */ setTimeout(klingelnAus, 46000); } function klingelnAus() { $('anruf-klingelt')?.remove(); } /* ---------- Was vom Server kommt --------------------------------------- */ async function ereignis(d) { if (!d || typeof d !== 'object') return; if (d.art === 'klingelt') { if (d.von?.id === ichId) return; // der eigene Anruf if (anruf) return; // telefoniert schon klingelnZeigen(d.raum_id, d.von, d.video); return; } if (d.art === 'dabei') { if (!anruf || d.raum_id !== anruf.raumId) return; if (d.person?.id === ichId) return; lage('Verbunden'); /* Der Neue: Angebot macht, wer die kleinere Nummer hat. */ if (ichId < d.person.id) angebotMachen(d.person.id); else verbindungFuer(d.person.id); return; } if (d.art === 'signal') { if (!anruf || d.raum_id !== anruf.raumId) return; if (d.an !== ichId) return; await signalVerarbeiten(d.von, d.inhalt); return; } if (d.art === 'weg' || d.art === 'ende') { if (!anruf || d.raum_id !== anruf.raumId) { if (d.art === 'ende') klingelnAus(); return; } if (d.person?.id === ichId) return; const v = anruf.verbindungen.get(d.person?.id); if (v) { try { v.close(); } catch { /* egal */ } } anruf.verbindungen.delete(d.person?.id); anruf.stroeme.delete(d.person?.id); leuteZeichnen(); if (d.art === 'ende' || !anruf.stroeme.size) { lage('Gespräch beendet'); setTimeout(() => auflegen(false), 1200); } } } /* ---------- Nach außen -------------------------------------------------- */ window.anrufStarten = starten; window.anrufEreignis = ereignis; window.anrufLaeuft = () => !!anruf; window.anrufBereit = () => adressen.length > 0 || nurGleichesNetz; (async () => { try { const a = await fetch('/workspace/api/anruf/adressen', { credentials: 'same-origin' }); if (a.ok) { const d = await a.json(); adressen = d.adressen || []; nurGleichesNetz = !!d.nur_gleiches_netz; gruppeMax = d.gruppe_max || 4; } } catch { /* dann eben ohne -- im selben Netz geht es trotzdem */ } try { const i = await fetch('/workspace/api/ich', { credentials: 'same-origin' }); if (i.ok) ichId = (await i.json())?.id ?? null; } catch { /* der Chat holt es ohnehin auch */ } void gruppeMax; })(); /* Wer die Seite verlässt, legt auf. Ohne das bleibt er für die anderen „dabei", und sie warten auf jemanden, der weg ist. */ window.addEventListener('pagehide', () => { if (anruf) auflegen(true); }); })();