Negosiasi Ulang dan Status Koneksi
Pelajari cara koneksi peer WebRTC berubah seiring waktu: memantau status koneksi, menangani mulai ulang ICE, dan menegosiasikan ulang SDP saat kondisi media atau jaringan berubah.
Negosiasi Ulang dan Status Koneksi adalah pelajaran Real-Time Streaming Systems (WebRTC + Live Data) gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Real-Time Streaming Systems (WebRTC + Live Data), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Real-Time Streaming Systems (WebRTC + Live Data) mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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:
connectionStateandiceConnectionStatereport health- ICE restart recovers from network path changes
negotiationneededtriggers a fresh SDP exchange- Perfect negotiation resolves glare; clean shutdown frees devices
These skills keep peer connections resilient over time.
Belajar Real-Time Streaming Systems (WebRTC + Live Data) dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 12
- Pelajaran
- 48
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Negosiasi Ulang dan Status Koneksi” gratis?
Ya — teks lengkap “Negosiasi Ulang dan Status Koneksi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Real-Time Streaming Systems (WebRTC + Live Data), upgrade ke CoddyKit PRO. Kursus Real-Time Streaming Systems (WebRTC + Live Data) mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Negosiasi Ulang dan Status Koneksi”?
Pelajari cara koneksi peer WebRTC berubah seiring waktu: memantau status koneksi, menangani mulai ulang ICE, dan menegosiasikan ulang SDP saat kondisi media atau jaringan berubah. Kamu berlatih Real-Time Streaming Systems (WebRTC + Live Data) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Real-Time Streaming Systems (WebRTC + Live Data)?
Tidak diperlukan pengalaman sebelumnya. Real-Time Streaming Systems (WebRTC + Live Data) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Negosiasi Ulang dan Status Koneksi” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Real-Time Streaming Systems (WebRTC + Live Data) ini?
Ya. Setiap pelajaran Real-Time Streaming Systems (WebRTC + Live Data) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Peran Server Signaling
- SDP: Protokol Deskripsi Sesi
- Kandidat ICE dan Konektivitas
- Negosiasi Ulang dan Status Koneksi