0Pricing
Real-Time Streaming Systems (WebRTC + Live Data) · レッスン

再ネゴシエーションと接続状態

接続状態の監視、ICEの再起動、メディアやネットワーク状況の変化に応じたSDPの再ネゴシエーションなど、WebRTCのピア接続が時間とともに変化する仕組みを学びます。

「再ネゴシエーションと接続状態」はCoddyKit上の無料Real-Time Streaming Systems (WebRTC + Live Data)レッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReal-Time Streaming Systems (WebRTC + Live Data)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Real-Time Streaming Systems (WebRTC + Live Data)コースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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.

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.

よくある質問

「再ネゴシエーションと接続状態」レッスンは無料ですか？

はい。「再ネゴシエーションと接続状態」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Real-Time Streaming Systems (WebRTC + Live Data)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Real-Time Streaming Systems (WebRTC + Live Data)コースには全4レッスンが含まれています。

「再ネゴシエーションと接続状態」で何を学びますか？

接続状態の監視、ICEの再起動、メディアやネットワーク状況の変化に応じたSDPの再ネゴシエーションなど、WebRTCのピア接続が時間とともに変化する仕組みを学びます。 ブラウザで直接実行するハンズオンコードでReal-Time Streaming Systems (WebRTC + Live Data)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Real-Time Streaming Systems (WebRTC + Live Data)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReal-Time Streaming Systems (WebRTC + Live Data)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「再ネゴシエーションと接続状態」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReal-Time Streaming Systems (WebRTC + Live Data)レッスンでコードを書いて実行できますか？

はい。すべてのReal-Time Streaming Systems (WebRTC + Live Data)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. シグナリングサーバーの役割
  2. SDP：Session Description Protocol
  3. ICE候補と接続性
  4. 再ネゴシエーションと接続状態
← Real-Time Streaming Systems (WebRTC + Live Data)に戻る