DogFatherGitandClaude Opus 5
b0e7542507
Filipe, zu Screen 1: "wenn ich anrufe soll das auch viel besser geiler und spezieller aussehen aber es soll nicht raushaengen." Erst gemessen: Es haengt nichts raus. Der Kasten ist 374 px am Handy, 340 am Rechner, 72 Teile geprueft, kein einziges ueber dem Rand. Die Optik war also gar nicht der Mangel -- zwei andere Dinge waren es. 1. DER NAME DES ANRUFERS GING IMMER VERLOREN. `wer(raumName || "Anruf")` lief VOR `kastenBauen()`. Das Element #anruf-wer gab es zu dem Zeitpunkt noch nicht, die Zuweisung lief ins Leere, und oben stand bei jedem Anruf das Wort "Anruf". Die Reihenfolge ist umgedreht: erst bauen, dann beschriften. 2. IN EINEM ANRUF OHNE VIDEO STAND JE PERSON DAS WORT "Verbunden". Bei dreien dreimal dasselbe Wort -- und man sah nicht, WER dabei war. In einer Gruppe ist genau das die Frage: Ist Kessi schon drin? Jetzt steht dort ein Kreis mit den Anfangsbuchstaben und der echte Name; waehrend es klingelt ein wartendes Gesicht mit dem Namen dessen, den man anruft. Vorher war die Flaeche in dieser Sekunde leer, und ein leerer Kasten mit "Es klingelt ..." sieht aus wie einer, der haengt -- ausgerechnet im unsichersten Moment. Der Name kommt NICHT aus einer Abfrage. Wer anruft, bekannt beim Start nur sich selbst; alle weiteren kommen ausschliesslich ueber das Ereignis "dabei", und genau dort fehlte das Einsammeln. Deshalb sah der ANRUFER unter jedem Kreis "Jemand" -- die Angerufenen nicht. UND DIE PRUEFUNG WAR ZU NACHSICHTIG. Sie verlangte einen Namen "laenger als ein Zeichen"; der Rueckfalltext "Jemand" ist sechs Zeichen lang und kam damit durch. Gruen, waehrend der Hauptfall kaputt war. Die zweite Fassung verglich gegen eine abgeschriebene Namensliste -- die nannte "Jonas, Luna, Mara, Pat", angelegt werden aber "Filipe, Rieke, Kessi, Tili", und der Kommentar daneben behauptete schon da, sie sei abgeleitet. Jetzt ist sie es wirklich: Die Namen werden beim Anlegen eingesammelt, und geprueft wird, dass jeder GENAU DIE BEIDEN ANDEREN sieht -- nicht "irgendeinen echten Namen", denn der eigene Name im eigenen Kasten waere auch einer. pruef-anruf: 127 Pruefungen, 0 Fehler. Co-Authored-By: Claude Opus 5 <[email protected]>
1373 lines
59 KiB
JavaScript
1373 lines
59 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 = `
|
||
<!-- ============================================================
|
||
NEU GEBAUT AM 19.09.2026.
|
||
|
||
Filipe: „das soll viel besser und geiler aussehen bitte."
|
||
|
||
Was vorher nicht stimmte, der Reihe nach:
|
||
|
||
1. MAN SAH NICHT, MIT WEM. Oben stand „Es klingelt …" und
|
||
sonst nichts. Der wichtigste Satz eines Telefonats ist,
|
||
wen man am Apparat hat.
|
||
|
||
2. „MIKRO AN" WAR ZWEIDEUTIG. Ein Knopf mit dieser
|
||
Aufschrift kann heißen „das Mikro IST an" oder „drück
|
||
hier, um es anzuschalten". Beides ist plausibel, und wer
|
||
falsch rät, schaltet sich stumm, ohne es zu merken.
|
||
Jetzt trägt jeder Knopf ein Zeichen für den Zustand UND
|
||
ein Wort für die Sache — „Mikro" mit durchgestrichenem
|
||
Zeichen heißt aus, fertig.
|
||
|
||
3. DIE GERÄTEAUSWAHL WAR DAS GRÖSSTE ELEMENT im Kasten,
|
||
obwohl man sie einmal im Jahr braucht. Sie liegt jetzt
|
||
hinter einem kleinen Knopf.
|
||
|
||
4. ES GAB KEINE ORDNUNG. Vier gleich aussehende Pillen
|
||
nebeneinander, darunter „Auflegen" in derselben Form.
|
||
Jetzt: die beiden Schalter links, Auflegen rechts und
|
||
als einziger Knopf mit Farbe.
|
||
============================================================= -->
|
||
<div class="anruf__kopf">
|
||
<span class="anruf__puls" id="anruf-puls" aria-hidden="true"></span>
|
||
<span class="anruf__kopftext">
|
||
<span class="anruf__wer" id="anruf-wer">Anruf</span>
|
||
<span class="anruf__lage" id="anruf-lage">Verbindung …</span>
|
||
</span>
|
||
<span class="anruf__zeit" id="anruf-zeit"></span>
|
||
</div>
|
||
<!-- TON AUS IST EIN ZUSTAND, DEN MAN SEHEN MUSS (20.09.2026).
|
||
|
||
Filipe: „es soll ohne lautsprecher anfangen das gespraech und
|
||
nur wenn man drauf klickt soll es laut werden."
|
||
|
||
Wortwoertlich umgesetzt -- aber ein Gespraech, in dem man
|
||
nichts hoert und nicht weiss warum, ist die naechste
|
||
Sackgasse. Deshalb steht es gross da, solange es gilt, und
|
||
verschwindet in dem Moment, in dem man den Ton anmacht.
|
||
Der Balken ist ANTIPPBAR: Wer den Satz liest, will genau das
|
||
tun, was dort steht -- ihn dann erst den passenden Knopf
|
||
suchen zu lassen, waere ein unnoetiger Schritt. -->
|
||
<button type="button" class="anruf__stumm" id="anruf-stumm" hidden>
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M4 9.5h3.5L12 5.5v13L7.5 14.5H4z"/>
|
||
<path d="M4 4l16 16"/>
|
||
</svg>
|
||
<span>Du hörst noch nichts — tippen, um den Ton anzumachen</span>
|
||
</button>
|
||
<div class="anruf__leute" id="anruf-leute"></div>
|
||
<div class="anruf__knoepfe">
|
||
<button type="button" class="anruf__schalter" id="anruf-ton" aria-pressed="true">
|
||
<svg class="anruf__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M12 3.5a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0v-5a3 3 0 0 1 3-3z"/>
|
||
<path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21"/>
|
||
<path class="anruf__strich" d="M4 4l16 16"/>
|
||
</svg>
|
||
<span class="anruf__schalter-text">Mikro</span>
|
||
</button>
|
||
<button type="button" class="anruf__schalter" id="anruf-hoeren" aria-pressed="false">
|
||
<svg class="anruf__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M4 9.5h3.5L12 5.5v13L7.5 14.5H4z"/>
|
||
<path d="M16 9a4.5 4.5 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11"/>
|
||
<path class="anruf__strich" d="M4 4l16 16"/>
|
||
</svg>
|
||
<span class="anruf__schalter-text">Ton</span>
|
||
</button>
|
||
<button type="button" class="anruf__schalter" id="anruf-video"
|
||
aria-pressed="false" hidden>
|
||
<svg class="anruf__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M3.5 7h11v10h-11z"/><path d="M14.5 11l6-3.5v9l-6-3.5z"/>
|
||
<path class="anruf__strich" d="M4 4l16 16"/>
|
||
</svg>
|
||
<span class="anruf__schalter-text">Kamera</span>
|
||
</button>
|
||
<button type="button" class="anruf__mehr" id="anruf-mehr"
|
||
aria-expanded="false" aria-label="Toneinstellungen">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<circle cx="12" cy="5" r="1.6"/><circle cx="12" cy="12" r="1.6"/>
|
||
<circle cx="12" cy="19" r="1.6"/>
|
||
</svg>
|
||
</button>
|
||
<button type="button" class="anruf__auf" id="anruf-auflegen">
|
||
<svg class="anruf__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M3.2 10.2c5-3.4 12.6-3.4 17.6 0l-2 3.2-4.2-1.1-.4-2.6a13 13 0 0 0-4.4 0l-.4 2.6-4.2 1.1z"/>
|
||
</svg>
|
||
<span>Auflegen</span>
|
||
</button>
|
||
</div>
|
||
<!-- Die Geräteauswahl wird erst gebaut, wenn es mehr als ein
|
||
Ausgabegerät gibt (siehe ausgabeAnbieten). Sie liegt hier in
|
||
einer eigenen Zeile, damit sie die Knopfreihe nicht sprengt. -->
|
||
<div class="anruf__mehrzeile" id="anruf-mehrzeile" hidden></div>
|
||
<!-- DER WEG ZUR PROBE (19.09.2026).
|
||
|
||
Filipe: „geht es nicht auf der app?" -- Nein, und das war
|
||
mein Fehler: Ich hatte eine Seite gebaut, die sagt, warum es
|
||
nicht klingelt, und sie war nur ueber die Adresszeile
|
||
erreichbar. In der installierten App gibt es keine.
|
||
|
||
Sie steht deshalb dort, wo man ist, wenn etwas nicht
|
||
stimmt: im Anrufkasten selbst. Klein und ohne Farbe -- wer
|
||
telefoniert, soll sie uebersehen; wer ratlos dasitzt,
|
||
findet sie. -->
|
||
<a class="anruf__probe" id="anruf-probe" href="anruf-probe.html">Klingelt nichts?</a>`;
|
||
document.body.append(k);
|
||
/* Die Toneinstellungen liegen hinter einem kleinen Knopf: Man
|
||
braucht sie einmal im Jahr, und vorher war die Geraeteauswahl
|
||
das groesste Element im Kasten. */
|
||
$('anruf-mehr').hidden = true;
|
||
$('anruf-mehr').addEventListener('click', () => {
|
||
const z = $('anruf-mehrzeile');
|
||
const auf = z.hidden;
|
||
z.hidden = !auf;
|
||
$('anruf-mehr').setAttribute('aria-expanded', String(auf));
|
||
});
|
||
$('anruf-ton').addEventListener('click', tonSchalten);
|
||
$('anruf-hoeren').addEventListener('click', hoerenSchalten);
|
||
/* DER HINWEISBALKEN IST SELBST DER KNOPF. Wer liest „tippen, um
|
||
den Ton anzumachen", will genau das tun -- ihn danach noch den
|
||
richtigen Schalter suchen zu lassen, waere ein Schritt zu viel. */
|
||
$('anruf-stumm')?.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; };
|
||
|
||
/** Wen habe ich am Apparat? Steht ganz oben und gross.
|
||
*
|
||
* DER WICHTIGSTE SATZ EINES TELEFONATS. Vorher stand dort nur „Es
|
||
* klingelt …" -- man sah nicht, wen man anruft. */
|
||
const wer = (text) => { const w = $('anruf-wer'); if (w) w.textContent = text; };
|
||
|
||
/* =====================================================================
|
||
WER IST DRAN -- MIT NAMEN UND GESICHT (20.09.2026)
|
||
|
||
Filipe, zur Anrufbox: „die soll auch viel besser geiler und
|
||
spezieller aussehen, aber nicht so raushaengen."
|
||
|
||
DER GROESSTE MANGEL WAR KEIN SCHOENHEITSFEHLER. In einem Anruf
|
||
ohne Video stand unter dem Kasten das Wort „Verbunden" -- einmal
|
||
je Person. Bei dreien stand es dreimal, und man sah nicht, WER
|
||
verbunden war. In einer Gruppe ist genau das die Frage: Ist Luna
|
||
schon drin? Hoert der Modi mit?
|
||
|
||
Es gibt keine Profilbilder im Anruf -- die Sitzung liefert sie
|
||
nicht mit, und sie dafuer durch eine Abfrage zu holen, die auf
|
||
JEDER Seite laeuft, waere an der falschen Stelle gespart und an
|
||
der falschen teuer. Stattdessen dasselbe Mittel wie im Chat: der
|
||
Anfangsbuchstabe in einem Kreis. Er ist sofort da, kostet nichts
|
||
und unterscheidet in einer Gruppe von drei bis fuenf Leuten
|
||
zuverlaessig.
|
||
|
||
WAEHREND ES KLINGELT steht dort, WEN man anruft -- gross, mit
|
||
einem ruhigen Puls. Vorher war die Flaeche in diesem Moment leer,
|
||
und ein leerer Kasten mit „Es klingelt ..." sieht aus wie einer,
|
||
der haengt. Es ist die Sekunde, in der man am unsichersten ist.
|
||
===================================================================== */
|
||
|
||
/** Die Namen aller, die im Anruf sind -- id -> Name.
|
||
*
|
||
* Auf dem Anruf selbst und nicht daneben: Endet er, ist die Karte
|
||
* mit ihm weg. Eine Karte, die einen Anruf ueberlebt, zeigt beim
|
||
* naechsten Namen von gestern. */
|
||
function namenMerken(liste) {
|
||
if (!anruf || !Array.isArray(liste)) return;
|
||
if (!anruf.namen) anruf.namen = new Map();
|
||
for (const w of liste) if (w && w.id != null) anruf.namen.set(w.id, w.name || '');
|
||
}
|
||
|
||
/** Ein bis zwei Buchstaben aus einem Namen -- dieselbe Regel wie im
|
||
* Chat: bei zwei Wörtern die Anfangsbuchstaben beider, sonst der
|
||
* erste. „Luna Sanchez" -> LS, „Dogi" -> D. */
|
||
function zeichenVon(name) {
|
||
const teile = String(name || '').trim().split(/\s+/).filter(Boolean);
|
||
if (!teile.length) return '?';
|
||
if (teile.length === 1) return teile[0][0].toUpperCase();
|
||
return (teile[0][0] + teile[teile.length - 1][0]).toUpperCase();
|
||
}
|
||
|
||
/** Ein Gesichtsfeld: Kreis mit Buchstaben, Name darunter.
|
||
*
|
||
* `lage` ist 'da' (verbunden) oder 'wartet' (klingelt noch) -- das
|
||
* Stilblatt macht daraus den Unterschied zwischen ruhig und
|
||
* pulsierend. Der Zustand steht auch im Text darunter: Ein Puls
|
||
* allein ist nichts, was ein Vorleseprogramm ansagen kann. */
|
||
function gesichtsfeld(name, lage, stumm) {
|
||
const k = el('div', 'anruf__gesicht');
|
||
k.dataset.lage = lage;
|
||
const kreis = el('span', 'anruf__kreis', zeichenVon(name));
|
||
/* Der Kreis traegt zwei Buchstaben -- als Bild, nicht als Text.
|
||
Ein Vorleseprogramm soll „Luna Sanchez, klingelt" sagen und
|
||
nicht „L S". */
|
||
kreis.setAttribute('aria-hidden', 'true');
|
||
k.append(kreis);
|
||
if (stumm) {
|
||
/* KEINE WIEDERHOLUNG DESSEN, WAS DIREKT DARUEBER STEHT.
|
||
Beim Anruf zu zweit sagt die Kopfzeile schon „Luna Sanchez" und
|
||
„Es klingelt ..." -- beides zwei Zeilen tiefer noch einmal
|
||
hinzuschreiben macht den Kasten hoeher und sagt nichts dazu.
|
||
Fuer Vorleseprogramme bleibt der Name trotzdem am Element. */
|
||
k.setAttribute('aria-label', `${name || 'Jemand'} – klingelt`);
|
||
return k;
|
||
}
|
||
k.append(el('span', 'anruf__name', name || 'Jemand'));
|
||
k.append(el('span', 'anruf__stand', lage === 'da' ? 'ist dabei' : 'klingelt …'));
|
||
return k;
|
||
}
|
||
|
||
/** Einen Schalter auf an/aus stellen.
|
||
*
|
||
* Die Aufschrift bleibt IMMER dieselbe (die Sache), der Zustand
|
||
* steht in `aria-pressed` und wird vom Zeichen getragen -- ein
|
||
* durchgestrichenes Mikrofon heisst aus. Fuer Vorleseprogramme
|
||
* kommt der Zustand ueber aria-label mit, denn ein Strich im Bild
|
||
* ist nichts, was man hoeren kann. */
|
||
function schalterSetzen(k, an, sache) {
|
||
if (!k) return;
|
||
k.setAttribute('aria-pressed', String(!!an));
|
||
k.setAttribute('aria-label', `${sache} ${an ? 'an' : 'aus'} – zum Umschalten antippen`);
|
||
}
|
||
|
||
/* ---------- 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();
|
||
klingelWache(); // niemand-geht-ran-Wecker abbestellen
|
||
nachfrageStoppen(); // und die Nachfrage braucht es nicht mehr
|
||
if (anruf && !anruf.beginn) anruf.beginn = Date.now();
|
||
/* Der Puls hoert auf zu atmen, sobald die Verbindung steht --
|
||
eine Bewegung, die nie aufhoert, wird nach zwei Minuten zur
|
||
Belaestigung. */
|
||
$('anruf')?.setAttribute('data-steht', 'ja');
|
||
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') {
|
||
/* TON AUS. Bis heute piepte das Freizeichen weiter, waehrend
|
||
daneben "Keine Verbindung." stand -- der Ton sagte "es
|
||
klingelt noch", der Text "vorbei". Man weiss dann nicht,
|
||
welchem man glauben soll, und legt vorsichtshalber nicht auf. */
|
||
tonAus();
|
||
klingelWache();
|
||
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') {
|
||
/* NICHT "im Schloss-Symbol neben der Adresse" (geaendert
|
||
19.09.2026). In der installierten App gibt es weder
|
||
Adresszeile noch Schloss -- die Anweisung fuehrte genau dort
|
||
ins Leere, wo die meisten sie lesen. Das Haus kennt diesen
|
||
Fehler und hat ihn beim Weg zur Anruf-Probe schon einmal
|
||
behoben; hier stand er noch.
|
||
|
||
Der neue Satz traegt in beiden Faellen, weil er den Ort
|
||
nennt, den es immer gibt: die Geraeteeinstellungen. */
|
||
throw new Error('Das Mikrofon ist gesperrt. Erlaube es in den '
|
||
+ 'Einstellungen deines Geräts (Apps → Team Dogi → Mikrofon) '
|
||
+ 'und versuch es noch einmal. Unter „Klingelt nichts?" steht, '
|
||
+ 'wie das geht.');
|
||
}
|
||
if (f?.name === 'NotFoundError') {
|
||
throw new Error('Kein Mikrofon gefunden. Steckt ein Headset '
|
||
+ 'halb drin oder ist es anderweitig in Benutzung?');
|
||
}
|
||
throw new Error('Das Mikrofon ließ sich nicht öffnen. Schließ '
|
||
+ 'andere Programme, die es benutzen könnten, und versuch es '
|
||
+ 'noch einmal.');
|
||
}
|
||
}
|
||
|
||
async function starten(raumId, mitVideo, raumName) {
|
||
if (anruf) return;
|
||
kastenBauen();
|
||
$('anruf').hidden = false;
|
||
/* WEN RUFE ICH AN? Der Chat weiss es und gibt es mit. Faellt
|
||
der Name aus (aelterer Aufruf), bleibt es bei „Anruf" --
|
||
das ist immer noch richtig, nur weniger.
|
||
|
||
NACH `kastenBauen()`, UND DAS IST DER PUNKT (20.09.2026):
|
||
Vorher stand diese Zeile DAVOR. Da gibt es das Element
|
||
`#anruf-wer` noch gar nicht -- `wer()` fand nichts, tat nichts,
|
||
und der Name war weg. Oben stand deshalb bei JEDEM ersten Anruf
|
||
„Anruf" statt „Luna Sanchez", obwohl der Chat ihn korrekt
|
||
mitgab. Der Kommentar daneben beschrieb die Absicht und nicht,
|
||
was passierte -- ein Kommentar, der eine Absicht beschreibt,
|
||
erfuellt sie nicht.
|
||
|
||
Gefunden hat es ein Bildschirmfoto, nicht das Lesen: Der Code
|
||
liest sich richtig, und der Rueckfall „Anruf" ist plausibel
|
||
genug, um nicht aufzufallen.
|
||
|
||
Der frueher hier stehende `if (anruf) return;` ist mit nach oben
|
||
gewandert. Das ist auch sachlich besser: Laeuft schon ein
|
||
Gespraech, soll ein zweiter Aufruf es nicht umbenennen. */
|
||
wer(raumName || 'Anruf');
|
||
/* JEDES GESPRAECH FAENGT LEISE AN (20.09.2026) -- an BEIDEN
|
||
Wegen, Anrufen und Rangehen. Einer allein waere die
|
||
Haelfte, und die andere Haelfte faellt niemandem auf,
|
||
bis es einmal zu laut war. */
|
||
tonZuruecksetzen();
|
||
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;
|
||
/* `beginn: null` UND NICHT Date.now() (19.09.2026).
|
||
|
||
Die Uhr zaehlte ab dem Waehlen. Wer 30 Sekunden klingeln liess
|
||
und dann 12 Sekunden sprach, las im Kasten "00:42" -- und danach
|
||
im Chat "Anruf . 12 Sekunden". Zwei Zahlen fuer dieselbe Sache,
|
||
eine halbe Minute auseinander. Der Server rechnet es richtig
|
||
(gespraechSeit); der Kasten hat es wieder kaputtgemacht.
|
||
|
||
Bis jemand rangeht steht jetzt "Es klingelt ..." statt einer
|
||
Uhr, die etwas misst, das noch nicht stattfindet. */
|
||
anruf = { raumId, video: mitVideo, verbindungen: new Map(),
|
||
stroeme: new Map(), eigener, beginn: null };
|
||
$('anruf-video').hidden = !mitVideo;
|
||
if (mitVideo) $('anruf-video').setAttribute('aria-pressed', 'true');
|
||
lage('Es klingelt …');
|
||
/* JETZT ZEICHNEN, nicht erst wenn jemand rangeht: Dies ist der
|
||
Moment, in dem die Flaeche bisher leer war -- und ein leerer
|
||
Kasten mit „Es klingelt ..." sieht aus wie einer, der haengt. */
|
||
leuteZeichnen();
|
||
/* DAS FREIZEICHEN. Ein stiller Kasten mit laufender Uhr sagt nur,
|
||
dass etwas passiert -- nicht, was. */
|
||
freiTon();
|
||
uhrLaufen();
|
||
/* UND EIN ENDE (19.09.2026). Bis heute lief das Freizeichen
|
||
UNENDLICH. Es gab keinen Zeitgeber, der aufhoert: Wer niemanden
|
||
erreichte, sass vor einem piependen Kasten mit "02:47" darauf,
|
||
als telefoniere er laengst. Genau das wird als "geht einfach
|
||
nicht" gemeldet.
|
||
|
||
Der Server laesst einen Anruf nach KLINGELT_SEKUNDEN verfallen
|
||
und schickt den Zeitpunkt sogar mit (`laeuft_bis`) -- benutzt
|
||
hat ihn nie jemand. */
|
||
klingelWache(KLINGELT_MS);
|
||
/* Und der zweite Weg, falls das Ereignis nicht ankommt. */
|
||
nachfrageStarten(raumId);
|
||
|
||
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(sagWas(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?.(sagWas(d.fehler, 'Der Anruf ist schon vorbei.'));
|
||
klingelnAus();
|
||
return;
|
||
}
|
||
const d = await a.json();
|
||
await adressenFertig;
|
||
kastenBauen();
|
||
$('anruf').hidden = false;
|
||
/* JEDES GESPRAECH FAENGT LEISE AN (20.09.2026) -- an BEIDEN
|
||
Wegen, Anrufen und Rangehen. Einer allein waere die
|
||
Haelfte, und die andere Haelfte faellt niemandem auf,
|
||
bis es einmal zu laut war. */
|
||
tonZuruecksetzen();
|
||
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();
|
||
/* Wer angerufen hat, steht im Klingel-Ereignis und wurde dort
|
||
schon gemerkt -- sonst staende beim Angerufenen „Anruf" und
|
||
beim Anrufer der Name, also zweierlei fuer dasselbe Gespraech. */
|
||
wer(letzterAnrufer || 'Anruf');
|
||
lage('Verbindung …');
|
||
uhrLaufen();
|
||
|
||
/* Mit allen, die schon dabei sind, eine Verbindung aufbauen --
|
||
aber das ANGEBOT macht nur, wer die kleinere Nummer hat. */
|
||
namenMerken(d.wer);
|
||
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();
|
||
klingelWache();
|
||
nachfrageStoppen();
|
||
$('anruf')?.removeAttribute('data-steht');
|
||
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;
|
||
/* Der Hinweis gehoert zum laufenden Gespraech. Bleibt er stehen,
|
||
sagt er etwas ueber ein Gespraech, das es nicht mehr gibt. */
|
||
stummBalkenZeigen();
|
||
/* 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 [werId, 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 {
|
||
/* Der Ton muss abgespielt werden -- das Element bleibt, nur
|
||
unsichtbar. Es traegt die Verbindung, nicht die Anzeige. */
|
||
const t = el('audio');
|
||
t.autoplay = true;
|
||
t.srcObject = strom;
|
||
ziel.append(t);
|
||
/* HIER STAND „Verbunden" -- einmal je Person, ohne Namen.
|
||
Bei dreien dreimal dasselbe Wort, und man sah nicht, wer. */
|
||
ziel.append(gesichtsfeld(anruf.namen?.get(werId), 'da'));
|
||
}
|
||
}
|
||
|
||
/* ---- NOCH NIEMAND DRAN: zeigen, WEN man anruft ----------------
|
||
Die Flaeche war in diesem Moment leer, und ein leerer Kasten mit
|
||
„Es klingelt ..." sieht aus wie einer, der haengt -- ausgerechnet
|
||
in der Sekunde, in der man am unsichersten ist. */
|
||
if (!anruf.video && !anruf.stroeme.size) {
|
||
const gegenueber = $('anruf-wer')?.textContent?.trim();
|
||
/* „Anruf" ist der Rueckfalltext, kein Name -- dann lieber gar
|
||
kein Gesicht als ein Kreis mit „A" darin. */
|
||
if (gegenueber && gegenueber !== 'Anruf') {
|
||
/* `true`: Name und Zustand stehen schon in der Kopfzeile --
|
||
siehe die Begruendung in `gesichtsfeld`. */
|
||
ziel.append(gesichtsfeld(gegenueber, 'wartet', true));
|
||
}
|
||
}
|
||
/* 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();
|
||
/* Solange niemand rangegangen ist, gibt es nichts zu zaehlen. */
|
||
if (!anruf.beginn) return;
|
||
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;
|
||
/* DER ZUSTAND STEHT IN aria-pressed, NICHT IM TEXT (19.09.2026).
|
||
Ein Knopf mit der Aufschrift „Mikro an" kann zweierlei heissen --
|
||
„ist an" oder „schalt es an". Wer falsch raet, sitzt stumm da.
|
||
Jetzt sagt das durchgestrichene Zeichen den Zustand, und das
|
||
Wort sagt nur, worum es geht. */
|
||
schalterSetzen($('anruf-ton'), !an, 'Mikrofon');
|
||
}
|
||
|
||
/* ---------- 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?
|
||
*
|
||
* STARTET AUS, UND ZWAR BEI JEDEM ANRUF (20.09.2026).
|
||
*
|
||
* Filipe: „es soll ohne lautsprecher anfangen das gespraech und nur
|
||
* wenn man drauf klickt soll es laut werden ... es soll nicht
|
||
* raushaengen oder so, das ist nicht cool."
|
||
*
|
||
* Der Grund ist der Stream: Ein Anruf, der beim Annehmen sofort aus
|
||
* den Lautsprechern kommt, ist im schlimmsten Fall fuer alle
|
||
* Zuschauer zu hoeren, bevor irgendjemand reagieren kann. Das laesst
|
||
* sich nicht zurueckholen.
|
||
*
|
||
* HIER STAND FRUEHER `true` mit der Begruendung: „Wer den Ton
|
||
* abgestellt hat, will ihn nicht beim naechsten Gespraech wieder
|
||
* an." Das war richtig gedacht und ist jetzt umgedreht -- aus
|
||
* demselben Grund, nur in die andere Richtung: Der Zustand soll
|
||
* NICHT ueberdauern, sondern jedes Gespraech faengt leise an. Eine
|
||
* Entscheidung, die man einmal getroffen hat, darf nicht fuer ein
|
||
* Gespraech gelten, von dem man noch nichts wusste. */
|
||
let hoeren = false;
|
||
|
||
/** 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;
|
||
schalterSetzen($('anruf-hoeren'), hoeren, 'Ton der anderen');
|
||
hoerenAnwenden();
|
||
stummBalkenZeigen();
|
||
}
|
||
|
||
/** Den Hinweis "du hoerst noch nichts" ein- oder ausblenden.
|
||
*
|
||
* An EINER Stelle, damit er nicht an dreien vergessen wird: beim
|
||
* Anfangen, beim Umschalten und beim Auflegen. */
|
||
function stummBalkenZeigen() {
|
||
const b = $('anruf-stumm');
|
||
if (!b) return;
|
||
/* AM SICHTBAREN KASTEN, NICHT AN `anruf` (berichtigt 20.09.2026).
|
||
|
||
Der erste Anlauf fragte `!anruf` -- und die Variable wird erst
|
||
gesetzt, NACHDEM der Kasten aufgeht. Beim Aufbauen war sie also
|
||
noch leer, der Hinweis blieb versteckt, und man sass in einem
|
||
stummen Gespraech ohne einen Satz dazu. Genau der Zustand, den
|
||
er verhindern soll.
|
||
|
||
Der Kasten selbst ist die ehrlichere Frage: Ist er zu, gibt es
|
||
nichts zu hoeren; ist er auf, gilt der Hinweis. */
|
||
b.hidden = hoeren || $('anruf')?.hidden !== false;
|
||
}
|
||
|
||
/** Jedes Gespraech faengt leise an -- siehe die Begruendung bei
|
||
* `hoeren`. Wird beim Aufbauen eines Anrufs gerufen, nicht beim
|
||
* Laden der Seite: Sonst gaelte die Entscheidung von vorhin
|
||
* weiter. */
|
||
function tonZuruecksetzen() {
|
||
hoeren = false;
|
||
schalterSetzen($('anruf-hoeren'), false, 'Ton der anderen');
|
||
hoerenAnwenden();
|
||
stummBalkenZeigen();
|
||
}
|
||
|
||
/** 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(); });
|
||
/* IN DIE EIGENE ZEILE, NICHT IN DIE KNOPFREIHE (19.09.2026).
|
||
Dort war sie das breiteste Element des Kastens -- fuer etwas,
|
||
das man einmal im Jahr braucht. Jetzt liegt sie hinter dem
|
||
Knopf mit den drei Punkten und ist erst da, wenn man sie sucht.
|
||
Der Knopf selbst erscheint nur, wenn es hier auch etwas zu
|
||
waehlen gibt. */
|
||
const zeile = $('anruf-mehrzeile');
|
||
if (!zeile) return;
|
||
zeile.append(el('span', 'anruf__mehrschild', 'Ton geht an'));
|
||
zeile.append(w);
|
||
const mehr = $('anruf-mehr');
|
||
if (mehr) mehr.hidden = false;
|
||
}
|
||
|
||
function videoSchalten() {
|
||
if (!anruf) return;
|
||
const an = anruf.eigener.getVideoTracks().some((s) => s.enabled);
|
||
for (const s of anruf.eigener.getVideoTracks()) s.enabled = !an;
|
||
schalterSetzen($('anruf-video'), !an, 'Kamera');
|
||
}
|
||
|
||
/* ---------- Es klingelt ------------------------------------------------ */
|
||
|
||
/* Wer zuletzt angerufen hat -- fuer die Kopfzeile des Kastens, wenn
|
||
man rangeht. */
|
||
let letzterAnrufer = '';
|
||
|
||
function klingelnZeigen(raumId, von, mitVideo) {
|
||
klingelnAus();
|
||
letzterAnrufer = von?.name || '';
|
||
/* 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.
|
||
|
||
ABER SO LANGE WIE DER ANRUF WIRKLICH LAEUFT (19.09.2026). Hier
|
||
standen 46 Sekunden, waehrend der Server 120 gibt. Wer beim
|
||
Klingeln das Handy aus der Tasche holt und in Sekunde 50
|
||
hinsieht, fand nichts mehr -- kein Kasten, keine Knoepfe --,
|
||
waehrend der Anrufer noch siebzig Sekunden das Freizeichen
|
||
hoerte. Die 120 Sekunden sind im Server ausdruecklich damit
|
||
begruendet, dass man Zeit zum Entsperren braucht; diese Zeile
|
||
hat genau diese Entscheidung wieder aufgehoben. */
|
||
setTimeout(klingelnAus, KLINGELT_MS);
|
||
}
|
||
/* ---------- 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);
|
||
}
|
||
|
||
/* Wie lange es hoechstens klingelt, bevor der Browser selbst
|
||
aufgibt. Der Server schickt `laeuft_bis` mit; solange das nicht
|
||
ueberall ankommt, ist dies der Rueckfall -- dieselbe Zahl wie
|
||
KLINGELT_SEKUNDEN in workspace-anruf.js, plus zwei Sekunden Luft,
|
||
damit der Server zuerst dran ist. */
|
||
const KLINGELT_MS = 122000;
|
||
let klingelWecker = null;
|
||
|
||
/* =====================================================================
|
||
DER ZWEITE WEG: SELBST NACHFRAGEN — 19.09.2026
|
||
|
||
Filipe: „wenn vanvan rangeht und redet klingelt es immer noch bei
|
||
mir weiter, der anruf verbindet nicht richtig."
|
||
|
||
NACHGEMESSEN IM PROTOKOLL DES SERVERS:
|
||
|
||
17:04:52 anruf_start Person 1 (Filipe)
|
||
17:05:25 anruf_ende Person 4 (VanVan) 24 s
|
||
17:05:31 anruf_ende Person 1 (Filipe) 39 s
|
||
|
||
Sie WAR im Gespräch -- der Server hat sie 24 Sekunden lang als
|
||
Teilnehmerin geführt. Das Ereignis „dabei" ist also verschickt
|
||
worden. Bei Filipe kam es nicht an: `tonAus()` ist das Erste im
|
||
`dabei`-Zweig, noch vor jeder Prüfung, und das Tuten lief weiter.
|
||
|
||
Geprüft und ausgeschlossen: Raumzugehörigkeit (beide drin, niemand
|
||
`raus_am`), die Ereignis-Verkabelung (Server sendet mit der
|
||
richtigen Art, chat.js reicht weiter, anruf.js nimmt entgegen),
|
||
die Tonsteuerung (ein einziger Taktgeber, `tonAus` räumt ihn),
|
||
ein zwischenspeichernder Service Worker (es gibt keinen).
|
||
|
||
Es geht also unterwegs verloren -- auf einem Weg, den ich von hier
|
||
aus nicht messen kann: Ereignisstrom über Cloudflare, ein
|
||
schlafender Reiter, ein Neustart des Servers im falschen Moment.
|
||
|
||
DARUM WIRD DIE URSACHE NICHT WEITER GESUCHT, SONDERN DIE
|
||
ABHÄNGIGKEIT BESEITIGT. Ein klingelndes Telefon darf nicht an
|
||
einem einzigen, zerbrechlichen Kanal hängen. Solange es klingelt,
|
||
fragt der Anrufer jetzt SELBST nach: „ist schon jemand dran?"
|
||
|
||
Das ist kein Ersatz für den Ereignisstrom -- der ist schneller und
|
||
bleibt der erste Weg. Es ist das Netz darunter. Kommt das Ereignis
|
||
an, hat die Nachfrage nichts mehr zu tun (sie prüft `anruf.beginn`
|
||
und die bekannten Teilnehmer und hält von selbst an).
|
||
|
||
ALLE ZWEI SEKUNDEN, NICHT JEDE HALBE: Es klingelt höchstens zwei
|
||
Minuten, das sind sechzig Abrufe. Häufiger zu fragen kostet Akku
|
||
für eine Sekunde, die niemand merkt. */
|
||
let nachfrage = null;
|
||
|
||
function nachfrageStarten(raumId) {
|
||
nachfrageStoppen();
|
||
nachfrage = setInterval(async () => {
|
||
if (!anruf || anruf.raumId !== raumId) return nachfrageStoppen();
|
||
/* Steht die Verbindung schon, gibt es nichts nachzufragen. */
|
||
if (anruf.beginn) return nachfrageStoppen();
|
||
let d;
|
||
try {
|
||
const a = await fetch(`/workspace/api/anruf/${raumId}`,
|
||
{ credentials: 'same-origin' });
|
||
if (!a.ok) return;
|
||
d = await a.json();
|
||
} catch { return; } /* ein Aussetzer ist kein Ergebnis */
|
||
if (!anruf || anruf.raumId !== raumId) return nachfrageStoppen();
|
||
|
||
/* Der Anruf ist vorbei, ohne dass wir es erfahren haben. */
|
||
if (!d.laeuft) { nachfrageStoppen(); tonAus(); lage('Der Anruf ist vorbei.');
|
||
setTimeout(() => { if (anruf) auflegen(); }, 1500); return; }
|
||
|
||
namenMerken(d.wer);
|
||
const andere = (d.wer || []).filter((w) => w.id !== ichId);
|
||
if (!andere.length) return; /* es klingelt weiter, alles richtig */
|
||
|
||
/* JEMAND IST DRAN. Ab hier dasselbe wie beim Ereignis „dabei" --
|
||
und es schadet nicht, wenn beides passiert: `verbindungFuer`
|
||
gibt eine bestehende Verbindung zurück, und ein zweites
|
||
Angebot an dieselbe Gegenstelle entsteht gar nicht erst. */
|
||
nachfrageStoppen();
|
||
tonAus();
|
||
klingelWache();
|
||
lage('Baut auf …');
|
||
for (const w of andere) {
|
||
if (anruf.verbindungen.has(w.id)) continue;
|
||
if (ichId < w.id) angebotMachen(w.id);
|
||
else verbindungFuer(w.id);
|
||
}
|
||
}, 2000);
|
||
}
|
||
|
||
function nachfrageStoppen() {
|
||
if (nachfrage) { clearInterval(nachfrage); nachfrage = null; }
|
||
}
|
||
|
||
/** Ohne Zahl: abbestellen. Mit Zahl: nach so vielen Millisekunden
|
||
* aufgeben, falls bis dahin niemand rangegangen ist. */
|
||
function klingelWache(ms) {
|
||
if (klingelWecker) { clearTimeout(klingelWecker); klingelWecker = null; }
|
||
if (!ms) return;
|
||
klingelWecker = setTimeout(() => {
|
||
klingelWecker = null;
|
||
/* Ist inzwischen jemand dabei, war es kein vergeblicher Anruf. */
|
||
if (!anruf || anruf.beginn) return;
|
||
tonAus();
|
||
lage('Niemand geht ran.');
|
||
setTimeout(() => { if (anruf && !anruf.beginn) auflegen(); }, 2500);
|
||
}, ms);
|
||
}
|
||
|
||
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();
|
||
nachfrageStoppen();
|
||
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 …');
|
||
/* DEN NAMEN MITNEHMEN (20.09.2026).
|
||
|
||
Hier fehlte er, und das Loch war genau umgekehrt zu dem, was
|
||
man erwartet: Wer ANGERUFEN wird, erfaehrt die Namen ueber
|
||
`dazustossen` (die Antwort des Servers enthaelt alle). Wer
|
||
ANRUFT, bekommt beim Start nur sich selbst -- alle weiteren
|
||
kommen ausschliesslich ueber dieses Ereignis. Ohne diese Zeile
|
||
stand bei ihm unter jedem Kreis „Jemand", und ausgerechnet der
|
||
Anrufer sah als Einziger keine Namen.
|
||
|
||
Gefunden hat es die Pruefung, aber erst, nachdem sie
|
||
verschaerft wurde: Der erste Anlauf verlangte nur „Name laenger
|
||
als ein Zeichen" -- und „Jemand" ist sechs Zeichen lang. Eine
|
||
Pruefung, die den Rueckfalltext durchlaesst, prueft nichts. */
|
||
namenMerken([d.person]);
|
||
/* 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;
|
||
/* ==== TELEFONIERT DIESE PERSON UEBERHAUPT? (19.09.2026) ============
|
||
|
||
Seit die Community einen Chat hat, gibt es Leute, fuer die es die
|
||
Anruffunktion nicht gibt -- der Riegel sitzt am Anruf-Router und
|
||
antwortet mit 404.
|
||
|
||
OHNE DIESE MERKUNG WAERE DAS LAUT: Die Chatseite holt beim Laden
|
||
die Verbindungsadressen und danach die offenen Anrufe. Beides
|
||
ergab fuer einen Gast einen 404 in der Konsole -- zweimal, bei
|
||
jedem Seitenaufruf. Gefunden hat das die Pruefung im Browser,
|
||
nicht das Lesen.
|
||
|
||
Ein Fehler in der Konsole, der bei jedem Aufruf kommt und nichts
|
||
bedeutet, ist genau die Sorte Rauschen, die den naechsten ECHTEN
|
||
Fehler unsichtbar macht. Dieselbe Regel wie bei der Warnung, die
|
||
immer kommt. */
|
||
let telefonGehtHier = true;
|
||
|
||
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' });
|
||
/* 404 heisst hier nicht "kaputt", sondern "gibt es fuer dich
|
||
nicht". Ab da wird gar nicht mehr gefragt. */
|
||
if (a.status === 404) { telefonGehtHier = false; return; }
|
||
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 -------------------------------------------------- */
|
||
|
||
/* Wer hier nicht telefoniert, bekommt die Funktion gar nicht erst.
|
||
Der Chat prueft `window.anrufStarten`, bevor er die Knoepfe baut --
|
||
damit faellt der zweite Weg zu denselben Knoepfen von selbst weg.
|
||
GESETZT WIRD ERST NACH DER ANTWORT, deshalb weiter unten. */
|
||
window.anrufStarten = starten;
|
||
window.anrufEreignis = ereignis;
|
||
window.anrufLaeuft = () => !!anruf;
|
||
window.anrufBereit = () => adressen.length > 0 || nurGleichesNetz;
|
||
|
||
(async () => {
|
||
/* ==== ERST FRAGEN, WER MAN IST -- DANN ERST ANRUFEN =============
|
||
|
||
DIE REIHENFOLGE WAR DER FEHLER (19.09.2026). Hier stand
|
||
`adressenAuffrischen()` VOR der Frage nach der eigenen Person.
|
||
Fuer die Community antwortet dieser Weg seit heute mit 404, und
|
||
der Browser schreibt das in die Konsole, BEVOR JavaScript
|
||
irgendetwas abfangen kann -- ein roter Eintrag bei jedem
|
||
Seitenaufruf, der nichts bedeutet.
|
||
|
||
Ein Fehler, der immer kommt, macht den naechsten ECHTEN Fehler
|
||
unsichtbar. Dieselbe Regel wie bei der Warnung, die immer kommt.
|
||
|
||
Jetzt sagt `/api/ich` vorher, ob es hier ueberhaupt ein Telefon
|
||
gibt -- und wenn nicht, wird gar nicht erst gefragt. Die Angabe
|
||
kommt aus derselben Funktion wie der Riegel im Server. */
|
||
try {
|
||
const i = await fetch('/workspace/api/ich', { credentials: 'same-origin' });
|
||
if (i.ok) {
|
||
const d = await i.json();
|
||
ichId = d?.id ?? null;
|
||
if (d && d.darf_anrufen === false) telefonGehtHier = false;
|
||
}
|
||
} catch { /* der Chat holt es ohnehin auch */ }
|
||
|
||
if (!telefonGehtHier) {
|
||
/* Und die Funktion gar nicht erst anbieten: Der Chat baut seine
|
||
Knoepfe nur, wenn es sie gibt. */
|
||
delete window.anrufStarten;
|
||
return;
|
||
}
|
||
await adressenAuffrischen();
|
||
|
||
/* ---- 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. */
|
||
if (!telefonGehtHier) { void gruppeMax; return; }
|
||
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); });
|
||
})();
|