Real-Time Streaming Systems (WebRTC + Live Data) · Lektion

Neuverhandlung und Verbindungsstatus

Lektion 4 von 413 Schritte

Neuverhandlung und Verbindungsstatus ist eine kostenlose Real-Time Streaming Systems (WebRTC + Live Data)-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Real-Time Streaming Systems (WebRTC + Live Data)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Real-Time Streaming Systems (WebRTC + Live Data)-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Connections Are Not Static

You have set up signaling, SDP, and ICE to create a connection. But a real session evolves: a user adds screen share, switches networks, or recovers from a drop. Handling these changes is called renegotiation and state management.

The Connection State Machine

An RTCPeerConnection reports its health through connectionState, moving through values like new, connecting, connected, disconnected, failed, and closed.

pc.onconnectionstatechange = () => {
  console.log('state:', pc.connectionState);
};

Reacting to State

Use the state to drive UI and recovery logic, such as showing a reconnecting spinner or tearing down a dead connection.

pc.onconnectionstatechange = () => {
  switch (pc.connectionState) {
    case 'connected': showCall(); break;
    case 'disconnected': showReconnecting(); break;
    case 'failed': restartConnection(); break;
    case 'closed': cleanup(); break;
  }
};

ICE Connection State

Separately, iceConnectionState tracks the connectivity checks. A transition to disconnected may be temporary, while failed usually means connectivity must be re-established.

pc.oniceconnectionstatechange = () => {
  if (pc.iceConnectionState === 'failed') {
    pc.restartIce();
  }
};

What Is an ICE Restart?

When a network path dies (for example, switching from Wi-Fi to cellular), the existing candidates no longer work. An ICE restart gathers fresh candidates and finds a new path without recreating the whole connection.

When Renegotiation Is Needed

Any change to the set of media tracks or transceivers requires a new offer/answer exchange. The browser tells you via the negotiationneeded event.

pc.onnegotiationneeded = async () => {
  const offer = await pc.createOffer();
  await pc.setLocalDescription(offer);
  signaling.send({ type: 'offer', sdp: offer });
};

Adding a Track Mid-Call

Adding a screen-share track during a call triggers negotiationneeded, prompting a fresh SDP exchange that updates the remote peer.

async function startScreenShare() {
  const screen = await navigator.mediaDevices.getDisplayMedia();
  const track = screen.getVideoTracks()[0];
  pc.addTrack(track, screen); // fires negotiationneeded
}

The Glare Problem

If both peers create offers at the same time, they collide. This is called glare. The fix is the perfect negotiation pattern, where one peer is polite and rolls back its offer when a collision occurs.

Perfect Negotiation Sketch

A polite peer rolls back on collision; the impolite peer ignores the incoming offer. This guarantees exactly one negotiation succeeds.

const offerCollision = (msg.type === 'offer') &&
  (makingOffer || pc.signalingState !== 'stable');
ignoreOffer = !polite && offerCollision;
if (ignoreOffer) return;
if (offerCollision) await pc.setLocalDescription({ type: 'rollback' });

Closing Cleanly

When a call ends, stop tracks and close the connection to free resources and release the camera and microphone.

function hangUp() {
  pc.getSenders().forEach(s => s.track && s.track.stop());
  pc.close();
}

Putting It Together

Robust WebRTC apps monitor connection state, restart ICE on path loss, renegotiate when tracks change, and handle glare with perfect negotiation. These behaviors turn a fragile demo into a reliable product.

Quick Check

Test your understanding of renegotiation.

Beantworte es in der interaktiven Lektion

Recap

You learned about connection state and renegotiation:

connectionState and iceConnectionState report health
ICE restart recovers from network path changes
negotiationneeded triggers a fresh SDP exchange
Perfect negotiation resolves glare; clean shutdown frees devices

These skills keep peer connections resilient over time.

Kostenlos starten

Lerne Real-Time Streaming Systems (WebRTC + Live Data) mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 12
Lektionen: 48

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Neuverhandlung und Verbindungsstatus“ kostenlos?

Ja — der vollständige Text von „Neuverhandlung und Verbindungsstatus“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Real-Time Streaming Systems (WebRTC + Live Data)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Real-Time Streaming Systems (WebRTC + Live Data)-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Neuverhandlung und Verbindungsstatus“?

Lernen Sie, wie sich WebRTC-Peer-Verbindungen im Laufe der Zeit verändern: Verbindungsstatus überwachen, ICE-Neustarts behandeln und SDP neu aushandeln, wenn sich Medien- oder Netzwerkbedingungen änd… Du übst Real-Time Streaming Systems (WebRTC + Live Data) mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Real-Time Streaming Systems (WebRTC + Live Data) zu starten?

Keine Vorkenntnisse erforderlich. Real-Time Streaming Systems (WebRTC + Live Data) auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Neuverhandlung und Verbindungsstatus“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Real-Time Streaming Systems (WebRTC + Live Data)-Lektion Code schreiben und ausführen?

Ja. Jede Real-Time Streaming Systems (WebRTC + Live Data)-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Real-Time Streaming Systems (WebRTC + Live Data)