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

شرح المكوّنات الأساسية لـ WebRTC

تعرّف إلى المكوّنات الرئيسية لـ WebRTC: getUserMedia وRTCPeerConnection وRTCDataChannel، ووظائفها.

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

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

WebRTC's Core Building Blocks

WebRTC rests on three JavaScript APIs: getUserMedia (camera/mic), RTCPeerConnection (the P2P link), and RTCDataChannel (arbitrary data).

Accessing Media with getUserMedia

getUserMedia() is your gateway to the user's camera and mic. It prompts for permission, then hands back a MediaStream with the audio and video tracks.

getUserMedia in Action

This snippet requests camera and mic access, then attaches the resulting MediaStream to a video element on the page.

async function startLocalStream() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    const localVideo = document.getElementById('localVideo');
    localVideo.srcObject = stream;
  } catch (error) {
    console.error('Error accessing media devices:', error);
  }
}

// Call the function to start the stream
// startLocalStream();

RTCPeerConnection: The Core Link

RTCPeerConnection is the heart of WebRTC. It manages the whole peer-to-peer link: connecting, encoding and decoding media, and handling network and security.

Setting Up a Peer Connection

You create an RTCPeerConnection per peer. It negotiates the link by exchanging offers and answers (SDP) and network candidates (ICE), as the code shows.

const peerConnection = new RTCPeerConnection({
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' }
  ]
});

// Add a local media stream to the connection
// stream.getTracks().forEach(track => {
//   peerConnection.addTrack(track, stream);
// });

RTCDataChannel: Beyond Audio/Video

While media flows through the connection, RTCDataChannel carries any data you like - perfect for text chat, file sharing, or syncing game state.

Data Channels in Action

You open a data channel on an existing connection. It works much like a WebSocket: send messages and listen for incoming data, as shown.

const dataChannel = peerConnection.createDataChannel('chat');

dataChannel.onopen = (event) => {
  console.log('Data channel opened!');
  dataChannel.send('Hello from CoddyKit!');
};

dataChannel.onmessage = (event) => {
  console.log('Received message:', event.data);
};

dataChannel.onclose = () => {
  console.log('Data channel closed.');
};

Comparing DataChannel to Media

Both ride the same P2P connection. Media streams favor UDP for real-time audio/video, while data channels can be reliable or unreliable, like TCP or UDP.

The Unified WebRTC Flow

The pieces fit together: get media with getUserMedia, create an RTCPeerConnection, add tracks, optionally open a data channel, then exchange SDP/ICE to connect.

Quick Check: Core Components

Which WebRTC component is primarily responsible for establishing and managing the peer-to-peer connection itself?

Recap: WebRTC's Foundation

Recap: WebRTC's foundation is three APIs - getUserMedia, RTCPeerConnection, and RTCDataChannel. Next: how signaling helps peers find each other.

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

هل درس «شرح المكوّنات الأساسية لـ WebRTC» مجاني؟

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

ماذا ستتعلم في «شرح المكوّنات الأساسية لـ WebRTC»؟

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

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

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

كم من الوقت يستغرق درس «شرح المكوّنات الأساسية لـ WebRTC»؟

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

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

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

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

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