niom-webrtc/docs/components/connection_panel.md

ConnectionPanel Component

Zweck

• Stellt Verbindungsstatus dar (WebSocket, Mikrofon) und nimmt Remote-Peer-ID entgegen.
• Hält Signals für Peer-Verbindung als Responder und verwaltet Offer/Answer-Eingang.
• Wird in der Sidebar des VoiceChannelLayout als Karten-Stack (connection-card) dargestellt.

Wichtige Signals

• peer_id, remote_id, connected, websocket
• peer_connection: Responder RtcPeerConnection
• initiator_connection: Referenz auf Initiator-PC (für Answer/Renegotiation)
• local_media: geteilter MediaStream

Ablauf

1. Peer-ID generieren (use_effect mit Timestamp + Random).
2. WebSocket verbinden (ws://localhost:3478/ws): setzt onopen/onclose/onmessage Handler und löst bei Verbindungsabbruch automatisch exponentielles Backoff-Reconnect aus.
3. Offer-Coroutine (use_coroutine): empfängt SignalingMessage vom Typ offer, baut PeerConnection (Responder) und sendet Answer.
4. ICE-Kandidaten: onicecandidate sendet Kandidaten zurück; empfangene Kandidaten werden an vorhandene PCs angehängt.
5. Audio-Wiedergabe: ontrack erstellt <audio> Element und setzt srcObject.

Geplante Verbesserungen

• Room-basierte IDs statt manueller Eingabe.
• UI-Feedback bei kopierter Peer-ID (Clipboard API).
• Mehr Statusanzeigen (ICE connected, TURN usage).
• Countdown/Versuchsindikator für laufende Reconnects im UI anzeigen.