Files
dogfather-universe/workspace/profil.html
T
DogFatherGitandClaude Opus 5 e93c4067f9 Das Video haengt nicht mehr, wenn die Kamera laeuft
Filipe, am Tag einer Sendung: „sobald meine kamera auch zu sehen ist,
also mich, dan haengen die videos EXTREEEEEM. wenn das video alleine
nur laeuft dan laeuft es fast perfekt."

Haus: Team Dogi. Zwei Ursachen, und BEIDE sind nur aktiv, wenn
Kameras sichtbar sind -- genau deshalb lief das Video allein sauber.

1. ZWOELF KODIERER OHNE JEDE GRENZE

Die Reaction verbindet jeden mit jedem. Fuer jeden Zuschauer baut der
Host eine eigene Verbindung auf, und jede hat ihren EIGENEN Kodierer:
Bei zwoelf Sichtplaetzen kodiert sein Rechner dasselbe Gesicht
zwoelfmal gleichzeitig, waehrend daneben das Video dekodiert wird.

Und an keinem einzigen Sender stand eine Grenze. `addTrack` ohne ein
Wort zu `maxBitrate`, `maxFramerate`, `scaleResolutionDownBy` oder
`degradationPreference` -- zwoelf Kodierer, die alle gleichzeitig „so
gut wie moeglich" versuchen und dem Video die Rechenzeit wegnehmen.

Jetzt: 220 kbit, 15 Bilder, Aufloesung halbiert (240x180 gehen
hinaus, das Fenster ist 200 Pixel breit), `balanced`. Rund ein
Sechstel der bisherigen Rechenlast. Der geteilte Bildschirm bekommt
eigene Werte -- dort ist die Aufloesung der Zweck und die Bildrate
fast egal.

2. MATTGLAS UEBER EINEM LAUFENDEN VIDEO

`backdrop-filter` zwingt die Grafikkarte, den Bereich DAHINTER neu zu
lesen und weichzuzeichnen. Ueber einer stehenden Flaeche kostet das
einmal etwas; ueber einem laufenden Video bei JEDEM Bild -- auf
derselben Grafikkarte, die das Video dekodiert.

Vier Stellen lagen auf der Leinwand: das Namensschild JEDES
Kamerafensters (bei voller Sendung dreizehnmal), die Tempoanzeige,
die Senderleiste und der Ton-Knopf. Alle vier tragen jetzt einen
deckenderen Grund und keinen Weichzeichner. Dazu `contain: paint` am
Kamerafenster: Ein ankommendes Kamerabild zieht keine Neuzeichnung
der Leinwand mehr nach sich.

EIN RUECKZIEHER, UND ZWAR EIN WICHTIGER

Mein erster Griff war, die Kamera kleiner aufzunehmen (480x360 statt
640x480). `mess-reaktion` meldete daraufhin „Im Vorraum laeuft kein
eigenes Bild" -- eine Warnung, die vorher nicht da war. 640x480 kann
jede Kamera, 480x360 nicht, und `ideal` ist zwar nur ein Wunsch, aber
was dabei herauskommt, entscheidet der Treiber. Am Abend einer Sendung
ist „vielleicht kein Bild" der schlechteste aller Tausche. Die
Aufloesung bleibt deshalb, kleiner gerechnet wird im Kodierer -- dort
ist es nachweislich erlaubt und kann nichts verhindern, was vorher
ging.

GEMESSEN -- mess-kameralast.mjs (neu), 13 Messungen, 0 Fehler

Sie fragt nicht „kommt ein Bild an" (das war immer mit Ja beantwortet),
sondern WIE TEUER das Bild ist, das hinausgeht -- und zwar an der
LAUFENDEN Verbindung ueber `getParameters()`, nicht im Quelltext. Eine
Zahl im Code beweist nicht, dass der Browser sie uebernommen hat.

Zum Mattglas stellt sie die PRAEZISE Frage: Der erste Entwurf suchte
jedes `backdrop-filter` auf der Seite und meldete drei, die gar nicht
ueber der Leinwand liegen (Kopfleiste, Regieleiste, Buehnenschild) --
teuer ist es aber nur, wenn sich dahinter etwas bewegt. Gemessen wird
jetzt die UEBERSCHNEIDUNG mit dem Videobereich; so kamen die zwei
heraus, die ich uebersehen hatte.

  mess-kameralast (neu)   13, 0 Fehler
  mess-reaktion           0 ACHTUNG (mit dem Rueckzieher wieder sauber)
  pruef-reaktion          588, 0 Fehler
  pruef-css-klassen       gruen

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-10-08 21:58:37 +02:00

230 lines
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Creator-Profil · Spicy & Dogi</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<!-- Die Farbe der Fensterleiste, wenn der Workspace als App laeuft.
Stand auf #0674b9 (kraeftiges Blau) und stach damit als einziger
heller Balken ueber einer durchweg dunklen Seite. Jetzt derselbe
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
eine Flaeche sind statt zweier. -->
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202610082157" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610082157" />
<link rel="stylesheet" href="assets/css/gate.css?v=202610082157" />
<link rel="stylesheet" href="assets/css/start.css?v=202610082157" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202610082157" />
<link rel="stylesheet" href="assets/css/profil.css?v=202610082157" />
<link rel="stylesheet" href="assets/css/module.css?v=202610082157" />
<!-- haus.css MUSS die letzte Stilvorlage sein (10.09.2026).
Auf der Agenturadresse ist sie leer -- das Haus hier IST der
Grundzustand. Auf der Adresse von Team Dogi biegt der Server
genau diesen Dateinamen auf crew-haus.css um, und die Seite
kommt schon beim ERSTEN Abruf in Lila und Babyblau an --
ohne Umfaerben im Browser, ohne Flackern. -->
<link rel="stylesheet" href="assets/css/haus.css?v=202610082157" />
</head>
<body class="start" data-buehne="halle">
<!-- Der Schleier ueber der Buehne (Casper und HasiDog in den unteren
Ecken, siehe start.css). Ein eigenes Element statt eines dritten
Pseudo-Elements -- body hat nur ::before und ::after. -->
<div class="schleier" aria-hidden="true"></div>
<header class="kopfleiste">
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.5 5.5 8 12l6.5 6.5" />
</svg>
<span class="zurueck-knopf__text">Zurück</span>
</button>
<p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Profil</span></p>
<div class="kopfleiste__rechts">
<span class="wer" id="wer">…</span>
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
</div>
</header>
<main class="inhalt">
<section class="kopf-zeile">
<div>
<p class="marke">Onboarding</p>
<h1 class="titel" id="titel">Creator-Profil</h1>
<p class="unterzeile" id="unterzeile">…</p>
</div>
<div id="auswahl-block" hidden>
<label class="feld-schild" for="auswahl">Creator</label>
<select id="auswahl"></select>
</div>
</section>
<!-- Der eigene Steckbrief -- hier NUR fuer Creator, weil ein Creator
nur eine Profilseite hat und beides zusammengehoert.
Scouts, Manager und DogFather sehen ihn auf steckbrief.html.
Grund: Auf dieser Seite steht die Akte eines ANDEREN Menschen
("Profil: SpongBobSchwammKopf"). Der eigene Steckbrief mittendrin
ergab zwei Personen auf einem Bildschirm, ohne dass klar war,
welche gerade gemeint ist. steckbrief.js blendet ihn hier nur
fuer Creator ein. -->
<section class="steckbrief" id="steckbrief" data-nur-creator="ja" hidden>
<div class="steckbrief__kopf">
<div class="steckbrief__bildfeld">
<span class="steckbrief__bild" id="sb-bild" aria-hidden="true"></span>
<div class="steckbrief__bildknoepfe">
<label class="schritt" for="sb-datei">Bild wählen</label>
<input type="file" id="sb-datei" accept="image/jpeg,image/png,image/webp" hidden />
<button type="button" class="schritt" id="sb-bild-weg" hidden>entfernen</button>
</div>
</div>
<div class="steckbrief__text">
<p class="feldschild">Mein Profil</p>
<h2 class="steckbrief__name" id="sb-name">…</h2>
<p class="steckbrief__rolle" id="sb-rolle"></p>
<label class="feld-schild" for="sb-ueber">Ein Satz über dich</label>
<textarea id="sb-ueber" rows="2" maxlength="400"
placeholder="z. B. Ich streame Gaming und Just Chatting, meistens abends."></textarea>
<p class="feldschild steckbrief__schild">Meine Kanäle</p>
<!-- Bewusst nur der öffentliche Name, kein Login: siehe die
Begründung im Kopf von server/workspace-steckbrief.js. -->
<div class="steckbrief__kanaele" id="sb-kanaele"></div>
<p class="fehler" id="sb-fehler" role="alert" aria-live="polite"></p>
<div class="steckbrief__fuss">
<button type="button" class="knopf knopf--klein" id="sb-speichern">Profil speichern</button>
<span class="steckbrief__stand" id="sb-stand" role="status" aria-live="polite"></span>
</div>
</div>
</div>
</section>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<form id="formular" hidden>
<fieldset class="gruppe">
<legend class="gruppe__titel">Stammdaten</legend>
<p class="gruppe__text">Wer ist der Creator, und wie arbeitet er?</p>
<label class="feld-schild" for="handles">Social-Handles</label>
<textarea id="handles" rows="2" maxlength="2000"
placeholder="TikTok, Instagram, Discord …"></textarea>
<label class="feld-schild" for="nische">Nische &amp; Content-Stil</label>
<textarea id="nische" rows="2" maxlength="2000"
placeholder="Worum geht es, und wie wirkt es?"></textarea>
<label class="feld-schild" for="live_zeiten">LIVE-Zeiten &amp; Routinen</label>
<textarea id="live_zeiten" rows="2" maxlength="2000"
placeholder="Wann wird gestreamt, wie regelmäßig?"></textarea>
<label class="feld-schild" for="technik">Technik-Setup &amp; Tools</label>
<textarea id="technik" rows="2" maxlength="2000"
placeholder="PC/Handy, Kamera, Mikro, OBS …"></textarea>
</fieldset>
<fieldset class="gruppe">
<legend class="gruppe__titel">Ziele</legend>
<p class="gruppe__text">Was soll wachsen? Aus dem Konzept, Seite 5.</p>
<label class="feld-schild" for="ziel_live">LIVE-Qualität &amp; Bindung</label>
<textarea id="ziel_live" rows="2" maxlength="2000"></textarea>
<label class="feld-schild" for="ziel_content">Content-Reichweite</label>
<textarea id="ziel_content" rows="2" maxlength="2000"></textarea>
<label class="feld-schild" for="ziel_community">Community &amp; Wiederkehr</label>
<textarea id="ziel_community" rows="2" maxlength="2000"></textarea>
<label class="feld-schild" for="ziel_technik">Technische Stabilität</label>
<textarea id="ziel_technik" rows="2" maxlength="2000"></textarea>
</fieldset>
<fieldset class="gruppe">
<legend class="gruppe__titel">90-Tage-Plan</legend>
<p class="gruppe__text">Wenige Punkte, dafür verbindlich – Top&nbsp;3 aus dem Konzept.</p>
<label class="feld-schild" for="plan_prio1">Priorität 1</label>
<input id="plan_prio1" maxlength="2000" />
<label class="feld-schild" for="plan_prio2">Priorität 2</label>
<input id="plan_prio2" maxlength="2000" />
<label class="feld-schild" for="plan_prio3">Priorität 3</label>
<input id="plan_prio3" maxlength="2000" />
<div class="gruppe__raster" id="termine" hidden>
<div>
<label class="feld-schild" for="plan_start">Plan-Start</label>
<input id="plan_start" type="date" />
</div>
<div>
<label class="feld-schild" for="naechster_review">Nächster Review-Termin</label>
<input id="naechster_review" type="date" />
</div>
</div>
</fieldset>
<!-- Nur für DogFather. Der Server schickt dieses Feld an Creator
gar nicht erst mit. -->
<fieldset class="gruppe gruppe--intern" id="gruppe-intern" hidden>
<legend class="gruppe__titel">Interne Notiz</legend>
<p class="gruppe__text">
Sieht <strong>nur DogFather</strong>. Der Creator bekommt dieses Feld
weder angezeigt noch übertragen.
</p>
<!-- Beschriftung ergänzt 04.09.2026 (Audit): Als einziges der
vierzehn Felder auf dieser Seite hatte dieses keine. Die
Überschrift der Gruppe steht zwar darüber, gehört für ein
Vorleseprogramm aber nicht zum Feld -- dort kam schlicht
"Textfeld" an, ohne zu sagen, wofür. -->
<label class="feld-schild" for="admin_notiz">Interne Notiz zum Creator</label>
<textarea id="admin_notiz" rows="4" maxlength="2000"></textarea>
</fieldset>
<div class="speicher-leiste">
<button type="submit" class="knopf knopf--klein" id="speichern">Speichern</button>
<span class="leise" id="stand"></span>
</div>
</form>
<!-- DAS TEAM (01.09.2026). Steht auch hier, weil ein Creator nur diese
eine Seite hat: Er soll sehen, wer ihn betreut -- mit Gesicht, nicht
nur mit Namen. Wen er sehen darf, entscheidet der Server; für ihn
sind das seine Betreuer und das Management, nicht die anderen
Creator. Für alle übrigen Rollen wird der Block hier gar nicht erst
aufgebaut, sie haben ihn auf steckbrief.html. -->
<section class="team-block" id="team-block" hidden>
<div class="team-block__kopf">
<div>
<p class="feldschild">Das Team</p>
<h2 class="team-block__titel">Wer hier mitarbeitet</h2>
</div>
<span class="team-block__zahl" id="team-zahl"></span>
</div>
<p class="team-block__text" id="team-text"></p>
<div class="team-gitter" id="team"></div>
</section>
</main>
<script src="assets/js/meldung.js?v=202610082157" defer></script>
<script src="assets/js/hochladen.js?v=202610082157" defer></script>
<script src="assets/js/nachfrage.js?v=202610082157" defer></script>
<script src="assets/js/wahl.js?v=202610082157" defer></script>
<script src="assets/js/bereiche.js?v=202610082157" defer></script>
<script src="assets/js/installieren.js?v=202610082157" defer></script>
<script src="assets/js/kopf.js?v=202610082157" defer></script>
<script src="assets/js/glocke.js?v=202610082157" defer></script>
<script src="assets/js/steckbrief.js?v=202610082157" defer></script>
<script src="assets/js/profil.js?v=202610082157" defer></script>
</body>
</html>