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

التحكم في جودة الوسائط وقيودها

تعلّم تشكيل وسائط WebRTC عبر تطبيق قيود الدقة ومعدل الإطارات، وكتم المسارات، وتبديل الأجهزة، وضبط معدل ترميز البيانات لتحقيق جودة متكيفة.

الدرس 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 دروس في المجموع.

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

Beyond Just Getting Media

You can access devices and display remote streams. Now you will learn to control media quality: resolution, frame rate, muting, device switching, and bandwidth, so calls look good and stay smooth on any network.

Media Constraints

When requesting media you pass constraints describing the quality you want. The browser tries to satisfy them, falling back if the hardware cannot.

const stream = await navigator.mediaDevices.getUserMedia({
  video: { width: 1280, height: 720, frameRate: 30 },
  audio: { echoCancellation: true }
});

Ideal vs Exact

Use ideal for a preferred value the browser can relax, and exact to require it (which fails if unavailable). Prefer ideal for flexibility.

const constraints = {
  video: {
    width: { ideal: 1280 },
    height: { ideal: 720 },
    frameRate: { ideal: 30, max: 60 }
  }
};

Changing Constraints Live

You can adjust quality on an existing track with applyConstraints, for example lowering resolution to save bandwidth, without restarting the stream.

const track = stream.getVideoTracks()[0];
await track.applyConstraints({ width: 640, height: 360 });

Muting Tracks

To mute, set a track's enabled to false. The track stays in the connection but transmits black frames or silence, so no renegotiation is needed.

function toggleMic(stream) {
  const audio = stream.getAudioTracks()[0];
  audio.enabled = !audio.enabled;
  return audio.enabled;
}

Enumerating Devices

To let users pick a camera or mic, list available devices with enumerateDevices and use each device's deviceId.

const devices = await navigator.mediaDevices.enumerateDevices();
const cameras = devices.filter(d => d.kind === 'videoinput');

Switching Cameras Mid-Call

To switch devices without renegotiating, get the new track and replaceTrack on the existing sender.

async function switchCamera(pc, deviceId) {
  const s = await navigator.mediaDevices.getUserMedia({
    video: { deviceId: { exact: deviceId } }
  });
  const newTrack = s.getVideoTracks()[0];
  const sender = pc.getSenders().find(x => x.track.kind === 'video');
  await sender.replaceTrack(newTrack);
}

Limiting Bitrate

You can cap how much bandwidth a track uses through the sender's encoding parameters, useful on metered or weak connections.

const sender = pc.getSenders()[0];
const params = sender.getParameters();
params.encodings[0].maxBitrate = 500000; // 500 kbps
await sender.setParameters(params);

Simulcast Basics

Simulcast sends multiple quality layers of the same video at once. A media server then forwards the layer each receiver can handle, improving group calls on mixed connections.

Reading Stats

The getStats API reports live metrics like resolution, frame rate, and packet loss so you can adapt quality dynamically.

const stats = await pc.getStats();
stats.forEach(report => {
  if (report.type === 'outbound-rtp') {
    console.log('fps:', report.framesPerSecond);
  }
});

Putting Quality First

Good calls balance quality against the network: request sensible constraints, let users mute and switch devices, cap bitrate when needed, and monitor stats to adapt. These controls turn raw media into a polished experience.

Quick Check

Test your understanding of media control.

أجب عليها في الدرس التفاعلي

Recap

You learned to control media quality:

Constraints with ideal/exact, adjustable via applyConstraints
Muting with track.enabled
Device switching via replaceTrack
Bitrate caps, simulcast, and getStats for adaptation

These tools deliver smooth, high-quality calls across networks.

البدء مجانًا

تعلم 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 عبر تطبيق قيود الدقة ومعدل الإطارات، وكتم المسارات، وتبديل الأجهزة، وضبط معدل ترميز البيانات لتحقيق جودة متكيفة. تتمرن على 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)