Zum Hauptinhalt springen

Screenshot-Vorgaben: Meeting-Hilfe & Verbindungsprobleme

Stand: Juni 2026
Sprache: English
Verwendung in: Meeting-Verbindungsprobleme, Parallele Meeting-Apps

Diese Vorgaben beschreiben Screenshots für die in-app Hilfe (Phase 1–2 in Vistameet-Teams): Pre-Join-Hinweise, Beitrittsfehler, Hilfe-Banner im Meeting, Wiederherstellen-Overlay und Verbindungsstatus-Dialog.

Technische Referenz (App): MeetingHelpPanel, MeetingMediaRecoveryOverlay, MeetingConnectionStatusDialog in Vistameet-Teams.

Allgemeine Aufnahme-Regeln​

RegelWert
Auflösung1920×1080 (wie screenshot-config.json)
BrowserChrome oder Edge, aktueller Stand
Tenant / Logindev03, User 1 (E2E_USER1) — siehe SETUP.md
SprachenJeweils DE und EN (npm run screenshots mit SCREENSHOT_LOCALES=de,en oder manuell nach Sprachwechsel)
Zielordnerdocs/screenshots/de/ bzw. docs/screenshots/en/
Keine echten PersonenDemo-Modus, Testnutzer oder unscharfe Platzhalter-Avatare
Keine sensiblen DatenKeine echten Meeting-IDs, Tokens, E-Mails oder internen URLs in der Adresszeile sichtbar

Hinweis: Die meisten Szenarien erfordern zwei Browser-Profile oder User 1 + User 2 (E2E_USER2), weil Hilfe-Banner erst nach echter LiveKit-Verbindung erscheinen.

Übersicht​

DateinameUI-ElementArtikel
prejoin-parallel-apps-warning.pngBlauer Pre-Join-Hinweis (parallele Apps)Parallele Meeting-Apps
prejoin-join-error-device.pngRoter Beitrittsfehler (Gerät belegt)Verbindungsprobleme, Parallele Apps
meeting-health-help-banner.pngGelbes Hilfe-Banner oben im MeetingVerbindungsprobleme
meeting-media-recovery-overlay.pngWiederherstellen-Overlay (zentriert)Verbindungsprobleme, Parallele Apps
meeting-more-menu-connection-status.pngMenü „⋯ Mehr“ mit Eintrag VerbindungsstatusVerbindungsprobleme
meeting-connection-status-dialog.pngDialog Verbindungsstatus + „Problem melden“Verbindungsprobleme

1. prejoin-parallel-apps-warning.png​

Was zeigen: Pre-Join-Seite mit eingeschalteter Kamera oder Mikrofon und dem blauen Hinweis zu parallelen Meeting-Apps (Teams, Zoom).

Wo in der App: PreJoinPage — role="note", Klassen bg-sky-50 border-sky-400 (Text: preJoinParallelMeetingWarning).

Schritte​

  1. Vistameet-Teams lokal starten (localhost:5173), als User 1 anmelden.
  2. Einstellungen → Allgemein → Pre-Join-Seite immer anzeigen aktivieren (oder Meeting-Link mit Pre-Join öffnen).
  3. Neues Sofort-Meeting erstellen (Kalender → Neues Meeting) oder Test-Raum aus dem Anrufe-Bereich öffnen.
  4. Auf Pre-Join Kamera und Mikrofon einschalten (mindestens eines).
  5. Screenshot: gesamte Pre-Join-Karte inkl. Videovorschau, Gerätesteuerung und blauem Hinweisblock oberhalb der Spalten.

Akzeptanzkriterien​

  • Blauer Hinweis vollständig lesbar (DE oder EN je Locale).
  • Kamera- oder Mikro-Symbol zeigt „an“.
  • Kein roter Fehlerbanner gleichzeitig sichtbar.
  • Viewport 1920×1080, keine Browser-DevTools.

Automatisierung​

Teilweise möglich (screenshot-config.json → prejoin-parallel-apps-warning), sofern stabiler Pre-Join-URL mit Login. Meeting-Raum-URL muss in der Config gepflegt werden (siehe Kommentar in Config).

2. prejoin-join-error-device.png​

Was zeigen: Pre-Join mit rotem Fehlerbanner nach fehlgeschlagenem Beitritt — idealerweise Meldung zu Gerät belegt / paralleler App (device_in_use).

Wo in der App: PreJoinPage — role="alert", bg-red-50 border-red-500; optional darunter Amber-Block mit preJoinDeviceInUseBody.

Schritte (empfohlen: Gerät belegt)​

  1. Parallel Microsoft Teams oder Zoom mit aktiver Kamera starten (Windows: eingebaute Webcam).
  2. Sparks-Meeting mit Kamera und Mikro an beitreten versuchen.
  3. Wenn roter Fehler erscheint: Screenshot vor Klick auf „Ohne Kamera & Mikrofon beitreten“.

Alternative (ohne zweite App): Falsches Passwort / nicht eingeladen — dann Dateiname prejoin-join-error-auth.png als Zusatz-Screenshot; Hauptdokumentation bevorzugt Gerät-belegt-Szene.

Akzeptanzkriterien​

  • Roter Alert mit verständlicher Meldung sichtbar.
  • Buttons „Beitreten“ / „Ohne Kamera & Mikrofon“ weiterhin im Bild.
  • Keine Stack-Traces oder technischen Rohfehler im UI.

Automatisierung​

Manuell (Geräte-Konflikt nicht zuverlässig automatisierbar).

3. meeting-health-help-banner.png​

Was zeigen: Gelbes Hilfe-Banner oben im Meeting (MeetingHelpPanel, variant="banner") — Titel z. B. „Ihre Meeting-Verbindung wirkt unvollständig“ (partial_connection).

Wo in der App: TeamsMeetingRoomContent — Banner erscheint ~15 s nach Connect, wenn Remote-Teilnehmer da sind, aber kein Remote-Video, lokale Kamera aktiv.

Schritte​

  1. User 1: Meeting erstellen, Pre-Join mit Kamera an, beitreten.
  2. User 2 (zweites Browser-Profil / Inkognito): gleichen Link öffnen, ohne Kamera (nur Audio oder komplett stumm) beitreten.
  3. 15–20 s warten auf User-1-Seite.
  4. Screenshot: Meeting-Raum mit Banner oben, eigene Kachel sichtbar, ggf. Remote ohne Video.

Alternative: E2E-Demo mit simulierten Teilnehmern — Banner ggf. per Test-Hook; für Handbuch reicht Zwei-Nutzer-Szenario.

Akzeptanzkriterien​

  • Amber/Gelb-Banner mit Titel, Fließtext und Buttons (Erneut versuchen, Ohne Kamera & Mikrofon, Hilfe-Artikel öffnen).
  • Meeting-Toolbar unten noch erkennbar.
  • Banner nicht abgeschnitten.

Automatisierung​

Manuell oder Playwright-E2E mit zwei Kontexten (Vistameet-Teams tests/e2e/).

4. meeting-media-recovery-overlay.png​

Was zeigen: Halbtransparenter Overlay über dem Meeting (MeetingMediaRecoveryOverlay) mit zentralem Hilfe-Panel nach Verbindungsabbruch.

Wo in der App: z-[20000], dunkler Hintergrund bg-black/80, MeetingHelpPanel + Button Verlassen.

Schritte​

  1. Meeting mit zwei Teilnehmern starten.
  2. Auf Client A: Kamera-Zugriff blockieren — z. B. in Teams parallel Kamera übernehmen, oder in Chrome Website-Einstellungen → Kamera blockieren und Verbindung neu auslösen.
  3. Oder: Netzwerk kurz trennen (Offline-Modus DevTools) bis Recovery erscheint.
  4. Screenshot wenn Overlay mit Erneut versuchen, Ohne Kamera & Mikrofon, Hilfe-Artikel, Verlassen sichtbar ist.

Thema im Screenshot: device_in_use oder connection_interrupted — beide nutzen dasselbe Layout.

Akzeptanzkriterien​

  • Overlay über dimmtem Meeting-Hintergrund.
  • Alle drei Aktionsbuttons + Verlassen sichtbar.
  • Kein zweites überlagerndes Dialog-Fenster.

Automatisierung​

Manuell.

5. meeting-more-menu-connection-status.png​

Was zeigen: Geöffnetes Menü ⋯ Mehr in der Meeting-Toolbar mit Eintrag „Verbindungsstatus“ / Connection status.

Wo in der App: TeamsMeetingRoomContent — Menüpunkt meetingConnectionStatusMenuItem.

Schritte​

  1. Beliebiges aktives Meeting (ein Teilnehmer reicht).
  2. Unten ⋯ Mehr (oder „More“) öffnen.
  3. Screenshot wenn Dropdown/Liste den Eintrag Verbindungsstatus zeigt (weitere Menüpunkte dürfen sichtbar sein).

Akzeptanzkriterien​

  • Menü geöffnet, Eintrag eindeutig lesbar.
  • Meeting-Kontext erkennbar (Toolbar, ggf. Video-Hintergrund).

Automatisierung​

Möglich über actions in screenshot-config.json (Meeting-URL + clickRole „button“ / Menü-Selektor).

6. meeting-connection-status-dialog.png​

Was zeigen: Dialog Verbindungsstatus mit Statuszeilen und Button Problem melden (Kopieren in Zwischenablage).

Wo in der App: MeetingConnectionStatusDialog — Klasse teams-meeting-connection-status-dialog.

Schritte​

  1. Aktives Meeting (idealerweise 2+ Teilnehmer, Kamera/Mikro bekannt).
  2. ⋯ Mehr → Verbindungsstatus öffnen.
  3. Screenshot des gesamten Dialogs inkl.:
    • Meeting-Server: Verbunden
    • Remote-Teilnehmer (Anzahl)
    • Remote-Video (Anzahl)
    • Lokale Kamera / Mikrofon
    • Buttons: Schließen, Hilfe-Artikel, Problem melden

Akzeptanzkriterien​

  • Alle Statuszeilen lesbar; „Verbunden“ in Grün wenn connected.
  • Button Problem melden sichtbar.
  • Keine echten Nutzernamen/IDs im Diagnosebereich (Dialog zeigt nur Snapshot-Felder).

Automatisierung​

Teilweise in Config (meeting-connection-status-dialog) — benötigt stabile Meeting-URL und Menü-Aktionen.

Einbindung in Markdown​

Nach Erstellung der PNGs in den Artikeln referenzieren (Beispiel DE):

> 📸 **Screenshot:** ![Pre-Join: Hinweis parallele Apps](../screenshots/de/prejoin-parallel-apps-warning.png)

Englische Artikel: Pfad ../screenshots/en/….

Checkliste Mitwirkende​

Siehe auch screenshot-checklist.de.md → Abschnitt Meeting-Hilfe & Verbindung.

  • prejoin-parallel-apps-warning (DE + EN)
  • prejoin-join-error-device (DE + EN)
  • meeting-health-help-banner (DE + EN)
  • meeting-media-recovery-overlay (DE + EN)
  • meeting-more-menu-connection-status (DE + EN)
  • meeting-connection-status-dialog (DE + EN)

Verwandte Dateien​

DateiInhalt
SCREENSHOTS_TO_CREATE.mdGesamtliste aller Screens
README.de.mdConfig-Übersicht
scripts/screenshot-config.jsonAutomatisierbare Einträge
Vistameet-Teams docs/MEETING_PARALLEL_APPS_DEVICE_CONFLICT.mdTechnischer Support-Text