Real-Time Streaming Systems (WebRTC + Live Data) · درس

إعادة التفاوض وحالة الاتصال

تعلّم كيف تتغير اتصالات WebRTC بين النظراء بمرور الوقت: مراقبة حالة الاتصال، ومعالجة عمليات إعادة تشغيل ICE، وإعادة التفاوض على SDP عند تغير الوسائط أو ظروف الشبكة.

الدرس 4 من 413 خطوة

إعادة التفاوض وحالة الاتصال درس مجاني في Real-Time Streaming Systems (WebRTC + Live Data) على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في 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.

البدء مجانًا

تعلم Real-Time Streaming Systems (WebRTC + Live Data) مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 12
الدروس: 48

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «إعادة التفاوض وحالة الاتصال» مجاني؟

نعم — نص درس «إعادة التفاوض وحالة الاتصال» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Real-Time Streaming Systems (WebRTC + Live Data)، انتقل إلى CoddyKit PRO. تتضمن دورة Real-Time Streaming Systems (WebRTC + Live Data) 4 دروس في المجموع.

ماذا ستتعلم في «إعادة التفاوض وحالة الاتصال»؟

تعلّم كيف تتغير اتصالات WebRTC بين النظراء بمرور الوقت: مراقبة حالة الاتصال، ومعالجة عمليات إعادة تشغيل ICE، وإعادة التفاوض على SDP عند تغير الوسائط أو ظروف الشبكة. تتمرن على Real-Time Streaming Systems (WebRTC + Live Data) مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Real-Time Streaming Systems (WebRTC + Live Data)؟

لا تُشترط خبرة سابقة. Real-Time Streaming Systems (WebRTC + Live Data) على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «إعادة التفاوض وحالة الاتصال»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Real-Time Streaming Systems (WebRTC + Live Data) هذا؟

نعم. كل درس في Real-Time Streaming Systems (WebRTC + Live Data) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Real-Time Streaming Systems (WebRTC + Live Data)