DogFatherGitandClaude Opus 5
c87c396ef5
Filipe: „ist das normal dass es nicht mal klingelt wenn man anruft?"
Nein. Und der Grund war so einfach wie peinlich: Es gab ueberhaupt
keinen Ton. Weder beim Anrufer noch beim Angerufenen. Der Anruf zeigte
einen Kasten auf dem Bildschirm, sonst nichts -- wer nicht zufaellig
hinsah, merkte nichts, und wer anrief, wusste nie, ob ueberhaupt etwas
passiert.
Damit erklaert sich auch, warum heute Abend alles „kaputt" wirkte,
obwohl Verbindung, Raum, Anmeldung und Code stimmten: Ein stummes
Telefon ist von einem defekten nicht zu unterscheiden.
ZWEI TOENE, JE NACH SEITE:
Angerufener zwei weiche Toene (880/660 Hz), dann Pause -- alle
2,4 Sekunden, dazu Vibration, wo das Geraet sie kann.
Anrufer ein leiseres, langsameres Freizeichen (440 Hz). Ein
stiller Kasten mit laufender Uhr sagt nur, DASS etwas
passiert; ein Freizeichen sagt, was.
OHNE TONDATEI. Ein .mp3 waere eine Datei mehr im Netz, eine
Lizenzfrage und ein Ladefehler, der genau dann auffaellt, wenn man ihn
braucht. Zwei Sinustoene aus dem Browser reichen. Sanft ein- und
ausgeblendet, weil ein hart geschalteter Sinus knackt -- und das
Knacken ist das Unangenehme daran.
Der Ton hoert auf, sobald jemand rangeht (`dabei`), sobald die
Verbindung steht und beim Auflegen. Drei Stellen, weil ein
Freizeichen, das waehrend des Gespraechs weiterlaeuft, das ist, was
man an Telefonanlagen hasst.
EHRLICH DAZU: Browser lassen Ton erst zu, wenn jemand auf der Seite
etwas angeklickt hat. Wer die Seite gerade erst geoeffnet hat, hoert
unter Umstaenden nichts -- dann bleibt die Benachrichtigung des
Geraets der Weg. Das ist eine Regel des Browsers, keine Entscheidung
von uns.
Geprueft: pruef-anruf 100 -> 101. Gemessen wird am Oszillator, nicht
am Lautsprecher: Ob wirklich etwas zu hoeren ist, haengt an Geraet und
Lautstaerke -- dass die Seite Toene ERZEUGT, laesst sich messen.
Gegenprobe (Freizeichen ausgebaut): „0 Toene erzeugt", rot.
Co-Authored-By: Claude Opus 5 <[email protected]>
811 lines
32 KiB
JavaScript
811 lines
32 KiB
JavaScript
/* =====================================================================
|
||
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 }
|
||
|
||
/* =====================================================================
|
||
SIGNALE, DIE ZU FRÜH KOMMEN (18.09.2026)
|
||
|
||
GEFUNDEN IM DREIER-TEST, und es hätte jeden Anruf getroffen:
|
||
|
||
Wer rangeht, meldet dem Server „dabei". Der Anrufer bekommt das
|
||
sofort und schickt sein Angebot los. Der Angerufene braucht aber
|
||
noch ein bis zwei Sekunden, bis das Mikrofon offen ist -- und in
|
||
dieser Zeit ist `anruf` hier noch `null`.
|
||
|
||
Vorher stand in `signalVerarbeiten` ein `if (!anruf) return;`. Das
|
||
Angebot wurde damit STILL WEGGEWORFEN. Danach kommt keins mehr:
|
||
Der Anrufer hat seins geschickt und wartet. Beide Seiten zeigten
|
||
„Verbindung …", und es passierte nie wieder etwas.
|
||
|
||
In der Spur war es unübersehbar, sobald man hinsah:
|
||
|
||
ereignis:signal inhalt=angebot <- kommt an
|
||
ereignis:signal inhalt=weg
|
||
verbindung angelegt <- erst JETZT
|
||
|
||
Was zu früh kommt, wird deshalb aufgehoben statt verworfen -- und
|
||
abgearbeitet, sobald das Mikrofon steht. Ein Signal ist keine
|
||
Nachricht, die man wiederholen kann; wer es wegwirft, hat den
|
||
Anruf verloren. */
|
||
const wartend = []; // { von, inhalt }
|
||
|
||
async function wartendeAbarbeiten() {
|
||
const liste = wartend.splice(0, wartend.length);
|
||
for (const w of liste) {
|
||
/* Was zu einem anderen Gespräch gehört, wird verworfen -- und
|
||
zwar hier, wo `anruf` bekannt ist. */
|
||
if (!anruf || (w.raumId && w.raumId !== anruf.raumId)) continue;
|
||
/* NACHEINANDER, NICHT GLEICHZEITIG. Ein Verbindungsweg, der vor
|
||
der Beschreibung ankommt, wird abgewiesen -- und beim
|
||
parallelen Abarbeiten gewinnt oft der Weg. Die Reihenfolge,
|
||
in der sie eingetroffen sind, ist die richtige. */
|
||
await signalVerarbeiten(w.von, w.inhalt);
|
||
}
|
||
}
|
||
|
||
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 = `
|
||
<div class="anruf__kopf">
|
||
<span class="anruf__lage" id="anruf-lage">Verbindung …</span>
|
||
<span class="anruf__zeit" id="anruf-zeit"></span>
|
||
</div>
|
||
<div class="anruf__leute" id="anruf-leute"></div>
|
||
<div class="anruf__knoepfe">
|
||
<button type="button" class="anruf__knopf anruf__knopf--ton" id="anruf-ton"
|
||
aria-pressed="true">Mikro an</button>
|
||
<button type="button" class="anruf__knopf anruf__knopf--hoeren" id="anruf-hoeren"
|
||
aria-pressed="true">Lautsprecher an</button>
|
||
<button type="button" class="anruf__knopf anruf__knopf--video" id="anruf-video"
|
||
aria-pressed="false" hidden>Kamera an</button>
|
||
<button type="button" class="anruf__knopf anruf__knopf--auf" id="anruf-auflegen">Auflegen</button>
|
||
</div>`;
|
||
document.body.append(k);
|
||
$('anruf-ton').addEventListener('click', tonSchalten);
|
||
$('anruf-hoeren').addEventListener('click', hoerenSchalten);
|
||
$('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') {
|
||
/* Ab hier redet man miteinander -- ein Freizeichen daneben
|
||
waere das, was man an einer Telefonanlage hasst. */
|
||
tonAus();
|
||
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) {
|
||
/* NOCH NICHT BEREIT? AUFHEBEN, NICHT WEGWERFEN. Siehe oben --
|
||
genau hier ging jedes Angebot verloren, das ankam, während das
|
||
Mikrofon noch geöffnet wurde. */
|
||
if (!anruf) {
|
||
wartend.push({ von, inhalt });
|
||
console.info('[anruf] zu frueh, aufgehoben:', Object.keys(inhalt || {}).join('+'));
|
||
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) {
|
||
/* LAUT GENUG, UM ETWAS DAMIT ANZUFANGEN. Ein „Signal:
|
||
irgendwas" sagt nicht, WELCHER Schritt gescheitert ist -- und
|
||
bei WebRTC sind es immer dieselben drei, die in Frage kommen.
|
||
Die Art des Signals gehört dazu, sonst sucht man im
|
||
falschen. */
|
||
console.warn('[anruf] Signal von', von,
|
||
Object.keys(inhalt || {}).join('+'), '->', f?.name, 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 …');
|
||
/* Läuft NEBEN der Mikrofonfrage, nicht davor: Das Auffrischen
|
||
kostet sonst Zeit, in der nichts passiert -- und die Frage nach
|
||
dem Mikrofon dauert ohnehin länger als der kleine Abruf. */
|
||
const adressenFertig = adressenAuffrischen();
|
||
let eigener;
|
||
try {
|
||
eigener = await eigenenStromHolen(mitVideo);
|
||
} catch (f) {
|
||
lage(f.message);
|
||
setTimeout(() => { if (!anruf) $('anruf').hidden = true; }, 6000);
|
||
return;
|
||
}
|
||
await adressenFertig;
|
||
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 …');
|
||
/* DAS FREIZEICHEN. Ein stiller Kasten mit laufender Uhr sagt nur,
|
||
dass etwas passiert -- nicht, was. */
|
||
freiTon();
|
||
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;
|
||
}
|
||
await wartendeAbarbeiten();
|
||
leuteZeichnen();
|
||
}
|
||
|
||
async function annehmen(raumId) {
|
||
/* Auch hier auffrischen -- wer angerufen WIRD, braucht die
|
||
Vermittlung genauso. Beide Wege einzeln abgesichert, nicht nur
|
||
der, an den man zuerst denkt. */
|
||
const adressenFertig = adressenAuffrischen();
|
||
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();
|
||
await adressenFertig;
|
||
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);
|
||
}
|
||
/* Und jetzt das, was währenddessen schon eingetroffen ist. */
|
||
await wartendeAbarbeiten();
|
||
leuteZeichnen();
|
||
}
|
||
|
||
async function auflegen(melden) {
|
||
tonAus();
|
||
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;
|
||
/* Was noch wartet, gehoert zu einem Gespraech, das es nicht mehr
|
||
gibt. Bliebe es liegen, waere es beim naechsten Anruf das erste,
|
||
was verarbeitet wird -- mit einer Beschreibung, die zu niemandem
|
||
passt. */
|
||
wartend.length = 0;
|
||
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;
|
||
}
|
||
/* Der Zustand gilt auch fuer die Elemente, die es gerade eben noch
|
||
nicht gab -- und die Geraeteauswahl kann erst hier entstehen,
|
||
weil die Geraetenamen die Mikrofonerlaubnis voraussetzen. */
|
||
hoerenAnwenden();
|
||
ausgabeAnbieten();
|
||
}
|
||
|
||
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));
|
||
}
|
||
|
||
/* ---------- DER LAUTSPRECHER (18.09.2026) ------------------------------
|
||
|
||
Filipe: „die funktion lautsprecher fehlt."
|
||
|
||
Er ist das Gegenstueck zum Mikrofon: „Mikro aus" heisst, die
|
||
anderen hoeren MICH nicht -- „Lautsprecher aus" heisst, ICH hoere
|
||
sie nicht. Beides braucht man, aus verschiedenen Gruenden: Das
|
||
Mikro macht man aus, wenn es bei einem selbst laut ist; den
|
||
Lautsprecher, wenn nebenher etwas anderes laeuft oder jemand
|
||
ins Zimmer kommt.
|
||
|
||
WAS HIER BEWUSST NICHT STEHT: ein Umschalter zwischen Hoermuschel
|
||
und Freisprechen, wie ihn ein Telefon hat. Den gibt es im Browser
|
||
nicht. Auf dem iPhone entscheidet Safari selbst, wohin der Ton
|
||
geht; auf Android laesst das Betriebssystem einzelne Toene gar
|
||
nicht auf ein anderes Geraet legen. Ein Knopf, der dort nichts
|
||
tut, waere schlimmer als keiner -- man drueckt ihn und sucht den
|
||
Fehler dann bei sich.
|
||
|
||
Wo es GEHT (Rechner mit Chrome, Edge oder Safari), steht dafuer
|
||
eine echte Geraeteauswahl daneben -- und nur dort. */
|
||
|
||
/** Hoeren wir die anderen? Steht ausserhalb von `anruf`: Wer den Ton
|
||
* abgestellt hat, will ihn nicht beim naechsten Gespraech wieder
|
||
* an. */
|
||
let hoeren = true;
|
||
|
||
/** Auf welches Geraet der Ton geht. Leer = das des Systems. */
|
||
let ausgabe = '';
|
||
|
||
/** Setzt Stummschaltung und Geraet auf ALLE Toenelemente.
|
||
*
|
||
* Muss nach jedem `leuteZeichnen()` laufen: Das baut die Elemente
|
||
* neu, und neue Elemente wissen nichts von einer Einstellung, die
|
||
* vorher getroffen wurde. Genau daran scheitern solche Schalter
|
||
* sonst -- sie wirken, bis der Naechste dazukommt. */
|
||
function hoerenAnwenden() {
|
||
const ziel = $('anruf-leute');
|
||
if (!ziel) return;
|
||
for (const m of ziel.querySelectorAll('audio, video')) {
|
||
/* Das eigene Bild bleibt stumm, immer. Sich selbst zu hoeren ist
|
||
ein Echo, das jedes Gespraech unbrauchbar macht. */
|
||
if (m.classList.contains('anruf__bild--ich')) continue;
|
||
m.muted = !hoeren;
|
||
if (ausgabe && typeof m.setSinkId === 'function') {
|
||
m.setSinkId(ausgabe).catch(() => { /* Geraet weg -> Standardgeraet */ });
|
||
}
|
||
}
|
||
}
|
||
|
||
function hoerenSchalten() {
|
||
hoeren = !hoeren;
|
||
const k = $('anruf-hoeren');
|
||
if (k) {
|
||
k.textContent = hoeren ? 'Lautsprecher an' : 'Lautsprecher aus';
|
||
k.setAttribute('aria-pressed', String(hoeren));
|
||
}
|
||
hoerenAnwenden();
|
||
}
|
||
|
||
/** Baut die Geraeteauswahl -- oder eben nicht.
|
||
*
|
||
* SIE ERSCHEINT NUR, WENN ES ETWAS ZU WAEHLEN GIBT: wenn der Browser
|
||
* `setSinkId` kann UND mehr als ein Ausgabegeraet da ist. Eine
|
||
* Auswahl mit einem einzigen Eintrag ist keine Auswahl, sondern eine
|
||
* Behauptung -- und auf dem Handy waere sie eine falsche. */
|
||
async function ausgabeAnbieten() {
|
||
const kasten = $('anruf');
|
||
if (!kasten || $('anruf-ausgabe')) return;
|
||
if (typeof document.createElement('audio').setSinkId !== 'function') return;
|
||
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) return;
|
||
let geraete = [];
|
||
try {
|
||
geraete = (await navigator.mediaDevices.enumerateDevices())
|
||
.filter((g) => g.kind === 'audiooutput');
|
||
} catch { return; }
|
||
/* Namen gibt es erst, seit das Mikrofon erlaubt wurde -- im Anruf
|
||
ist das der Fall. Ohne Namen waere die Liste eine Reihe von
|
||
Nummern, und niemand wuesste, was er waehlt. */
|
||
if (geraete.length < 2 || !geraete.some((g) => g.label)) return;
|
||
|
||
const w = el('select', 'anruf__ausgabe');
|
||
w.id = 'anruf-ausgabe';
|
||
w.setAttribute('aria-label', 'Wohin der Ton geht');
|
||
for (const g of geraete) {
|
||
const o = document.createElement('option');
|
||
o.value = g.deviceId;
|
||
o.textContent = g.label || 'Gerät';
|
||
w.append(o);
|
||
}
|
||
w.value = ausgabe || geraete[0].deviceId;
|
||
w.addEventListener('change', () => { ausgabe = w.value; hoerenAnwenden(); });
|
||
const reihe = kasten.querySelector('.anruf__knoepfe');
|
||
/* VOR „Auflegen", nicht dahinter: Der Auflegen-Knopf sitzt per
|
||
`margin-inline-start: auto` ganz rechts. Wer danach anhaengt,
|
||
schiebt die Auswahl hinter den einzigen Knopf, der immer an
|
||
derselben Stelle stehen soll. */
|
||
if (reihe) reihe.insertBefore(w, reihe.querySelector('.anruf__knopf--auf'));
|
||
}
|
||
|
||
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();
|
||
/* UND ES KLINGELT WIRKLICH. Vorher stand hier nur ein Kasten --
|
||
wer nicht zufaellig hinsah, merkte nichts. */
|
||
klingelTon();
|
||
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);
|
||
}
|
||
/* ---------- DER KLINGELTON (18.09.2026) --------------------------
|
||
|
||
Filipe: „ist das normal dass es nicht mal klingelt wenn man
|
||
anruft?"
|
||
|
||
Nein. Es gab gar keinen Ton -- weder beim Anrufer noch beim
|
||
Angerufenen. Ein Anruf zeigte einen Kasten auf dem Bildschirm,
|
||
sonst nichts. Wer nicht zufaellig hinsah, merkte nichts; und wer
|
||
anrief, wusste nie, ob ueberhaupt etwas passiert. Genau das
|
||
fuehlt sich an wie „geht nicht".
|
||
|
||
OHNE TONDATEI. Ein Klingelton als .mp3 waere eine Datei mehr im
|
||
Netz, eine Lizenzfrage und ein Ladefehler, der genau dann
|
||
auffaellt, wenn man ihn braucht. Zwei Sinustoene aus dem Browser
|
||
reichen -- das ist, was ein Telefon auch tut.
|
||
|
||
LEISE UND KURZ. Kein durchdringendes Schrillen: zwei weiche
|
||
Toene, dann Pause. Das traegt durch einen Raum, ohne jemanden zu
|
||
erschrecken -- dieselbe Ueberlegung wie bei allem Sichtbaren hier.
|
||
|
||
WARUM ES TROTZDEM STUMM BLEIBEN KANN: Browser lassen Ton erst zu,
|
||
wenn jemand auf der Seite etwas angeklickt hat. Wer die Seite
|
||
gerade erst geoeffnet hat, hoert deshalb unter Umstaenden nichts
|
||
-- dann bleibt die Benachrichtigung des Geraets der Weg. Das ist
|
||
eine Regel des Browsers, keine Entscheidung von uns. */
|
||
|
||
let tonWerk = null; /* der Taktgeber, solange es klingelt */
|
||
let tonRaum = null; /* AudioContext -- erst bei Bedarf */
|
||
|
||
function tonAn(hoehe, laenge, lautstaerke) {
|
||
try {
|
||
if (!tonRaum) {
|
||
const K = window.AudioContext || window.webkitAudioContext;
|
||
if (!K) return;
|
||
tonRaum = new K();
|
||
}
|
||
if (tonRaum.state === 'suspended') tonRaum.resume().catch(() => {});
|
||
const o = tonRaum.createOscillator();
|
||
const v = tonRaum.createGain();
|
||
o.type = 'sine';
|
||
o.frequency.value = hoehe;
|
||
/* Sanft ein und aus: Ein hart geschalteter Sinus knackt, und
|
||
genau das Knacken ist das Unangenehme daran. */
|
||
const t = tonRaum.currentTime;
|
||
v.gain.setValueAtTime(0, t);
|
||
v.gain.linearRampToValueAtTime(lautstaerke, t + 0.03);
|
||
v.gain.linearRampToValueAtTime(0, t + laenge);
|
||
o.connect(v).connect(tonRaum.destination);
|
||
o.start(t);
|
||
o.stop(t + laenge + 0.05);
|
||
} catch { /* kein Ton -- die Benachrichtigung bleibt der Weg */ }
|
||
}
|
||
|
||
/** Es klingelt bei dem, der angerufen wird: zwei Toene, dann Pause. */
|
||
function klingelTon() {
|
||
tonAus();
|
||
const takt = () => { tonAn(880, 0.22, 0.16); setTimeout(() => tonAn(660, 0.26, 0.16), 300); };
|
||
takt();
|
||
tonWerk = setInterval(takt, 2400);
|
||
/* Und das Geraet darf mitvibrieren, wo es das kann. */
|
||
try { navigator.vibrate?.([250, 200, 250]); } catch { /* egal */ }
|
||
}
|
||
|
||
/** Das Freizeichen bei dem, der anruft -- leiser und langsamer.
|
||
*
|
||
* Damit er weiss, DASS es laeuft. Ein stiller Kasten mit einer
|
||
* laufenden Uhr sagt nur, dass etwas passiert; ein Freizeichen
|
||
* sagt, WAS. */
|
||
function freiTon() {
|
||
tonAus();
|
||
const takt = () => tonAn(440, 0.5, 0.07);
|
||
takt();
|
||
tonWerk = setInterval(takt, 3000);
|
||
}
|
||
|
||
function tonAus() {
|
||
if (tonWerk) { clearInterval(tonWerk); tonWerk = null; }
|
||
try { navigator.vibrate?.(0); } catch { /* egal */ }
|
||
}
|
||
|
||
function klingelnAus() { tonAus(); $('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') {
|
||
/* Jemand ist rangegangen -- auch wenn die Verbindung noch ein
|
||
paar Sekunden braucht, klingelt hier nichts mehr. */
|
||
tonAus();
|
||
if (!anruf || d.raum_id !== anruf.raumId) return;
|
||
if (d.person?.id === ichId) return;
|
||
/* NICHT „Verbunden" MELDEN, SOLANGE NICHTS VERBUNDEN IST.
|
||
|
||
Hier stand `lage('Verbunden')` -- gesetzt in dem Moment, in
|
||
dem jemand RANGEHT. Die Verbindung braucht danach aber noch
|
||
Sekunden, und bis dahin behauptete der Kasten etwas, das nicht
|
||
stimmte. Im Dreier-Test war das sofort zu sehen: „Verbunden"
|
||
stand da, und es kam kein Ton.
|
||
|
||
Den richtigen Zeitpunkt kennt nur die Verbindung selbst --
|
||
`onconnectionstatechange` meldet ihn (siehe oben). */
|
||
lage('Baut auf …');
|
||
/* 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 (d.an !== ichId) return;
|
||
/* HIER STAND `if (!anruf ...) return;` -- UND DAS WAR DER FEHLER.
|
||
|
||
Die Warteschlange eine Ebene tiefer nützte nichts, weil das
|
||
Signal hier schon verworfen wurde. Gefunden erst, als die
|
||
Diagnose zeigte, dass `signalVerarbeiten` NIE aufgerufen wird:
|
||
keine einzige Konsolenzeile, obwohl beide Zweige dort etwas
|
||
melden.
|
||
|
||
Der Raum lässt sich ohne `anruf` nicht prüfen -- deshalb
|
||
wandert er mit in die Warteschlange und wird beim Abarbeiten
|
||
geprüft. */
|
||
if (!anruf) {
|
||
wartend.push({ von: d.von, inhalt: d.inhalt, raumId: d.raum_id });
|
||
return;
|
||
}
|
||
if (d.raum_id !== anruf.raumId) 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);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ---------- Verbindungsadressen ----------------------------------------
|
||
Die Zugangsdaten zum Vermittlungsserver VERFALLEN (sie werden vom
|
||
Server gerechnet, nicht gespeichert -- siehe server/workspace-turn.js).
|
||
|
||
Diese Seite bleibt als App oft tagelang offen. Wer sie nur beim
|
||
Laden holt, telefoniert am zweiten Tag ohne Vermittlung -- und das
|
||
fällt nicht auf: Es scheitern nur die Anrufe derer, die sie
|
||
gebraucht hätten. Genau dafür ist sie gebaut.
|
||
|
||
Deshalb vor jedem Anruf nachsehen. Der Ablaufzeitpunkt steht im
|
||
Benutzernamen (`<ablauf>:<kennung>`) -- er lässt sich hier ablesen,
|
||
ohne dass der Server ein zusätzliches Feld schicken muss. */
|
||
|
||
/* Fünf Minuten Vorlauf: Ein Anruf, der in 30 Sekunden beginnt, soll
|
||
nicht mit Daten starten, die in 40 ablaufen. */
|
||
const ZUGANG_VORLAUF = 300;
|
||
let adressenGeholt = false;
|
||
|
||
function adressenFrisch() {
|
||
if (!adressenGeholt) return false;
|
||
const jetzt = Math.floor(Date.now() / 1000);
|
||
return adressen.every((a) => {
|
||
const m = /^(\d{10,}):/.exec(a && a.username || '');
|
||
return !m || Number(m[1]) > jetzt + ZUGANG_VORLAUF;
|
||
});
|
||
}
|
||
|
||
async function adressenAuffrischen(erzwingen) {
|
||
if (!erzwingen && adressenFrisch()) return;
|
||
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;
|
||
adressenGeholt = true;
|
||
/* Ein eingetragener Vermittlungsserver, der niemanden
|
||
durchlässt, ist schlimmer als keiner -- er sieht aus, als
|
||
wäre alles eingerichtet. Deshalb steht er in der Konsole. */
|
||
if (d.turn_grund) {
|
||
console.warn('[anruf] Vermittlungsserver ohne Zugangsdaten:', d.turn_grund);
|
||
}
|
||
}
|
||
} catch { /* dann eben ohne -- im selben Netz geht es trotzdem */ }
|
||
}
|
||
|
||
/* ---------- Nach außen -------------------------------------------------- */
|
||
|
||
window.anrufStarten = starten;
|
||
window.anrufEreignis = ereignis;
|
||
window.anrufLaeuft = () => !!anruf;
|
||
window.anrufBereit = () => adressen.length > 0 || nurGleichesNetz;
|
||
|
||
(async () => {
|
||
await adressenAuffrischen();
|
||
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 */ }
|
||
|
||
/* ---- KLINGELT GERADE ETWAS? (18.09.2026) ----------------------
|
||
|
||
Filipe: „wenn ich vanvan anrufe kriegt sie nur eine
|
||
benarichtigung aber keinen anruf."
|
||
|
||
Genau so war es: Das Klingeln kam ausschliesslich ueber den
|
||
offenen Ereignisstrom. Wer die Seite nicht offen hatte, bekam
|
||
die Benachrichtigung, tippte darauf -- und landete auf einer
|
||
stillen Seite. Das Ereignis war vorbei, bevor sie geladen war.
|
||
|
||
Der Anruf funktionierte damit fuer alle ausser denen, fuer die
|
||
die Benachrichtigung ueberhaupt gedacht ist.
|
||
|
||
ERST NACH `ichId`: Die Klingel prueft, ob der Anruf vom eigenen
|
||
Konto kommt. Ohne die Nummer wuerde sie beim eigenen Anruf in
|
||
einem zweiten Fenster mitlaeuten. */
|
||
try {
|
||
const a = await fetch('/workspace/api/anruf/offen', { credentials: 'same-origin' });
|
||
if (a.ok) {
|
||
for (const r of ((await a.json())?.anrufe || [])) {
|
||
if (!r.von || r.von.id === ichId) continue;
|
||
if (anruf) break; /* telefoniert schon */
|
||
klingelnZeigen(r.raum_id, r.von, r.video);
|
||
break; /* einer reicht */
|
||
}
|
||
}
|
||
} catch { /* dann eben nur ueber den Ereignisstrom */ }
|
||
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); });
|
||
})();
|