Filipes Wunsch: „auch bei den videos sachen wie pause geschwindigkeit. meine kamera größer machen video kleiner. nur mein bild, nur das video, möglichkeit zwischen allem zu wechseln so wie ich will, auch gerne so dass ich vielleicht noch ein zweites nebenbei vorbereiten kann so dass ich hin und her switchen kann." GESCHWINDIGKEIT Sechs Stufen von 0,5× bis 2× (0,25× fehlt mit Absicht — bei einem Viertel klingt Sprache wie ein defektes Band). Sie gilt für ALLE: Wer sie nur bei sich umstellte, redete über eine Stelle, die die anderen noch nicht gesehen haben. Die OBS-Bühne zieht sie mit nach — ohne das liefe der Stream nach fünf Minuten auf 1,5× zweieinhalb Minuten hinter dem Saal her. Und der Zuschauer SIEHT sie: ein kleines Schild „1,5× Geschwindigkeit" auf der Leinwand, nur wenn es nicht 1× ist. Ohne das hält jeder Zweite seine Leitung für kaputt. Zwei Fallen, die dabei zugemacht wurden: Der Fünf-Sekunden-Takt des Hosts schreibt das Tempo NICHT mit (sonst drehte ein Takt mit altem Wert die Einstellung zurück), und nach jedem Videowechsel wird es neu gesetzt (YouTube stellt beim Laden auf 1 zurück). Gesetzt wird nur, was `getAvailablePlaybackRates()` hergibt — einen unmöglichen Wert ignoriert der Player schweigend, und dann stünde der Knopf auf 1,5 und es liefe 1,0. ZWEI ANORDNUNGEN MEHR „Nur Video" und „Nur Kamera" sind kein weiteres Größenverhältnis, sondern ein Weglassen — und genau das braucht OBS: Dort liegt die Kamera ohnehin als eigene Quelle, die Bühnenseite soll sie nicht doppelt zeigen. `display: none` und nicht `opacity: 0`: ein unsichtbarer YouTube-Rahmen spielt weiter und hält den Ton. Tasten 1–5, wie vorher 1–3. DAS ZWEITE VIDEO — und warum es nicht die Warteschlange ist Die Schlange ist eine Reihenfolge: eins nach dem anderen, das Gespielte ist weg. Filipe will etwas anderes — zwei Videos NEBENEINANDER, hin und her, und jedes merkt sich seine Stelle. Mit der Schlange nachgebaut wäre es eine Schlange, aus der man nie wieder herauskommt. Der Umschalter steht nur da, wenn es etwas zum Umschalten GIBT; ein Knopf, der „kein zweites Video" antwortet, ist im Live eine Falle. Getauscht wird in EINEM Schreibvorgang (BEGIN IMMEDIATE) — ein Abbruch dazwischen hätte dasselbe Video auf beiden Seiten und die gemerkte Stelle des anderen verloren. Und die Stelle kommt vom Host und nicht aus der Datenbank: dort steht der Stand vom letzten Takt, bis zu fünf Sekunden alt. Was daneben bereitliegt, sieht nur, wer sendet — es ist die Rückhand, und die verrät man nicht vorher (`zweit` ist aus `oeffentlich()` ausgenommen). DER FEHLER, DEN DIE MESSUNG GEFUNDEN HAT Bei „Nur Kamera" war der Kamerabehälter 2175 px breit in einer 1072 px breiten Leinwand — von zwei Gästen stand nur einer im Bild, der zweite lag hinter `overflow: hidden`. Auf dem Bildschirmfoto sah das aus wie eine Anordnung für einen, und niemand hätte gefragt, wo der zweite geblieben ist. Zwei Ursachen: Die Leinwand ist ein Raster mit einer Spalte nach Inhaltsbreite — ein zu breites Kind im Fluss zieht die Spalte mit, und `width: 100%` bezog sich danach auf die gewachsene Spalte. Die Begrenzung wuchs also mit dem, was sie begrenzen sollte; `max-width: calc(50% - 8px)` rechnete gegen denselben Wert und war wirkungslos. Jetzt `position: absolute; inset: 0` (kann das Raster nicht mehr aufziehen) und `flex: 1 1 0; min-width: 0` an den Fenstern — eine Regel, die nicht rechnet, kann sich nicht verrechnen. Die Messung prüft seitdem bei JEDER Anordnung, ob alle Kamerafenster innerhalb der Leinwand liegen. GEMESSEN, NICHT ANGENOMMEN Dass in der Datenbank 1.5 steht, sagt nichts darüber, ob das Video schneller läuft. Die Messung liest deshalb die Uhr der Regie zweimal ab und rechnet nach: 1× → 1,00 Sekunden je Sekunde, 2× → 2,00. Der Umschalter ebenso: hin, zurück, und die Uhr steht wieder bei 79 s statt bei 0. GEPRUEFT pruef-reaktion: 260 Prüfungen (vorher 216), 0 Fehler. pruef-buehne 36, pruef-struktur, pruef-meldungen, pruef-tippziele, pruef-css-klassen alle grün. mess-reaktion: Rückgabewert 0, kein einziges ACHTUNG. Co-Authored-By: Claude Opus 5 <[email protected]>
237 lines
9.3 KiB
JavaScript
237 lines
9.3 KiB
JavaScript
/* =====================================================================
|
|
DIE BUEHNENQUELLEN — fuer OBS und TikTok Studio (28.09.2026)
|
|
|
|
Filipe: „ich will das alles auch so perfekt dass ich es ganz
|
|
einfach und easy mit obs oder mit tiktok studio verbinden kann.
|
|
also so dass man dan nur die kamera und das video sieht."
|
|
|
|
---------------------------------------------------------------------
|
|
WARUM OHNE ANMELDUNG — nachgesehen, nicht angenommen
|
|
|
|
OBS speichert die Anmeldung einer Browser-Quelle NICHT zuverlaessig;
|
|
im OBS-Forum stehen dazu Meldungen bis in die aktuelle Fassung. Eine
|
|
Quelle, bei der man sich nach jedem Programmstart neu anmelden muss,
|
|
ist mitten in einer Sendung genau das, was man nicht gebrauchen kann.
|
|
|
|
Deshalb ein SCHLUESSEL in der Adresse — derselbe Weg, den jedes
|
|
Alert-Werkzeug im Netz geht. Wer ihn hat, sieht genau das, was
|
|
ohnehin im Stream steht: das laufende Video und die Spendenkarten.
|
|
Keine Namen von Zusehenden, kein Chat, keine Bedienung.
|
|
|
|
---------------------------------------------------------------------
|
|
DREI QUELLEN, WEIL DREI DINGE VERSCHIEDEN SIND
|
|
|
|
buehne.html Das laufende YouTube-Video, auf die Sekunde genau
|
|
wie bei allen anderen. Als Browser-Quelle in OBS.
|
|
Die EIGENE Kamera gehoert NICHT hier hinein: Sie
|
|
ist in OBS direkt als Geraet verfuegbar, in
|
|
besserer Qualitaet und frei in Groesse und Lage.
|
|
Den Umweg ueber den Browser zu nehmen hiesse,
|
|
Qualitaet gegen nichts einzutauschen.
|
|
|
|
tafel.html Nur die Spendenkarten, auf durchsichtigem Grund.
|
|
Als zweite Browser-Quelle darueber gelegt.
|
|
|
|
Buehnenmodus Die Reaction-Seite selbst, nur ohne alles
|
|
Bedienbare (`?nur=buehne`). Fuer den Fall, dass
|
|
GAESTE im Bild sind: Deren Kameras kommen ueber
|
|
eine Direktverbindung an, und die braucht eine
|
|
angemeldete Seite. Diese eine wird als Fenster
|
|
aufgenommen.
|
|
|
|
---------------------------------------------------------------------
|
|
DER SCHLUESSEL
|
|
|
|
32 Byte aus dem Zufall des Betriebssystems. Er steht in den
|
|
Einstellungen unter einem Namen mit „schluessel" darin — damit
|
|
greift die vorhandene Regel, die Geheimnisse nicht im Klartext ins
|
|
Protokoll schreibt.
|
|
|
|
Er laesst sich jederzeit neu erzeugen. Dann sind die alten Adressen
|
|
tot, und die Quellen in OBS muessen einmal neu eingetragen werden;
|
|
das ist der Preis dafuer, dass man einen verratenen Schluessel
|
|
wirklich loswird.
|
|
===================================================================== */
|
|
import express from "express";
|
|
import { randomBytes, timingSafeEqual } from "node:crypto";
|
|
import { db, sitzungLesen, einstellung, einstellungSetzen, protokolliere, echteIp } from "./workspace.js";
|
|
|
|
export const buehneRouter = express.Router();
|
|
|
|
const SCHLUESSEL_NAME = "buehne_schluessel";
|
|
|
|
/** Wer die Adressen sehen und den Schluessel wechseln darf. */
|
|
const LEITUNG = new Set(["admin", "hand"]);
|
|
|
|
/** Den Schluessel holen — und beim ersten Mal erzeugen.
|
|
*
|
|
* ERZEUGT WIRD ER ERST BEI BEDARF. Ein Schluessel, den niemand
|
|
* angefordert hat, ist ein Geheimnis ohne Zweck: Er liegt herum,
|
|
* wird irgendwann kopiert, und niemand weiss mehr, wofuer er war. */
|
|
export function buehneSchluessel() {
|
|
let s = einstellung(SCHLUESSEL_NAME, "");
|
|
if (!s) {
|
|
s = randomBytes(32).toString("hex");
|
|
einstellungSetzen(SCHLUESSEL_NAME, s, null);
|
|
}
|
|
return s;
|
|
}
|
|
|
|
/** Stimmt der mitgeschickte Schluessel?
|
|
*
|
|
* ZEITGLEICHER VERGLEICH. Ein gewoehnlicher Vergleich bricht beim
|
|
* ersten falschen Zeichen ab; aus den Bruchteilen einer Millisekunde
|
|
* laesst sich ein Schluessel Zeichen fuer Zeichen erraten. Das ist
|
|
* nicht theoretisch -- es ist der Grund, warum es diese Funktion in
|
|
* Node ueberhaupt gibt. */
|
|
function schluesselStimmt(gegeben) {
|
|
const soll = buehneSchluessel();
|
|
const a = Buffer.from(String(gegeben || ""), "utf8");
|
|
const b = Buffer.from(soll, "utf8");
|
|
if (a.length !== b.length) return false;
|
|
try { return timingSafeEqual(a, b); } catch { return false; }
|
|
}
|
|
|
|
function mitSchluessel(req, res, next) {
|
|
const s = req.query?.s || req.get("X-Buehne") || "";
|
|
if (!schluesselStimmt(s)) return res.status(404).end();
|
|
next();
|
|
}
|
|
|
|
/* ---------- Die Zuhoerer ------------------------------------------------
|
|
Eine eigene Liste, nicht die des Hauschats: Dort haengt jeder
|
|
Zuhoerer an einer Person, und genau die gibt es hier nicht. */
|
|
const zuhoerer = new Set();
|
|
|
|
/** Hoechstens so viele Quellen gleichzeitig.
|
|
*
|
|
* Nicht gegen Angriffe -- der Schluessel steht davor -- sondern
|
|
* gegen den Fall, dass OBS bei einer Stoerung immer neu verbindet
|
|
* und die alten Verbindungen nicht abbaut. Ohne Grenze sammeln sich
|
|
* hunderte, und der Server haelt sie alle offen. */
|
|
const MAX_QUELLEN = 20;
|
|
|
|
export function buehneMelden(art, daten) {
|
|
const text = `event: ${art}\ndata: ${JSON.stringify(daten)}\n\n`;
|
|
for (const antwort of [...zuhoerer]) {
|
|
try { antwort.write(text); } catch { zuhoerer.delete(antwort); }
|
|
}
|
|
}
|
|
|
|
/** Wie viele Quellen gerade hoeren — fuer die Anzeige im Pult. */
|
|
export function buehneQuellen() {
|
|
return zuhoerer.size;
|
|
}
|
|
|
|
/* ======================================================================
|
|
DIE WEGE
|
|
====================================================================== */
|
|
|
|
/** Was gerade laeuft. Ein einziger Aufruf beim Start der Quelle. */
|
|
buehneRouter.get("/workspace/api/buehne/lage", mitSchluessel, (req, res) => {
|
|
try {
|
|
const s = db().prepare("SELECT * FROM reaktion WHERE id = 1").get();
|
|
res.set("Cache-Control", "no-store");
|
|
res.json({
|
|
/* NUR, WAS OHNEHIN IM STREAM STEHT. Kein Chat, keine Namen von
|
|
Zusehenden, keine Zahlen ueber das Haus. Wer den Schluessel
|
|
hat, sieht nichts, was nicht gerade gesendet wird. */
|
|
stand: s?.stand || "zu",
|
|
video: s?.video || "",
|
|
video_titel: s?.video_titel || "",
|
|
laeuft: !!s?.laeuft,
|
|
sekunde: s?.sekunde || 0,
|
|
/* DIE GESCHWINDIGKEIT MUSS MIT. Ohne sie liefe das Video in
|
|
OBS immer auf 1,0 -- und sobald die Regie auf 1,5 stellt,
|
|
liefe der Stream langsamer als der Saal. Nach fuenf Minuten
|
|
waeren das zweieinhalb Minuten Unterschied, und was Filipe
|
|
kommentiert, haetten die Zuschauer noch gar nicht gesehen. */
|
|
tempo: Number(s?.tempo) || 1,
|
|
gesendet: Date.now(),
|
|
titel: s?.titel || "",
|
|
});
|
|
} catch (fehler) {
|
|
console.error("[buehne] Lage:", fehler?.message);
|
|
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
|
}
|
|
});
|
|
|
|
/** Der Strom: Videowechsel und Spendenkarten. */
|
|
buehneRouter.get("/workspace/api/buehne/strom", mitSchluessel, (req, res) => {
|
|
if (zuhoerer.size >= MAX_QUELLEN) return res.status(503).end();
|
|
res.set({
|
|
"Content-Type": "text/event-stream",
|
|
"Cache-Control": "no-store",
|
|
Connection: "keep-alive",
|
|
/* Kein Puffer dazwischen -- sonst kommt die Karte, wenn die
|
|
naechste kommt. */
|
|
"X-Accel-Buffering": "no",
|
|
});
|
|
res.flushHeaders?.();
|
|
res.write("retry: 3000\n\n");
|
|
zuhoerer.add(res);
|
|
|
|
/* ALLE 25 SEKUNDEN EIN LEBENSZEICHEN. Ein Strom, durch den nichts
|
|
fliesst, wird von jedem Vermittler irgendwann geschlossen -- und
|
|
OBS merkt es erst, wenn die naechste Karte ausbleibt. */
|
|
const puls = setInterval(() => {
|
|
try { res.write(": puls\n\n"); } catch { /* gleich weg */ }
|
|
}, 25_000);
|
|
|
|
req.on("close", () => {
|
|
clearInterval(puls);
|
|
zuhoerer.delete(res);
|
|
});
|
|
});
|
|
|
|
/* ---------- Fuer das Regiepult ----------------------------------------- */
|
|
function nurLeitung(req, res, next) {
|
|
const p = sitzungLesen(req);
|
|
if (!p) return res.status(401).json({ fehler: "nicht_angemeldet" });
|
|
if (p.haus === "agentur") return res.status(404).end();
|
|
if (!LEITUNG.has(p.rolle)) return res.status(403).json({ fehler: "nur_leitung" });
|
|
req.person = p;
|
|
next();
|
|
}
|
|
|
|
buehneRouter.get("/workspace/api/buehne/adressen", nurLeitung, (req, res) => {
|
|
try {
|
|
const s = buehneSchluessel();
|
|
const wurzel = `https://${req.get("Host")}`;
|
|
res.set("Cache-Control", "no-store");
|
|
res.json({
|
|
video: `${wurzel}/workspace/buehne.html?s=${s}`,
|
|
tafel: `${wurzel}/workspace/tafel.html?s=${s}`,
|
|
buehnenmodus: `${wurzel}/workspace/reaktion.html?nur=buehne`,
|
|
quellen: buehneQuellen(),
|
|
});
|
|
} catch (fehler) {
|
|
console.error("[buehne] Adressen:", fehler?.message);
|
|
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
|
}
|
|
});
|
|
|
|
buehneRouter.post("/workspace/api/buehne/schluessel", nurLeitung, (req, res) => {
|
|
try {
|
|
const neu = randomBytes(32).toString("hex");
|
|
einstellungSetzen(SCHLUESSEL_NAME, neu, req.person);
|
|
protokolliere(req.person.id, "buehne_schluessel", "neu erzeugt", echteIp(req));
|
|
/* DIE ALTEN QUELLEN WERDEN GESCHLOSSEN. Sonst liefe eine Quelle
|
|
mit dem alten Schluessel weiter, obwohl er zurueckgezogen ist
|
|
-- und man haelt sich fuer sicher, ohne es zu sein. */
|
|
for (const antwort of [...zuhoerer]) {
|
|
try { antwort.end(); } catch { /* egal */ }
|
|
zuhoerer.delete(antwort);
|
|
}
|
|
const wurzel = `https://${req.get("Host")}`;
|
|
res.json({
|
|
video: `${wurzel}/workspace/buehne.html?s=${neu}`,
|
|
tafel: `${wurzel}/workspace/tafel.html?s=${neu}`,
|
|
quellen: 0,
|
|
});
|
|
} catch (fehler) {
|
|
console.error("[buehne] Schluessel:", fehler?.message);
|
|
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
|
}
|
|
});
|