Telefonieren im Chat -- und die Farben nach Nachbarschaft verteilt
ZWEI SACHEN IN EINEM COMMIT, weil beide aus derselben Nacht stammen. === 1. DIE FARBEN: DER RICHTIGE ABSTAND === Filipe: "es gibt noch mehr die aehnlich aussehen von den farben also leg los alle die sich aehnlich sind von den farben wechseln." Er hatte recht, und mein Denkfehler laesst sich benennen: Ich hatte den kleinsten Abstand ueber ALLE 37 Paare maximiert -- und der liegt bei 37 Farben zwangslaeufig bei 0,10. Das ist die Packungsgrenze, kein Versaeumnis. NUR SIEHT NIEMAND ALLE 37 NEBENEINANDER. Man sieht NACHBARN. Im Browser gemessen, an der tatsaechlichen Lage auf dem Schirm -- 125 Paare, die wirklich nebeneinander stehen, 15 davon unter 0,15: Creator-Profile / Zahlen 0,1019 beide rosa-rot LIVE-Analyse / Technik 0,1030 beide orange Wunschliste / Meldungen 0,1032 beide gelbgruen Wer sieht was / Entwicklung 0,1039 beide cyan Regeln & Hilfe / Mitmachen 0,1047 beide gruen Der Treff / Anschlagbrett 0,1070 beide rosa Die Farben bleiben, ihre ZUTEILUNG aendert sich: Nachbarabstand 0,1047 -> 0,2133 (mehr als verdoppelt) Nachbarn unter 0,15 6 -> 0 Die Nachbarschaft steht in server/kachel-nachbarn.json, gemessen im Browser -- nicht aus der Struktur im Quelltext abgeleitet. Die sagt, was zusammengehoert, nicht was zusammen zu sehen ist. === 2. TELEFONIEREN IM CHAT === Filipe: "kann man machen dass die modis, rechte hand und ich auch telefonieren koennen im chat?" ... "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 UEBER DEN SERVER. Direkt von Browser zu Browser (WebRTC); der Server reicht nur die Verbindungsdaten weiter, ein paar Kilobyte je Anruf. Zu zweit kodiert jedes Geraet einen Strom und dekodiert einen -- die Last eines gewoehnlichen Videoanrufs. KEIN NEUER DIENST. Der Chat hatte bereits alles: `chatEreignis()` fuer den Hinweg (SSE), Push fuers Klingeln, Raeume mit mehreren Teilnehmern. Ein eigener WebSocket daneben waere eine zweite Verbindung fuer dieselbe Frage -- und die zweite wird beim naechsten Umbau vergessen. Gebaut: Ton und Video, einzeln und in Gruppe bis GRUPPE_MAX (4), Klingeln mit Annehmen/Ablehnen, Mikro und Kamera schaltbar, Gespraechsdauer, Auflegen. Der Chat bleibt daneben benutzbar -- man schreibt oft, waehrend man spricht. EIN FUND, DER OHNE PRUEFLAUF LIVE GEGANGEN WAERE: Der Server sperrt Mikrofon und Kamera per Permissions-Policy auf ALLEN Seiten. Der erste Lauf meldete "microphone is not allowed in this document" -- der Anruf haette bei JEDEM versagt, mit einer Meldung, die auf die falsche Faehrte fuehrt (man sucht an den Browsereinstellungen). Die Sperre bleibt ueberall und ist an genau EINER Stelle geoeffnet: der Chat-Seite, und nur fuer sie selbst (`self`, nicht `*`). NOCH NICHT GEBAUT -- und ausdruecklich nicht heimlich: coturn. Ohne Vermittlungsserver klappen Anrufe nur im selben Netz. Die Adressen stehen in den Einstellungen statt im Quelltext; sie lassen sich nachtragen, ohne eine Zeile zu aendern. Ein oeffentlicher STUN-Dienst als Standard kam nicht in Frage: Er saehe bei jedem Anruf die IP-Adressen beider Teilnehmer, und fuer ein Team, das ueber Moderation und Vorfaelle spricht, ist das keine Kleinigkeit. server/pruef-anruf.mjs, 40 Pruefungen. Der wichtigste Abschnitt: Wer nicht in den Raum gehoert, kommt an KEINE Route. Ein Anruf hinterlaesst keine Spur -- wer mithoert, faellt nicht auf. Gegenproben, jede zielgenau: Empfaengerpruefung der Signalisierung weg -> 1 rot Raumpruefung weg -> 5 rot (jede Route offen) Kopfzeilen-Ausnahme weg -> 4 rot Gruen: anruf, chat, chat-optik, chat-kanaele, css-klassen, namen, struktur. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,443 @@
|
||||
/* =====================================================================
|
||||
TELEFONIEREN IM CHAT (18.09.2026)
|
||||
|
||||
Filipe: „ich will dass du das nimmst was man selbst in die app
|
||||
reinsetzten kann, nicht meinen pc belastet und trotzdem vielleicht
|
||||
in gruppe, mit video oder einzelnd."
|
||||
|
||||
DER TON GEHT NICHT ÜBER DEN SERVER. Er geht direkt von Browser zu
|
||||
Browser. Der Server reicht nur die Verbindungsdaten weiter -- ein
|
||||
paar Kilobyte je Anruf, danach ist er aus dem Spiel. Das ist die
|
||||
Antwort auf „nicht meinen PC belasten": Bei zwei Teilnehmern kodiert
|
||||
jedes Gerät genau einen Strom und dekodiert einen, wie bei jedem
|
||||
gewöhnlichen Videoanruf.
|
||||
|
||||
---------------------------------------------------------------------
|
||||
WARUM EINE VERBINDUNG JE GEGENÜBER
|
||||
|
||||
Bei drei Leuten baut jeder mit jedem eine eigene Verbindung auf --
|
||||
`verbindungen` ist deshalb eine Karte von Personennummer auf
|
||||
RTCPeerConnection und keine einzelne Variable. Mit einer einzelnen
|
||||
ginge zu zweit alles gut, und beim dritten Teilnehmer wäre die erste
|
||||
Verbindung stillschweigend überschrieben: Man sieht sich zu dritt im
|
||||
Kasten und hört nur einen.
|
||||
|
||||
---------------------------------------------------------------------
|
||||
WER RUFT AN, WER ANTWORTET
|
||||
|
||||
Bei WebRTC muss genau EINER das Angebot machen, sonst reden beide
|
||||
gleichzeitig („glare"): Zwei Angebote heben sich auf, und die
|
||||
Verbindung kommt nie zustande.
|
||||
|
||||
DIE REGEL IST DIE KLEINERE NUMMER. Wer die niedrigere Personennummer
|
||||
hat, macht das Angebot; der andere wartet. Das ist willkürlich, aber
|
||||
es ist auf beiden Seiten OHNE ABSPRACHE dieselbe Entscheidung -- und
|
||||
genau das braucht man hier. Eine Absprache darüber wäre wieder eine
|
||||
Nachricht, die verlorengehen kann.
|
||||
===================================================================== */
|
||||
(() => {
|
||||
'use strict';
|
||||
if (!window.RTCPeerConnection) return; // sehr alter Browser
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
|
||||
/* Was der Server über die Verbindungsadressen sagt. */
|
||||
let adressen = [];
|
||||
let nurGleichesNetz = false;
|
||||
let gruppeMax = 4;
|
||||
|
||||
/* Der laufende Anruf. `null`, wenn keiner läuft. */
|
||||
let anruf = null; // { raumId, video, verbindungen: Map, stroeme: Map, eigener }
|
||||
|
||||
let ichId = null;
|
||||
|
||||
const el = (art, klasse, text) => {
|
||||
const k = document.createElement(art);
|
||||
if (klasse) k.className = klasse;
|
||||
if (text != null) k.textContent = text;
|
||||
return k;
|
||||
};
|
||||
|
||||
/* ---------- Der Kasten ------------------------------------------------ */
|
||||
|
||||
function kastenBauen() {
|
||||
let k = $('anruf');
|
||||
if (k) return k;
|
||||
k = el('div', 'anruf');
|
||||
k.id = 'anruf';
|
||||
k.hidden = true;
|
||||
k.setAttribute('role', 'dialog');
|
||||
k.setAttribute('aria-label', 'Anruf');
|
||||
k.innerHTML = `
|
||||
<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--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-video').addEventListener('click', videoSchalten);
|
||||
$('anruf-auflegen').addEventListener('click', () => auflegen(true));
|
||||
return k;
|
||||
}
|
||||
|
||||
const lage = (text) => { const l = $('anruf-lage'); if (l) l.textContent = text; };
|
||||
|
||||
/* ---------- Die Gegenstelle ------------------------------------------- */
|
||||
|
||||
function verbindungFuer(wer) {
|
||||
if (anruf.verbindungen.has(wer)) return anruf.verbindungen.get(wer);
|
||||
|
||||
const v = new RTCPeerConnection({ iceServers: adressen });
|
||||
anruf.verbindungen.set(wer, v);
|
||||
|
||||
/* Den eigenen Ton (und Bild) hineingeben. */
|
||||
for (const spur of anruf.eigener.getTracks()) v.addTrack(spur, anruf.eigener);
|
||||
|
||||
/* DIE VERBINDUNGSWEGE. Jeder gefundene Weg wird einzeln geschickt,
|
||||
sobald er da ist -- nicht gesammelt am Ende. Wer wartet, bis alle
|
||||
gefunden sind, wartet auf den langsamsten, und das sind mehrere
|
||||
Sekunden Stille am Anfang jedes Gesprächs. */
|
||||
v.onicecandidate = (e) => {
|
||||
if (e.candidate) schicken(wer, { weg: e.candidate });
|
||||
};
|
||||
|
||||
v.ontrack = (e) => {
|
||||
anruf.stroeme.set(wer, e.streams[0]);
|
||||
leuteZeichnen();
|
||||
};
|
||||
|
||||
v.onconnectionstatechange = () => {
|
||||
if (v.connectionState === 'connected') lage('Verbunden');
|
||||
/* `failed` heisst: Es kommt nichts mehr. Das gehoert gesagt --
|
||||
ein Kasten, der ewig „Verbindung …" zeigt, laesst einen warten,
|
||||
wo nichts mehr kommt. */
|
||||
if (v.connectionState === 'failed') {
|
||||
lage(nurGleichesNetz
|
||||
? 'Keine Verbindung – dafür fehlt noch ein Vermittlungsserver.'
|
||||
: 'Keine Verbindung.');
|
||||
}
|
||||
};
|
||||
return v;
|
||||
}
|
||||
|
||||
async function angebotMachen(wer) {
|
||||
const v = verbindungFuer(wer);
|
||||
const angebot = await v.createOffer();
|
||||
await v.setLocalDescription(angebot);
|
||||
schicken(wer, { angebot: v.localDescription });
|
||||
}
|
||||
|
||||
async function signalVerarbeiten(von, inhalt) {
|
||||
if (!anruf) return;
|
||||
const v = verbindungFuer(von);
|
||||
try {
|
||||
if (inhalt.angebot) {
|
||||
await v.setRemoteDescription(inhalt.angebot);
|
||||
const antwort = await v.createAnswer();
|
||||
await v.setLocalDescription(antwort);
|
||||
schicken(von, { antwort: v.localDescription });
|
||||
} else if (inhalt.antwort) {
|
||||
await v.setRemoteDescription(inhalt.antwort);
|
||||
} else if (inhalt.weg) {
|
||||
/* Ein Weg kann eintreffen, bevor die Beschreibung da ist --
|
||||
dann wirft addIceCandidate. Das ist kein Fehler, sondern
|
||||
Reihenfolge; er wird beim nächsten Versuch ohnehin wieder
|
||||
angeboten. */
|
||||
await v.addIceCandidate(inhalt.weg).catch(() => {});
|
||||
}
|
||||
} catch (f) {
|
||||
console.warn('[anruf] Signal:', f?.message);
|
||||
}
|
||||
}
|
||||
|
||||
const schicken = (an, inhalt) =>
|
||||
fetch(`/workspace/api/anruf/${anruf.raumId}/signal`, {
|
||||
method: 'POST', credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ an, inhalt }),
|
||||
}).catch(() => {});
|
||||
|
||||
/* ---------- Anfangen und Aufhören -------------------------------------- */
|
||||
|
||||
async function eigenenStromHolen(mitVideo) {
|
||||
try {
|
||||
return await navigator.mediaDevices.getUserMedia({
|
||||
audio: { echoCancellation: true, noiseSuppression: true },
|
||||
video: mitVideo ? { width: { ideal: 640 }, height: { ideal: 480 } } : false,
|
||||
});
|
||||
} catch (f) {
|
||||
/* DER HÄUFIGSTE FALL IST NICHT „KAPUTT", SONDERN „ABGELEHNT".
|
||||
Ein „ging nicht" wäre hier die unbrauchbarste Auskunft von
|
||||
allen -- man sucht dann am Gerät statt an der Berechtigung. */
|
||||
if (f?.name === 'NotAllowedError') {
|
||||
throw new Error('Der Browser lässt das Mikrofon nicht zu. '
|
||||
+ 'Im Schloss-Symbol neben der Adresse freigeben.');
|
||||
}
|
||||
if (f?.name === 'NotFoundError') {
|
||||
throw new Error('Kein Mikrofon gefunden.');
|
||||
}
|
||||
throw new Error('Das Mikrofon ließ sich nicht öffnen.');
|
||||
}
|
||||
}
|
||||
|
||||
async function starten(raumId, mitVideo) {
|
||||
if (anruf) return;
|
||||
kastenBauen();
|
||||
$('anruf').hidden = false;
|
||||
lage('Mikrofon …');
|
||||
let eigener;
|
||||
try {
|
||||
eigener = await eigenenStromHolen(mitVideo);
|
||||
} catch (f) {
|
||||
lage(f.message);
|
||||
setTimeout(() => { if (!anruf) $('anruf').hidden = true; }, 6000);
|
||||
return;
|
||||
}
|
||||
anruf = { raumId, video: mitVideo, verbindungen: new Map(),
|
||||
stroeme: new Map(), eigener, beginn: Date.now() };
|
||||
$('anruf-video').hidden = !mitVideo;
|
||||
if (mitVideo) $('anruf-video').setAttribute('aria-pressed', 'true');
|
||||
lage('Es klingelt …');
|
||||
uhrLaufen();
|
||||
|
||||
const a = await fetch(`/workspace/api/anruf/${raumId}/start`, {
|
||||
method: 'POST', credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ video: mitVideo }),
|
||||
}).catch(() => null);
|
||||
if (!a || !a.ok) {
|
||||
const d = a ? await a.json().catch(() => ({})) : {};
|
||||
lage(d.fehler || 'Der Anruf ließ sich nicht starten.');
|
||||
setTimeout(() => auflegen(false), 5000);
|
||||
return;
|
||||
}
|
||||
leuteZeichnen();
|
||||
}
|
||||
|
||||
async function annehmen(raumId) {
|
||||
const a = await fetch(`/workspace/api/anruf/${raumId}/dabei`, {
|
||||
method: 'POST', credentials: 'same-origin',
|
||||
}).catch(() => null);
|
||||
if (!a || !a.ok) {
|
||||
const d = a ? await a.json().catch(() => ({})) : {};
|
||||
window.anrufMeldung?.(d.fehler || 'Der Anruf ist schon vorbei.');
|
||||
klingelnAus();
|
||||
return;
|
||||
}
|
||||
const d = await a.json();
|
||||
kastenBauen();
|
||||
$('anruf').hidden = false;
|
||||
let eigener;
|
||||
try {
|
||||
eigener = await eigenenStromHolen(d.video);
|
||||
} catch (f) {
|
||||
lage(f.message);
|
||||
await fetch(`/workspace/api/anruf/${raumId}/ende`,
|
||||
{ method: 'POST', credentials: 'same-origin' }).catch(() => {});
|
||||
setTimeout(() => { $('anruf').hidden = true; }, 6000);
|
||||
return;
|
||||
}
|
||||
anruf = { raumId, video: d.video, verbindungen: new Map(),
|
||||
stroeme: new Map(), eigener, beginn: Date.now() };
|
||||
$('anruf-video').hidden = !d.video;
|
||||
if (d.video) $('anruf-video').setAttribute('aria-pressed', 'true');
|
||||
klingelnAus();
|
||||
lage('Verbindung …');
|
||||
uhrLaufen();
|
||||
|
||||
/* Mit allen, die schon dabei sind, eine Verbindung aufbauen --
|
||||
aber das ANGEBOT macht nur, wer die kleinere Nummer hat. */
|
||||
for (const p of d.wer || []) {
|
||||
if (p.id === ichId) continue;
|
||||
if (ichId < p.id) angebotMachen(p.id);
|
||||
else verbindungFuer(p.id);
|
||||
}
|
||||
leuteZeichnen();
|
||||
}
|
||||
|
||||
async function auflegen(melden) {
|
||||
klingelnAus();
|
||||
if (!anruf) { const k = $('anruf'); if (k) k.hidden = true; return; }
|
||||
const raumId = anruf.raumId;
|
||||
for (const v of anruf.verbindungen.values()) { try { v.close(); } catch { /* egal */ } }
|
||||
for (const s of anruf.eigener.getTracks()) s.stop();
|
||||
anruf = null;
|
||||
const k = $('anruf');
|
||||
if (k) k.hidden = true;
|
||||
uhrStoppen();
|
||||
if (melden) {
|
||||
await fetch(`/workspace/api/anruf/${raumId}/ende`,
|
||||
{ method: 'POST', credentials: 'same-origin' }).catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Was man sieht --------------------------------------------- */
|
||||
|
||||
function leuteZeichnen() {
|
||||
const ziel = $('anruf-leute');
|
||||
if (!ziel || !anruf) return;
|
||||
ziel.textContent = '';
|
||||
/* Das eigene Bild zuerst und stumm -- sich selbst zu hören ist ein
|
||||
Echo, das jedes Gespräch unbrauchbar macht. */
|
||||
if (anruf.video) {
|
||||
const eigen = el('video', 'anruf__bild anruf__bild--ich');
|
||||
eigen.autoplay = true; eigen.playsInline = true; eigen.muted = true;
|
||||
eigen.srcObject = anruf.eigener;
|
||||
ziel.append(eigen);
|
||||
}
|
||||
for (const [wer, strom] of anruf.stroeme) {
|
||||
if (anruf.video) {
|
||||
const v = el('video', 'anruf__bild');
|
||||
v.autoplay = true; v.playsInline = true;
|
||||
v.srcObject = strom;
|
||||
ziel.append(v);
|
||||
} else {
|
||||
const t = el('audio');
|
||||
t.autoplay = true;
|
||||
t.srcObject = strom;
|
||||
ziel.append(t);
|
||||
ziel.append(el('span', 'anruf__name', 'Verbunden'));
|
||||
}
|
||||
void wer;
|
||||
}
|
||||
}
|
||||
|
||||
let uhr = null;
|
||||
function uhrLaufen() {
|
||||
uhrStoppen();
|
||||
uhr = setInterval(() => {
|
||||
if (!anruf) return uhrStoppen();
|
||||
const s = Math.floor((Date.now() - anruf.beginn) / 1000);
|
||||
const z = $('anruf-zeit');
|
||||
if (z) z.textContent = `${String(Math.floor(s / 60)).padStart(2, '0')}:`
|
||||
+ `${String(s % 60).padStart(2, '0')}`;
|
||||
}, 1000);
|
||||
}
|
||||
function uhrStoppen() { if (uhr) { clearInterval(uhr); uhr = null; } }
|
||||
|
||||
function tonSchalten() {
|
||||
if (!anruf) return;
|
||||
const an = anruf.eigener.getAudioTracks().some((s) => s.enabled);
|
||||
for (const s of anruf.eigener.getAudioTracks()) s.enabled = !an;
|
||||
const k = $('anruf-ton');
|
||||
k.textContent = an ? 'Mikro aus' : 'Mikro an';
|
||||
k.setAttribute('aria-pressed', String(!an));
|
||||
}
|
||||
|
||||
function videoSchalten() {
|
||||
if (!anruf) return;
|
||||
const an = anruf.eigener.getVideoTracks().some((s) => s.enabled);
|
||||
for (const s of anruf.eigener.getVideoTracks()) s.enabled = !an;
|
||||
const k = $('anruf-video');
|
||||
k.textContent = an ? 'Kamera aus' : 'Kamera an';
|
||||
k.setAttribute('aria-pressed', String(!an));
|
||||
}
|
||||
|
||||
/* ---------- Es klingelt ------------------------------------------------ */
|
||||
|
||||
function klingelnZeigen(raumId, von, mitVideo) {
|
||||
klingelnAus();
|
||||
const k = el('div', 'anruf-klingelt');
|
||||
k.id = 'anruf-klingelt';
|
||||
k.setAttribute('role', 'alertdialog');
|
||||
k.append(el('p', 'anruf-klingelt__wer',
|
||||
`${von?.name || 'Jemand'} ruft an${mitVideo ? ' – mit Video' : ''}`));
|
||||
const reihe = el('div', 'anruf-klingelt__knoepfe');
|
||||
const ja = el('button', 'anruf-klingelt__ja', 'Rangehen');
|
||||
ja.type = 'button';
|
||||
ja.addEventListener('click', () => annehmen(raumId));
|
||||
const nein = el('button', 'anruf-klingelt__nein', 'Ablehnen');
|
||||
nein.type = 'button';
|
||||
nein.addEventListener('click', async () => {
|
||||
klingelnAus();
|
||||
await fetch(`/workspace/api/anruf/${raumId}/ende`,
|
||||
{ method: 'POST', credentials: 'same-origin' }).catch(() => {});
|
||||
});
|
||||
reihe.append(ja, nein);
|
||||
k.append(reihe);
|
||||
document.body.append(k);
|
||||
/* Nach der Klingelzeit von selbst weg -- sonst steht die Einladung
|
||||
zu einem Gespräch da, an dem längst niemand mehr teilnimmt. */
|
||||
setTimeout(klingelnAus, 46000);
|
||||
}
|
||||
function klingelnAus() { $('anruf-klingelt')?.remove(); }
|
||||
|
||||
/* ---------- Was vom Server kommt --------------------------------------- */
|
||||
|
||||
async function ereignis(d) {
|
||||
if (!d || typeof d !== 'object') return;
|
||||
if (d.art === 'klingelt') {
|
||||
if (d.von?.id === ichId) return; // der eigene Anruf
|
||||
if (anruf) return; // telefoniert schon
|
||||
klingelnZeigen(d.raum_id, d.von, d.video);
|
||||
return;
|
||||
}
|
||||
if (d.art === 'dabei') {
|
||||
if (!anruf || d.raum_id !== anruf.raumId) return;
|
||||
if (d.person?.id === ichId) return;
|
||||
lage('Verbunden');
|
||||
/* Der Neue: Angebot macht, wer die kleinere Nummer hat. */
|
||||
if (ichId < d.person.id) angebotMachen(d.person.id);
|
||||
else verbindungFuer(d.person.id);
|
||||
return;
|
||||
}
|
||||
if (d.art === 'signal') {
|
||||
if (!anruf || d.raum_id !== anruf.raumId) return;
|
||||
if (d.an !== ichId) return;
|
||||
await signalVerarbeiten(d.von, d.inhalt);
|
||||
return;
|
||||
}
|
||||
if (d.art === 'weg' || d.art === 'ende') {
|
||||
if (!anruf || d.raum_id !== anruf.raumId) {
|
||||
if (d.art === 'ende') klingelnAus();
|
||||
return;
|
||||
}
|
||||
if (d.person?.id === ichId) return;
|
||||
const v = anruf.verbindungen.get(d.person?.id);
|
||||
if (v) { try { v.close(); } catch { /* egal */ } }
|
||||
anruf.verbindungen.delete(d.person?.id);
|
||||
anruf.stroeme.delete(d.person?.id);
|
||||
leuteZeichnen();
|
||||
if (d.art === 'ende' || !anruf.stroeme.size) {
|
||||
lage('Gespräch beendet');
|
||||
setTimeout(() => auflegen(false), 1200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Nach außen -------------------------------------------------- */
|
||||
|
||||
window.anrufStarten = starten;
|
||||
window.anrufEreignis = ereignis;
|
||||
window.anrufLaeuft = () => !!anruf;
|
||||
window.anrufBereit = () => adressen.length > 0 || nurGleichesNetz;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const a = await fetch('/workspace/api/anruf/adressen', { credentials: 'same-origin' });
|
||||
if (a.ok) {
|
||||
const d = await a.json();
|
||||
adressen = d.adressen || [];
|
||||
nurGleichesNetz = !!d.nur_gleiches_netz;
|
||||
gruppeMax = d.gruppe_max || 4;
|
||||
}
|
||||
} catch { /* dann eben ohne -- im selben Netz geht es trotzdem */ }
|
||||
try {
|
||||
const i = await fetch('/workspace/api/ich', { credentials: 'same-origin' });
|
||||
if (i.ok) ichId = (await i.json())?.id ?? null;
|
||||
} catch { /* der Chat holt es ohnehin auch */ }
|
||||
void gruppeMax;
|
||||
})();
|
||||
|
||||
/* Wer die Seite verlässt, legt auf. Ohne das bleibt er für die
|
||||
anderen „dabei", und sie warten auf jemanden, der weg ist. */
|
||||
window.addEventListener('pagehide', () => { if (anruf) auflegen(true); });
|
||||
})();
|
||||
Reference in New Issue
Block a user